CanvasJS

Chart built using CanvasJS

by Oleg

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>
<p class="description">An HTML5 Step Area Chart built using CanvasJS.<br/>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

JavaScript

var dps = []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer", {
  title: { text: "Live Random Data" },
  data: [{ type: "line", dataPoints: dps }],
  axisX: {}
});

var xVal = 0,  yVal = 100;

var updateChart = function(count) {
  count = count || 1;

  for (var j = 0; j < count; j++) {
    yVal = yVal + Math.round(5 + Math.random() * (-10));
    dps.push({ x: xVal, y: yVal });
    xVal++;
  };
  
  win = 50000;
  v = dps.length - win;
  if (v > 0) dps.splice(0, v);
  
  var samples = 10000;
  var d2 = dps.length - 1;
  var d1 = (d2 >= samples) ? (d2 - samples) : 0;  

  chart.options.axisX.viewportMinimum = dps[d1].x;
	chart.options.axisX.viewportMaximum = dps[d2].x;
};

setInterval(function() {chart.render();}, 200);

setInterval(function() { updateChart(500) }, 10);