interesting issue using jquery getJSON

[Phildo]

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

[jibion]

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

[Sunil Urs]

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