blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding real time bar chart test example. Updating historicalBar.js

Browse Source 
to add a data key function for each bar <rect>.
Added transition to historicalBarChart.update, just like lineChart.
master
Robin Hu 11 years ago
parent 2cf5b63c91
commit 535993aa7c
4 changed files with 105 additions and 2 deletions
Show Stats Download Patch File Download Diff File

2
src/models/historicalBar.js
Unescape Escape View File

@ -102,7 +102,7 @@ nv.models.historicalBar = function() {
var bars = wrap.select('.nv-bars').selectAll('.nv-bar')
.data(function(d) { return d });
.data(function(d) { return d }, function(d,i) {return getX(d,i)});
bars.exit().remove();

2
src/models/historicalBarChart.js
Unescape Escape View File

@ -85,7 +85,7 @@ nv.models.historicalBarChart = function() {
- margin.top - margin.bottom;
chart.update = function() { chart(selection) };
chart.update = function() { container.transition().call(chart) };
chart.container = this;
//set state.disabled

1
test/lineChartTest.html
Unescape Escape View File

@ -13,6 +13,7 @@
<a href="stackedAreaChartTest.html">Stacked Area</a>
<a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
<a href="ScatterChartTest.html">Scatter</a>
<a href="realTimeChartTest.html">Real time test</a>
<a href="interactiveBisectTest.html">nv.interactiveBisect unit tests</a>
</div>
<div class='chart full' id='chart1'>

102
test/realTimeChartTest.html
Unescape Escape View File

@ -0,0 +1,102 @@
<!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>
Write Preview
Loading…
Cancel
Save