You must be logged in to post your query.
Home › Forums › Chart Support › interesting issue using jquery getJSON
Tagged: jquery, JSON
Hi all, struggling to see where i’m going wrong here, having adapted the example from HERE. I see identical format when i console.log(data), so unsure sure why there is no chart.
Code I’m using:
<script type="text/javascript"> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: true, animationEnabled: true, title:{ text: "100,000 Data Points! Zoom-in And Observe Axis Labels" }, axisX :{ labelAngle: -30 }, axisY :{ includeZero:false }, data: data }); chart.render(); } var data = []; var dataSeries = { type: "line" }; var dataPoints = []; (function () { $.getJSON('boop.little.json', function(thedata) { $.each(thedata, function(i, v) { dataPoints.push({ x: new Date(v.Datetime), y: parseFloat(v.Value) }); }); } ) })(); dataSeries.dataPoints = dataPoints; data.push(dataSeries); //console.log(data); </script>
JSON file source I’m using:
[ { "Datetime": "01/01/2012 00:00:01", "Value": "0.48" }, { "Datetime": "01/01/2012 00:10:01", "Value": "0.50" }, { "Datetime": "01/01/2012 00:20:01", "Value": "0.48" }, { "Datetime": "01/01/2012 00:30:01", "Value": "0.49" }, { "Datetime": "01/01/2012 00:40:01", "Value": "0.50" }, { "Datetime": "01/01/2012 00:50:01", "Value": "0.47" }, { "Datetime": "01/01/2012 01:00:01", "Value": "1.23" }, { "Datetime": "01/01/2012 01:10:01", "Value": "2.09" }, { "Datetime": "01/01/2012 01:20:01", "Value": "2.08" }, { "Datetime": "01/01/2012 01:30:01", "Value": "2.64" }, { "Datetime": "01/01/2012 01:40:01", "Value": "2.91" }, { "Datetime": "01/01/2012 01:50:01", "Value": "0.49" }, { "Datetime": "01/01/2012 02:00:01", "Value": "0.50" }, { "Datetime": "01/01/2012 02:10:01", "Value": "0.49" }, { "Datetime": "01/01/2012 02:20:01", "Value": "0.53" }, { "Datetime": "01/01/2012 02:30:01", "Value": "0.51" } ]
Cheers,
-Phil
Hi Phil,
did you solve this? I am getting the exact same problem, however my chart is from bar type, so I changed x: for label: (I don’t know if this is necesary, but at least so is data pushed in the examples)
Cheers, Agustín
Hi,
Looks like you are calling chart.render() even before the data is pushed into dataPoints – ajax requests take time to return before which the onload event handler is called.
Instead you can do something like
function(thedata) { $.each(thedata, function(i, v) { dataPoints.push({ x: new Date(v.Datetime), y: parseFloat(v.Value) }); }); chart.render(); }
— Sunil Urs
You must be logged in to reply to this topic. Login/Register