| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> |
| <style> |
| |
| </style> |
| <body> |
| |
| <svg id="test1"></svg> |
| |
| <script src="../lib/d3.v3.js"></script> |
| <script src="../nv.d3.js"></script> |
| <script src="../src/utils.js"></script> |
| <script src="../src/models/legend.js"></script> |
| <script> |
| |
| |
| //Format A |
| nv.addGraph({ |
| generate: function() { |
| var width = 500, |
| height = 20; |
| |
| var chart = nv.models.legend() |
| .width(width) |
| .height(height); |
| |
| chart.dispatch.on('legendClick', function(d,i) { console.log(d,i) }); |
| |
| //chart.xaxis.tickFormat(d3.format(".02f")) |
| |
| d3.select('#test1') |
| .attr('width', width) |
| .attr('height', height) |
| .datum(sinAndCos()) |
| .call(chart); |
| |
| return chart; |
| }, |
| callback: function(graph) { |
| var chart = graph, |
| height = chart.height(); |
| |
| d3.select('#test1') |
| .attr('height', height) |
| .call(chart) |
| } |
| }); |
| |
| |
| |
| function sinAndCos() { |
| return [ |
| { |
| key: "Sine Wave" |
| }, |
| { |
| key: "A Very Long Series Label" |
| }, |
| { |
| key: "A Very Long Series Label" |
| }, |
| { |
| key: "A Very Long Series Label" |
| }, |
| { |
| key: "Cosine Wave" |
| }, |
| { |
| key: "Another test label" |
| } |
| ]; |
| } |
| |
| |
| </script> |
