Home › Forums › Chart Support › Y data points do not graph

Y data points do not graph

Viewing 6 posts - 1 through 6 (of 6 total)
  • May 19, 2013 at 8:02 pm #4544

    jamesf

    Hello,

    I have some code which grabs historical temperature data and then graphs it using CanvasJS. The problem
    is the graphing part does not work. The bug comes down to one line of code:
    dataPoints.push({ x: i, y: parsed_json.history.observations[i].tempi});

    I am posting all of the code here:

    —————– BEGIN CODE ————————–

    window.onload = function () {

    $.ajax({
    url : “http://api.wunderground.com/api/ac7e64a2f6e2d449/history_20130515/q/Ct/Higganum.json”,
    dataType : “jsonp”,
    success : function(parsed_json){

    var y = 0;
    var data = [];
    var dataSeries = {
    type: “line” }
    ;
    var dataPoints = [];
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    zoomEnabled: true,
    title:{
    text: “Zoom And Observe AxisX Labels”,
    }
    ,
    axisX :{
    labelAngle: 0,
    }
    ,
    axisY :{
    includeZero: true,
    }
    ,

    legend: {
    horizontalAlign: “right”,
    verticalAlign: “center”,
    }
    ,
    data: data, // random generator below

    }
    );

    var data_len = parsed_json.history.observations.length;
    for (var i=0; i<3; i++)
    {
    dataPoints.push({
    x: i, y: parsed_json.history.observations[i].tempi}
    );
    // dataPoints.push({ x: i, y: 8}); // This works fine
    console.log(parsed_json.history.observations[i].tempi);
    alert("hi");
    }
    console.log(dataPoints);
    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);
    chart.render();

    }

    }
    );

    }

    —————– END CODE —————————–

    Notice the console.log values do print. Notice the Y value of 8 does print if you uncomment it.

    Jim

    May 19, 2013 at 9:02 pm #4545

    Sunil Urs

    james,

    I just looked into your json data and it seems like the json API is returning all numeric values as string. Just make sure you convert string values to number before assigning them to “y”

    This should work

    `dataPoints.push({ x: i, y: Number(parsed_json.history.observations[i].tempi)});`

    http://www.w3schools.com/jsref/jsref_number.asp

    May 19, 2013 at 9:39 pm #4546

    jamesf

    Sunil this worked. For anyone else the Number conversion was critical. The code above is:
    dataPoints.push({ x: i, y: Number(parsed_json.history.observations[i].tempi}));

    But the parans are wrong (typo there). So fixing the typo you get:

    dataPoints.push({ x: i, y: Number(parsed_json.history.observations[i].tempi)});

    This works fine!

    Thanks,
    Jim

    May 19, 2013 at 10:11 pm #4547

    Sunil Urs

    Thanks, have edited the same.

    June 17, 2014 at 1:19 pm #6372

    hasanmnaqvi

    Hi I used the method as mentioned and tried replicating the same in my html, but i get a weird error at the $ajax declaration "Uncaught ReferenceError: $ is not defined "

    The code is here

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type=”text/javascript”>
    window.onload = function () {

    $.ajax({
    url : “http://api.wunderground.com/api/ac7e64a2f6e2d449/history_20130515/q/Ct/Higganum.json&#8221;,
    dataType : “jsonp”,
    success : function (parsed_json) {

    var y = 0;
    var data = [];
    var dataSeries = {
    type : “line”
    };
    var dataPoints = [];
    var chart = new CanvasJS.Chart(“chartContainer”, {
    zoomEnabled : true,
    title : {
    text : “Zoom And Observe AxisX Labels”,
    },
    axisX : {
    labelAngle : 0,
    },
    axisY : {
    includeZero : true,
    },

    legend : {
    horizontalAlign : “right”,
    verticalAlign : “center”,
    },
    data : data, // random generator below

    });

    var data_len = parsed_json.history.observations.length;
    for (var i = 0; i < 3; i++) {
    dataPoints.push({
    x : i,
    y : parsed_json.history.observations[i].tempi
    });
    // dataPoints.push({ x: i, y: 8}); // This works fine
    console.log(parsed_json.history.observations[i].tempi);
    alert(“hi”);
    }
    console.log(dataPoints);
    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);
    chart.render();

    }

    });

    }
    </script>

    <script type=”text/javascript” src=”D:\Hasan\Node.js\Canvas\canvasjs-1.4.1/canvasjs.min.js”></script>
    </head>
    <body>

    <div id=”chartContainer4″ style=”height: 300px; width: 100%;”></div>

    Hasan
    </body>
    </html>

    • This reply was modified 10 years, 5 months ago by hasanmnaqvi. Reason: spelling mistake
    June 17, 2014 at 2:32 pm #6374

    hasanmnaqvi

    I found the fix .. actually its a miss.
    I missed the <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    Anyways thanks ….

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

You must be logged in to reply to this topic.