Home forums Using CanvasJS Chart Not Displaying

This topic contains 2 replies, has 2 voices, and was last updated by  ahsan 3 weeks, 1 day ago.

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

    ahsan
    Member

    Hi
    i am creating a chart dynamically using ajax
    my ajax result is following

    [[{“label”:”Current”,”y”:430},{“label”:”31-60″,”y”:430},{“label”:”61-90″,”y”:430},{“label”:”91-120″,”y”:430},{“label”:”120+”,”y”:430}],[{“label”:”Current”,”y”:690},{“label”:”31-60″,”y”:690},{“label”:”61-90″,”y”:690},{“label”:”91-120″,”y”:690},{“label”:”120+”,”y”:690}]]

    and i am retrieving this record

    var dataPoints_1=[],dataPoints_2=[];

    $(document).ready(function () {

    $.getJSON(“myfile.php”, function (result) {

    $.each(result[0], function (index, Info) {
    dataPoints_1.push({
    x: Info.x,
    y: Info.y,
    label: Info.label
    });
    });
    $.each(result[1], function (index, Info) {
    dataPoints_2.push({
    x: Info.x,
    y: Info.y,
    label: Info.label
    });
    });
    });
    });

    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    theme: “theme3”,
    animationEnabled: true,
    title:{
    text: “Chart Example”,
    fontSize: 30
    },
    data: [
    {
    type: “column”,
    name: “Chartbar1”,
    legendText: “Chartbar1”,
    showInLegend: true,
    dataPoints : dataPoints_1
    },
    {
    type: “column”,
    name: “Chartbar2”,
    legendText: “Chartbar2″,
    showInLegend: true,
    dataPoints : dataPoints_2
    }

    ],
    legend:{
    cursor:”pointer”,
    itemclick: function(e){
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else {
    e.dataSeries.visible = true;
    }
    chart.render();
    }
    },
    });

    chart.render();

    }

    But chart is not showing up until i press F12 (turn on debugging OR i Press F5)
    Waiting for reply
    Thanks
    Malik

    #17201

    Suyash Singh
    Moderator

    Malik,

    Seems like the chart initially renders without any dataPoints. Charts automatically re-render on resizing the browser( opening the Dev tools ). Can you please try rendering the chart in the Ajax call.


    Suyash Singh
    Team CanvasJS

    #17206

    ahsan
    Member

    Suyash,

    Thanks for your reply i did same as you said and it works fine.

    Thanks
    Malik

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

You must be logged in to reply to this topic.