Rendering Chart from JSON Data (DateTime over X-Axis) - CanvasJS JavaScript Charts

Rendering Chart from JSON Data (DateTime over X-Axis) - CanvasJS JavaScript Charts

by canvasjs

HTML

<!-- <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> -->
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
//$(document).ready(function(){
window.onload = function(){
  var dataPoints = [];

  var jsonData = [{"x": "2016-07-20 13:13:50","y": 73.6},
                  {"x": "2016-07-20 13:13:56","y": 73.6},
                  {"x": "2016-07-20 13:14:01","y": 73.6},
                  {"x": "2016-07-20 13:14:07","y": 73.6},
                  {"x": "2016-07-20 13:14:13","y": 73.6},
                  {"x": "2016-07-20 13:14:18","y": 73.6},
                  {"x": "2016-07-20 13:14:24","y": 73.6},
                  {"x": "2016-07-20 13:14:30","y": 73.5},
                  {"x": "2016-07-20 13:14:36","y": 73.5},
                  {"x": "2016-07-20 13:14:41","y": 73.4},
                  {"x": "2016-07-20 13:14:47","y": 73.4},
                  {"x": "2016-07-20 13:14:53","y": 73.4},
                  {"x": "2016-07-20 13:14:58","y": 73.4},
                  {"x": "2016-07-20 13:15:04","y": 73.5},
                  {"x": "2016-07-20 13:15:10","y": 73.5}];

  for (var i = 0; i < jsonData.length; i++) {
      dataPoints.push({
          x: new Date(jsonData[i].x),
          y: jsonData[i].y
      });
  }

  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Render Chart from JSON Data"
    },
    axisX: {
      title: "Time",
    },
    axisY: {
      includeZero: false
    },
    data: [{
      type: "line",
      dataPoints: dataPoints
    }]
  });
	chart.render();
}
//})
</script>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  test
</body>