| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| |
| <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> |
| |
| <style> |
| |
| body { |
| overflow-y:scroll; |
| } |
| |
| text { |
| font: 12px sans-serif; |
| } |
| |
| svg { |
| display: block; |
| } |
| |
| </style> |
| <body> |
| <div id="chartZoom"> |
| <a href="#" id="zoomIn">Zoom In</a> <a href="#" id="zoomOut">Zoom Out</a> |
| </div> |
| |
| <div id="chart1" class='with-transitions'> |
| <svg></svg> |
| </div> |
| |
| <script src="../lib/d3.v3.js"></script> |
| <script src="../nv.d3.js"></script> |
| <script src="../src/tooltip.js"></script> |
| <script src="../src/utils.js"></script> |
| <script src="../src/models/legend.js"></script> |
| <script src="../src/models/axis.js"></script> |
| <script src="../src/models/scatter.js"></script> |
| <script src="../src/models/line.js"></script> |
| <script src="../src/models/lineChart.js"></script> |
| <script> |
| |
| |
| nv.addGraph(function() { |
| var chart = nv.models.lineChart(); |
| var fitScreen = false; |
| var width = 600; |
| var height = 300; |
| var zoom = 1; |
| |
| chart.useInteractiveGuideline(true); |
| chart.xAxis |
| .tickFormat(d3.format(',r')); |
| |
| chart.yAxis |
| .axisLabel('Voltage (v)') |
| .tickFormat(d3.format(',.2f')); |
| |
| d3.select('#chart1 svg') |
| .attr('perserveAspectRatio', 'xMinYMid') |
| .attr('width', width) |
| .attr('height', height) |
| .datum(sinAndCos()); |
| |
| setChartViewBox(); |
| resizeChart(); |
| |
| // These resizes both do the same thing, and require recalculating the chart |
| //nv.utils.windowResize(chart.update); |
| //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) }); |
| nv.utils.windowResize(resizeChart); |
| |
| d3.select('#zoomIn').on('click', zoomIn); |
| d3.select('#zoomOut').on('click', zoomOut); |
| |
| |
| function setChartViewBox() { |
| var w = width * zoom, |
| h = height * zoom; |
| |
| chart |
| .width(w) |
| .height(h); |
| |
| d3.select('#chart1 svg') |
| .attr('viewBox', '0 0 ' + w + ' ' + h) |
| .transition().duration(500) |
| .call(chart); |
| } |
| |
| function zoomOut() { |
| zoom += .25; |
| setChartViewBox(); |
| } |
| |
| function zoomIn() { |
| if (zoom <= .5) return; |
| zoom -= .25; |
| setChartViewBox(); |
| } |
| |
| // This resize simply sets the SVG's dimensions, without a need to recall the chart code |
| // Resizing because of the viewbox and perserveAspectRatio settings |
| // This scales the interior of the chart unlike the above |
| function resizeChart() { |
| var container = d3.select('#chart1'); |
| var svg = container.select('svg'); |
| |
| if (fitScreen) { |
| // resize based on container's width AND HEIGHT |
| var windowSize = nv.utils.windowSize(); |
| svg.attr("width", windowSize.width); |
| svg.attr("height", windowSize.height); |
| } else { |
| // resize based on container's width |
| var aspect = chart.width() / chart.height(); |
| var targetWidth = parseInt(container.style('width')); |
| svg.attr("width", targetWidth); |
| svg.attr("height", Math.round(targetWidth / aspect)); |
| } |
| }; |
| |
| |
| return chart; |
| }); |
| |
| |
| |
| function sinAndCos() { |
| var sin = [], |
| cos = []; |
| |
| for (var i = 0; i < 100; i++) { |
| sin.push({x: i, y: Math.sin(i/10) }); |
| cos.push({x: i, y: .5 * Math.cos(i/10)}); |
| } |
| |
| return [ |
| { |
| values: sin, |
| key: "Sine Wave", |
| color: "#ff7f0e" |
| }, |
| { |
| values: cos, |
| key: "Cosine Wave", |
| color: "#2ca02c" |
| } |
| ]; |
| } |
| |
| |
| </script> |
