Home forums Using CanvasJS interesting issue using jquery getJSON

Tagged: ,

This topic contains 2 replies, has 3 voices, and was last updated by  Sunil Urs 1 year, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #8043

    Phildo
    Participant

    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

    #8246

    jibion
    Participant

    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

    #8247

    Sunil Urs
    Keymaster

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.