My goal is to create a line graph using CanvasJS with data sourced from an external JSON file. The JSON file includes Date, high, open, low, vol, and price values. The graph should display Date, high, open, and low values only.
This is the code I have written:
<!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>
Although I expect the plotted line graph to be displayed, it only shows the y-axis, x-axis, and the title of the graph without any error messages.