CanvasJS - Large Dataset

by jroberts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<h1 id="h1">
Chart here!
</h1>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div id="statsdiv"></div>

JavaScript

var data = [];
function makeChart() {
  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true,
    title: {
      text: "Rate Chart - Lots of data"
    },
    axisX: {
      labelAngle: -30
    },
    axisY: {
      includeZero: true
    },
    data: getData()
  });
  
  chart.render();
}

function getData() {
  var chartData = [];
  var firstDate = new Date(2012, 0, 1);
  firstDate.setDate(firstDate.getDate() - 43200);
  firstDate.setHours(0, 0, 0, 0);

  // 43200 = 60 * 24 * 30 (the minutes in a month)
  for (var i = 0; i < 43200; i++) {
    var newDate = new Date(firstDate);
    newDate.setMinutes(newDate.getMinutes() + i);

    var a = Math.round(Math.random() * (40 + i)) + 100 + i * 1.14159;
    var b = Math.round(Math.random() * 100000000);

    chartData.push({
      x: newDate,
      y: a,
      z: b
    });
  }
  console.log(chartData);
  var dataSeries = {
    type: "line",
    dataPoints: chartData
  };

  return [dataSeries];

}

makeChart();