FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › The line chart not appear when open the page

The line chart not appear when open the page

Viewing 3 posts - 1 through 3 (of 3 total)
  • April 15, 2016 at 8:52 am #10146

    albenshao

    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

    April 15, 2016 at 10:55 am #10147

    Vishwas R

    Alben Shao,

    Kindly close the getJSON after rendering chart. Here is the working code.

    April 15, 2016 at 12:28 pm #10148

    albenshao

    Yes. It works. Thanks very much for your help!
    BR/Alben

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

You must be logged in to reply to this topic.