Home forums Using CanvasJS Y data points do not graph

This topic contains 5 replies, has 3 voices, and was last updated by  hasanmnaqvi 2 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #4544

    jamesf
    Participant

    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

    #4545

    Sunil Urs
    Keymaster

    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

    #4546

    jamesf
    Participant

    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

    #4547

    Sunil Urs
    Keymaster

    Thanks, have edited the same.

    #6372

    hasanmnaqvi
    Participant

    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”,
    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 2 years, 5 months ago by  hasanmnaqvi. Reason: spelling mistake
    #6374

    hasanmnaqvi
    Participant

    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.