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: [{
          lineColor: "#4F81BC",
          tickColor: "#4F81BC",
          labelFontColor: "#4F81BC",
          titleFontColor: "#4F81BC",
          lineThickness: 3,
      	},
        {
          lineColor: "#C0504E",
          tickColor: "#C0504E",
          labelFontColor: "#C0504E",
          titleFontColor: "#C0504E",
          lineThickness: 1,
          
      	}],
    data: getData()
  });
  
  chart.render();
}

function getData() {
  var chartData = [];
  var speedData = [];
  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() * 10000);

    chartData.push({
      x: newDate,
      y: a
    });
    speedData.push({
    	x: newDate,
      y: b
    })
  }
  
  var rateSeries = {
    type: "line",
    name: "Rate",
    axisYIndex: 0,
		showInLegend: true,
    dataPoints: chartData
  };
  
  var speedSeries = {
  	type: "line",
    name: "Speed",
    axisYIndex: 1,
		showInLegend: true,
    dataPoints: speedData
  };

  return [rateSeries, speedSeries];

}

makeChart();