<!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>