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)
  • #4544

    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

    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

    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

    Thanks, have edited the same.

    #6372

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

    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.