What is wrong with the following codes? Why the graph is not shown

I am trying to come out with a line graph using canvasjs from the external JSON file. The JSON file consists of Date, high, open, low, vol and price. What is needed to show in the graph are the Date, high, open and low.

This is what I have done:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script>

window.onload = function () {
    var dataPoints1 = [];
    var dataPoints2 = [];
    var dataPoints3 = [];

    var chart = new CanvasJS.Chart("chartContainer", {
title:{
    text: "Data"
},
axisX:{
    title:"Date"
},
axisY:[{
    title: "Open",
    lineColor: "#C24642",
    tickColor: "#C24642",
    labelFontColor: "#C24642",
    titleFontColor: "#C24642"

},
{
    title: "High",
    lineColor: "#369EAD",
    tickColor: "#369EAD",
    labelFontColor: "#369EAD",
    titleFontColor: "#369EAD"
}],
axisY2: {
    title: "Low",
    lineColor: "#7F6084",
    tickColor: "#7F6084",
    labelFontColor: "#7F6084",
    titleFontColor: "#7F6084"
},
toolTip: {
    shared: true
},
legend: {
    cursor: "pointer",
    itemclick: toggleDataSeries
},
data: [{
    type: "line",
    name: "High",
    color: "#369EAD",
    showInLegend: true,
    axisYIndex: 1,
    dataPoints: dataPoints1
},
{
    type: "line",
    name: "Open",
    color: "#C24642",
    axisYIndex: 0,
    showInLegend: true,
    dataPoints: dataPoints2
},
{
    type: "line",
    name: "Low",
    color: "#7F6084",
    axisYType: "secondary",
    showInLegend: true,
    dataPoints: dataPoints3
}]
});

$.getJSON("q_data.json", callback); 



function callback(data) {   

for (var i = 0; i < data.length; i++) {
    dataPoints1.push({
        x: data[i].Date,
        y: data[i].open
    });
    dataPoints2.push({
        x: data[i].Date,
        y: data[i].high
    });
    dataPoints3.push({
        x: data[i].Date,
        y: data[i].low
    });
}
chart.render(); 
    }


function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
} else {
    e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>
</html>

I am expecting it to show the plotted line graph but it only shows the y-axis, x-axis and title of the graph. No error message is shown.

Solution

CanvasJS supports only number and date-time in x-values whereas x-value is a string in the sample JSON that you have shared. Changing it to date-object while parsing the JSON should work fine.

var dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Data"
  },
  axisX:{
    title:"Date"
  },
  axisY:[{
    title: "Open",
    lineColor: "#C24642",
    tickColor: "#C24642",
    labelFontColor: "#C24642",
    titleFontColor: "#C24642"

  },{
    title: "High",
    lineColor: "#369EAD",
    tickColor: "#369EAD",
    labelFontColor: "#369EAD",
    titleFontColor: "#369EAD"
  }],
  axisY2: {
    title: "Low",
    lineColor: "#7F6084",
    tickColor: "#7F6084",
    labelFontColor: "#7F6084",
    titleFontColor: "#7F6084"
  },
  toolTip: {
    shared: true
  },
  legend: {
    cursor: "pointer",
    itemclick: toggleDataSeries
  },
  data: [{
    type: "line",
    name: "High",
    color: "#369EAD",
    showInLegend: true,
    axisYIndex: 1,
    dataPoints: dataPoints1
  },{
    type: "line",
    name: "Open",
    color: "#C24642",
    axisYIndex: 0,
    showInLegend: true,
    dataPoints: dataPoints2
  },{
    type: "line",
    name: "Low",
    color: "#7F6084",
    axisYType: "secondary",
    showInLegend: true,
    dataPoints: dataPoints3
  }]
});

$.getJSON("https://api.myjson.com/bins/1gfuo7", callback); 

function callback(data) {
  for (var i = 0; i < data.length; i++) {
    dataPoints1.push({
      x: new Date(data[i].Date),
      y: data[i].open
    });
    dataPoints2.push({
      x: new Date(data[i].Date),
      y: data[i].high
    });
    dataPoints3.push({
      x: new Date(data[i].Date),
      y: data[i].low
    });
  }
  chart.render(); 
}

function toggleDataSeries(e) {
  if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
  } else {
    e.dataSeries.visible = true;
  }
  e.chart.render();
}

<div id="chartContainer" style="height: 250px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>