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://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

$(document).ready(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();
})