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.