1

I'm trying to receive a JSON string and feed it into a canvasJS graph. I'm having a hard time trying to figure out how to convert my string to work properly. Here's what I'm trying, which isn't working:

function loadGraph(serialNum){

    $.post("../Modules/LoadGraph_Mod/load_graph_mod.php",
    {
      submit: 'loadGraph',

      serial:serialNum


    },
    function(data,status){ 

newDataPoints=data;

                });

            var chart = new CanvasJS.Chart("chartContainer",
                {
                interactivityEnabled: true,
                zoomEnabled: true,
                          panEnabled: true,
                          backgroundColor:"#000", 


                          axisX: {  lineThickness: 1,
                lineColor: "#333",
                 interval: 4

                 ,
                 intervalType: "minutes",                   
                 valueFormatString: "h:mm",
                 labelFontColor: "#777"
                           },


                          axisY: {  tickColor:"#333",
                          gridColor: "#222",
                          lineThickness: 1,
                lineColor: "#333",
                valueFormatString: ""   ,
                maximum: 100          },
                          data: [{
                              dataPoints : newDataPoints,
                  markerType: "none",
                              color: "#9c9a0c",
                               type: "area",
                              xValueType: "dateTime"

                          }]
                      });

             chart.render();

}

I've tried testing it but inserting my server response directly:

newDataPoints='[{"x":1483648595798,"y":62},{"x":1483648598843,"y":63},{"x":1483648601969,"y":64},{"x":1483648605088,"y":65},{"x":1483648779011,"y":0},{"x":1483648847224,"y":16}]';

Which gives me the error: undefined is not an object. I've tried running JSON.parse and end up with a error that says unrecognized token '<'.

It works when I paste the string directly into the chart like this:

data: [{
                          dataPoints : [{"x":1483648595798,"y":62},{"x":1483648598843,"y":63},{"x":1483648601969,"y":64},{"x":1483648605088,"y":65},{"x":1483648779011,"y":0},{"x":1483648847224,"y":16},{"x":1483648860414,"y":17},{"x":1483648862560,"y":18},{"x":1483648865650,"y":19},{"x":1483648868773,"y":20}],
              markerType: "none",
                          color: "#9c9a0c",
                           type: "area",
                          xValueType: "dateTime"

                      }]

So I'm trying to figure out how to convert the JSON string I get back from my servers that it works properly in my chart. I'd appreciate any help. Thanks.

Sadie
  • 121
  • 1
  • 7
  • I would suspect when you are getting data back from the server and trying to `JSON.parse` it you are actually not getting back JSON but a web page. – powerc9000 Mar 31 '17 at 17:59
  • 1
    `$.post` is asynchronous. Move the chart stuff inside the `function(data,status){` function. – Heretic Monkey Mar 31 '17 at 18:02
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Heretic Monkey Mar 31 '17 at 18:02

1 Answers1

1

If you are trying to make a simple request from the server and return a JSON object, I would do the following

var http = require('http');
http.get(yourUrl, (res) => {
    const statusCode = res.statusCode;

    let error;
    if (statusCode !== 200) {
        error = new Error('Request Failed' + statusCode);
    }

    if (error) {
        console.log(error.message);
    }

    let body = '';
    res.on('data', (chunk) => {
        //individual pre-processing here
        body += chunk;
    }).on('end', () => {
        let parsedBody = JSON.parse(body);
        //Whatever you want to do with the object
    }).on('error', (err) => {
        console.log(err);
    });
});
forJ
  • 4,309
  • 6
  • 34
  • 60