Line Chart with Date Time Axis- CanvasJS JavaScript Charts

Line Chart with Date Time Axis- CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  height: 600,
  zoomEnabled: true,
  title: {
    text: "Simple ".concat("Line").concat(" Chart"),
    fontSize: 15
  },
  axisX: {
    title: "Time",
    titleFontSize: 15,
    includeZero: false,
    valueFormatString: "HH:mm:ss.fff",
    labelFontSize: 15,
    labelAngle: -50
  },
  axisY: {
    interlacedColor: "#F0F8FF",
    title: "Price",
    titleFontSize: 15,
    valueFormatString: "0.000000",
    labelFontSize: 15,
    includeZero: false
  },
  legend: {
    cursor: "pointer",
    itemclick: function(e) {
      if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
      } else {
        e.dataSeries.visible = true;
      }
      e.chart.render();
    },
    fontSize: 15
  },
  data: [{
    "showInLegend": true,
    "legendText": "Child Order xxx (xxx)",
    "xValueFormatString": "HH:mm:ss.fff",
    "markerSize": 12,
    "type": "line",
    "lineThickness": 2,
    "toolTipContent": "Average Filled ",
    "dataPoints": [
    //{ x: new Date("2016-08-26 07:00:22.331"), y: 6.2345, "markerType": "circle" },
    //{ x: new Date("2016-08-26 07:00:34.680"), y: 6.3654, "markerType": "cross"}
    
    { x: new Date("2016-08-26T07:00:22"), y: 6.2345, "markerType": "circle" },
    { x: new Date("2016-08-26T07:00:34"), y: 6.3654, "markerType": "cross"}
    
    ]
  }]

});
chart.render();