Hi,
I met a strange issue. I can’t see the line chart when open the web page. Then I resize the window/browser, the line chart then can be seen and works well. The question is: why a resize is needed to see the chart?
I suppose it is related to the getJSON, because if I put the data directly into html (instead of reading from json file) it can always work well. :)
Below is my code: index.html
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript” src=”canvasjs.min.js”></script>
<script type=”text/javascript” src=”jquery-2.1.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
var dataPointsA = []
var dataPointsB = []
$.getJSON(“test.json”, function (field) {
for( var i = 0; i < field.length; i++) {
dataPointsA.push({ x:field[i].time, y:field[i].xxx});
dataPointsB.push({ x:field[i].time, y:field[i].yyy});
}
})
var chart = new CanvasJS.Chart(“chartContainer”,
{
title:{
text: “Test line”
},
data: [
{
type: “line”,
name: “line1”,
dataPoints: dataPointsA
},
{
type: “line”,
name: “line2″,
dataPoints: dataPointsB
},
]
});
chart.render();
})
</script>
</head>
<body>
<div id=”chartContainer” style=”height: 600px; width: 100%;”>
</div>
</body>
</html>
Below is my data file: test.json
[
{“time”:1545,”xxx”:105,”yyy”:494},
{“time”:1546,”xxx”:103,”yyy”:995},
{“time”:1547,”xxx”:114,”yyy”:445},
{“time”:1548,”xxx”:114,”yyy”:445},
{“time”:1549,”xxx”:114,”yyy”:445},
{“time”:1550,”xxx”:73,”yyy”:4933},
{“time”:1551,”xxx”:122,”yyy”:1569},
{“time”:1552,”xxx”:90,”yyy”:10046},
{“time”:1553,”xxx”:90,”yyy”:10045},
{“time”:1601,”xxx”:90,”yyy”:10045},
{“time”:1602,”xxx”:90,”yyy”:10044},
{“time”:1603,”xxx”:90,”yyy”:10045},
{“time”:1604,”xxx”:103,”yyy”:3289},
{“time”:1605,”xxx”:131,”yyy”:1035},
{“time”:1606,”xxx”:90,”yyy”:10044},
{“time”:1607,”xxx”:92,”yyy”:2801},
{“time”:1608,”xxx”:90,”yyy”:8639},
{“time”:1609,”xxx”:119,”yyy”:1092},
{“time”:1610,”xxx”:90,”yyy”:8636},
{“time”:1611,”xxx”:98,”yyy”:512},
{“time”:1612,”xxx”:90,”yyy”:8637},
{“time”:1613,”xxx”:67,”yyy”:2823},
{“time”:1614,”xxx”:69,”yyy”:3378}
]
Regards,
Alben Shao
.
