| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| |
| <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> |
| <link href="teststyle.css" rel="stylesheet" type='text/css'> |
| |
| <body> |
| <div class='navigation'> |
| Tests: |
| <a href="lineChartTest.html">Line Chart</a> |
| <a href="stackedAreaChartTest.html">Stacked Area</a> |
| <a href="../examples/cumulativeLineChart.html">Cumulative Line</a> |
| <a href="ScatterChartTest.html">Scatter</a> |
| </div> |
| <h3>Example showing real time chart updating</h3> |
| The chart below is a historical bar chart, which is ideal for visualizing time series data.<br/> |
| First, you need to update the data model for the chart. In the example, we append a random number |
| every half a second. Then, you call <strong>chart.update()</strong>. |
| |
| <div id='chart' class='chart half with-transitions'> |
| <svg></svg> |
| <button id='start-stop-button'>Start/Stop Stream</button> |
| </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/interactiveLayer.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 src="../src/models/historicalBar.js"></script> |
| <script src="../src/models/historicalBarChart.js"></script> |
| |
| <script> |
| var chart; |
| var data = [{ |
| key: "Stream 1", |
| color: "orange", |
| values: [ |
| {x: 1, y: 1} |
| ] |
| }]; |
| nv.addGraph(function() { |
| |
| chart = nv.models.historicalBarChart(); |
| |
| chart |
| .x(function(d,i) { return d.x }); |
| |
| chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately |
| .tickFormat(d3.format(',.1f')) |
| .axisLabel("Time") |
| ; |
| |
| chart.yAxis |
| .axisLabel('Random Number') |
| .tickFormat(d3.format(',.4f')); |
| |
| chart.showXAxis(true).showYAxis(true).rightAlignYAxis(true).margin({right: 90}); |
| |
| d3.select('#chart svg') |
| .datum(data) |
| .transition().duration(500) |
| .call(chart); |
| |
| nv.utils.windowResize(chart.update); |
| |
| return chart; |
| }); |
| |
| var x = 2; |
| var run = true; |
| setInterval(function(){ |
| if (!run) return; |
| |
| var spike = (Math.random() > 0.95) ? 10: 1; |
| data[0].values.push({ |
| x: x, |
| y: Math.random() * spike |
| }); |
| |
| if (data[0].values.length > 70) { |
| data[0].values.shift(); |
| } |
| x++; |
| |
| chart.update(); |
| }, 500); |
| |
| d3.select("#start-stop-button").on("click",function() { |
| run = !run; |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
