I have a Json like below:
{"systimesec":[{"dateTime":"2016-06-29 01:28:58","value":"58.0"},{"dateTime":"2016-06-29 01:29:00","value":"0.0"},{"dateTime":"2016-06-29 01:29:02","value":"2.0"},{"dateTime":"2016-06-29 01:29:04","value":"4.0"},{"dateTime":"2016-06-29 01:29:06","value":"6.0"},{"dateTime":"2016-06-29 01:29:08","value":"8.0"},{"dateTime":"2016-06-29 01:29:10","value":"10.0"},{"dateTime":"2016-06-29 01:29:12","value":"12.0"},{"dateTime":"2016-06-29 01:29:14","value":"14.0"},{"dateTime":"2016-06-29 01:29:16","value":"16.0"},{"dateTime":"2016-06-29 01:29:18","value":"18.0"},{"dateTime":"2016-06-29 01:29:20","value":"20.0"},{"dateTime":"2016-06-29 01:29:22","value":"22.0"},{"dateTime":"2016-06-29 01:29:24","value":"24.0"},{"dateTime":"2016-06-29 01:29:26","value":"26.0"},{"dateTime":"2016-06-29 01:29:28","value":"28.0"},{"dateTime":"2016-06-29 01:29:30","value":"30.0"},{"dateTime":"2016-06-29 01:29:32","value":"32.0"},{"dateTime":"2016-06-29 01:29:34","value":"34.0"},{"dateTime":"2016-06-29 01:29:36","value":"36.0"},{"dateTime":"2016-06-29 01:29:38","value":"38.0"},{"dateTime":"2016-06-29 01:29:40","value":"40.0"},{"dateTime":"2016-06-29 01:29:42","value":"42.0"},{"dateTime":"2016-06-29 01:29:44","value":"44.0"},{"dateTime":"2016-06-29 01:29:46","value":"46.0"},{"dateTime":"2016-06-29 01:29:48","value":"48.0"},{"dateTime":"2016-06-29 01:29:50","value":"50.0"},{"dateTime":"2016-06-29 01:29:52","value":"52.0"},{"dateTime":"2016-06-29 01:29:54","value":"54.0"},{"dateTime":"2016-06-29 01:29:56","value":"56.0"},{"dateTime":"2016-06-29 01:29:58","value":"58.0"}],"sysperfcputotal":[{"dateTime":"2016-06-29 01:28:59","value":"20.0"},{"dateTime":"2016-06-29 01:29:01","value":"12.0"},{"dateTime":"2016-06-29 01:29:03","value":"7.0"},{"dateTime":"2016-06-29 01:29:05","value":"9.0"},{"dateTime":"2016-06-29 01:29:07","value":"12.0"},{"dateTime":"2016-06-29 01:29:09","value":"15.0"},{"dateTime":"2016-06-29 01:29:11","value":"18.0"},{"dateTime":"2016-06-29 01:29:13","value":"9.0"},{"dateTime":"2016-06-29 01:29:15","value":"5.0"},{"dateTime":"2016-06-29 01:29:17","value":"12.0"},{"dateTime":"2016-06-29 01:29:19","value":"34.0"},{"dateTime":"2016-06-29 01:29:21","value":"22.0"},{"dateTime":"2016-06-29 01:29:23","value":"15.0"},{"dateTime":"2016-06-29 01:29:25","value":"15.0"},{"dateTime":"2016-06-29 01:29:27","value":"8.0"},{"dateTime":"2016-06-29 01:29:29","value":"15.0"},{"dateTime":"2016-06-29 01:29:31","value":"6.0"},{"dateTime":"2016-06-29 01:29:33","value":"14.0"},{"dateTime":"2016-06-29 01:29:35","value":"17.0"},{"dateTime":"2016-06-29 01:29:37","value":"8.0"},{"dateTime":"2016-06-29 01:29:39","value":"4.0"},{"dateTime":"2016-06-29 01:29:41","value":"5.0"},{"dateTime":"2016-06-29 01:29:43","value":"3.0"},{"dateTime":"2016-06-29 01:29:45","value":"5.0"},{"dateTime":"2016-06-29 01:29:47","value":"5.0"},{"dateTime":"2016-06-29 01:29:49","value":"2.0"},{"dateTime":"2016-06-29 01:29:51","value":"9.0"},{"dateTime":"2016-06-29 01:29:53","value":"6.0"},{"dateTime":"2016-06-29 01:29:55","value":"28.0"},{"dateTime":"2016-06-29 01:29:57","value":"18.0"},{"dateTime":"2016-06-29 01:29:59","value":"25.0"}],"sysperfdisktime":[{"dateTime":"2016-06-29 01:28:59","value":"100.0"},{"dateTime":"2016-06-29 01:29:01","value":"100.0"},{"dateTime":"2016-06-29 01:29:03","value":"100.0"},{"dateTime":"2016-06-29 01:29:05","value":"100.0"},{"dateTime":"2016-06-29 01:29:07","value":"100.0"},{"dateTime":"2016-06-29 01:29:09","value":"100.0"},{"dateTime":"2016-06-29 01:29:11","value":"100.0"},{"dateTime":"2016-06-29 01:29:13","value":"100.0"},{"dateTime":"2016-06-29 01:29:15","value":"100.0"},{"dateTime":"2016-06-29 01:29:17","value":"100.0"},{"dateTime":"2016-06-29 01:29:19","value":"100.0"},{"dateTime":"2016-06-29 01:29:21","value":"100.0"},{"dateTime":"2016-06-29 01:29:23","value":"100.0"},{"dateTime":"2016-06-29 01:29:25","value":"100.0"},{"dateTime":"2016-06-29 01:29:27","value":"100.0"},{"dateTime":"2016-06-29 01:29:29","value":"100.0"},{"dateTime":"2016-06-29 01:29:31","value":"100.0"},{"dateTime":"2016-06-29 01:29:33","value":"100.0"},{"dateTime":"2016-06-29 01:29:35","value":"100.0"},{"dateTime":"2016-06-29 01:29:37","value":"100.0"},{"dateTime":"2016-06-29 01:29:39","value":"100.0"},{"dateTime":"2016-06-29 01:29:41","value":"100.0"},{"dateTime":"2016-06-29 01:29:43","value":"100.0"},{"dateTime":"2016-06-29 01:29:45","value":"100.0"},{"dateTime":"2016-06-29 01:29:47","value":"100.0"},{"dateTime":"2016-06-29 01:29:49","value":"100.0"},{"dateTime":"2016-06-29 01:29:51","value":"100.0"},{"dateTime":"2016-06-29 01:29:53","value":"100.0"},{"dateTime":"2016-06-29 01:29:55","value":"100.0"},{"dateTime":"2016-06-29 01:29:57","value":"100.0"},{"dateTime":"2016-06-29 01:29:59","value":"100.0"}]}
And in the front end i am using like this:
<script type="text/javascript">
var decodeEntities = (function() {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
function decodeHTMLEntities (str) {
if(str && typeof str === 'string') {
// strip script/html tags
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeHTMLEntities;
})();
var points_data = JSON.parse(decodeEntities("<%= (data) %>"));
var points = [];
for(var i in points_data){
var p = {"type":"line","showInLegend":"true"};
p.name = i;
//alert(p.name);
p.dataPoints = [];
for(var j=0; j<points_data[i].length; j++)
{
alert(new Date(points_data[i][j].dateTime));
//alert(points_data[i][j].value);
p.dataPoints.push({x: new Date(points_data[i][j].dateTime), y: parseFloat(points_data[i][j].value)});
}
points.push(p);
}
//alert(points);
window.onload = function () {
var chart1 = new CanvasJS.Chart("chartContainer1",
{
title:{
text: ""
},
axisX:{
title: "",
gridThickness: 2,
interval:5,
intervalType: "minute",
valueFormatString: "HH:mm:ss",
labelAngle: -20
},
axisY:{
title: ""
},
data: points
});
chart1.render();
}
</script>
<body>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
</body>
Its show the tag name in the chart but line of three tags are not drawn. Earlier its was working for me. Can anyone tell me what is the problem in this.
If your decodeEntities (after processing embedded data) results the JSON you mentioned here the code should work fine. Here is the working snipped
var points_data = {
"systimesec": [{
"dateTime": "2016-06-29 01:28:58",
"value": "58.0"
}, {
"dateTime": "2016-06-29 01:29:00",
"value": "0.0"
}, {
"dateTime": "2016-06-29 01:29:02",
"value": "2.0"
}, {
"dateTime": "2016-06-29 01:29:04",
"value": "4.0"
}, {
"dateTime": "2016-06-29 01:29:06",
"value": "6.0"
}, {
"dateTime": "2016-06-29 01:29:08",
"value": "8.0"
}, {
"dateTime": "2016-06-29 01:29:10",
"value": "10.0"
}, {
"dateTime": "2016-06-29 01:29:12",
"value": "12.0"
}, {
"dateTime": "2016-06-29 01:29:14",
"value": "14.0"
}, {
"dateTime": "2016-06-29 01:29:16",
"value": "16.0"
}, {
"dateTime": "2016-06-29 01:29:18",
"value": "18.0"
}, {
"dateTime": "2016-06-29 01:29:20",
"value": "20.0"
}, {
"dateTime": "2016-06-29 01:29:22",
"value": "22.0"
}, {
"dateTime": "2016-06-29 01:29:24",
"value": "24.0"
}, {
"dateTime": "2016-06-29 01:29:26",
"value": "26.0"
}, {
"dateTime": "2016-06-29 01:29:28",
"value": "28.0"
}, {
"dateTime": "2016-06-29 01:29:30",
"value": "30.0"
}, {
"dateTime": "2016-06-29 01:29:32",
"value": "32.0"
}, {
"dateTime": "2016-06-29 01:29:34",
"value": "34.0"
}, {
"dateTime": "2016-06-29 01:29:36",
"value": "36.0"
}, {
"dateTime": "2016-06-29 01:29:38",
"value": "38.0"
}, {
"dateTime": "2016-06-29 01:29:40",
"value": "40.0"
}, {
"dateTime": "2016-06-29 01:29:42",
"value": "42.0"
}, {
"dateTime": "2016-06-29 01:29:44",
"value": "44.0"
}, {
"dateTime": "2016-06-29 01:29:46",
"value": "46.0"
}, {
"dateTime": "2016-06-29 01:29:48",
"value": "48.0"
}, {
"dateTime": "2016-06-29 01:29:50",
"value": "50.0"
}, {
"dateTime": "2016-06-29 01:29:52",
"value": "52.0"
}, {
"dateTime": "2016-06-29 01:29:54",
"value": "54.0"
}, {
"dateTime": "2016-06-29 01:29:56",
"value": "56.0"
}, {
"dateTime": "2016-06-29 01:29:58",
"value": "58.0"
}],
"sysperfcputotal": [{
"dateTime": "2016-06-29 01:28:59",
"value": "20.0"
}, {
"dateTime": "2016-06-29 01:29:01",
"value": "12.0"
}, {
"dateTime": "2016-06-29 01:29:03",
"value": "7.0"
}, {
"dateTime": "2016-06-29 01:29:05",
"value": "9.0"
}, {
"dateTime": "2016-06-29 01:29:07",
"value": "12.0"
}, {
"dateTime": "2016-06-29 01:29:09",
"value": "15.0"
}, {
"dateTime": "2016-06-29 01:29:11",
"value": "18.0"
}, {
"dateTime": "2016-06-29 01:29:13",
"value": "9.0"
}, {
"dateTime": "2016-06-29 01:29:15",
"value": "5.0"
}, {
"dateTime": "2016-06-29 01:29:17",
"value": "12.0"
}, {
"dateTime": "2016-06-29 01:29:19",
"value": "34.0"
}, {
"dateTime": "2016-06-29 01:29:21",
"value": "22.0"
}, {
"dateTime": "2016-06-29 01:29:23",
"value": "15.0"
}, {
"dateTime": "2016-06-29 01:29:25",
"value": "15.0"
}, {
"dateTime": "2016-06-29 01:29:27",
"value": "8.0"
}, {
"dateTime": "2016-06-29 01:29:29",
"value": "15.0"
}, {
"dateTime": "2016-06-29 01:29:31",
"value": "6.0"
}, {
"dateTime": "2016-06-29 01:29:33",
"value": "14.0"
}, {
"dateTime": "2016-06-29 01:29:35",
"value": "17.0"
}, {
"dateTime": "2016-06-29 01:29:37",
"value": "8.0"
}, {
"dateTime": "2016-06-29 01:29:39",
"value": "4.0"
}, {
"dateTime": "2016-06-29 01:29:41",
"value": "5.0"
}, {
"dateTime": "2016-06-29 01:29:43",
"value": "3.0"
}, {
"dateTime": "2016-06-29 01:29:45",
"value": "5.0"
}, {
"dateTime": "2016-06-29 01:29:47",
"value": "5.0"
}, {
"dateTime": "2016-06-29 01:29:49",
"value": "2.0"
}, {
"dateTime": "2016-06-29 01:29:51",
"value": "9.0"
}, {
"dateTime": "2016-06-29 01:29:53",
"value": "6.0"
}, {
"dateTime": "2016-06-29 01:29:55",
"value": "28.0"
}, {
"dateTime": "2016-06-29 01:29:57",
"value": "18.0"
}, {
"dateTime": "2016-06-29 01:29:59",
"value": "25.0"
}],
"sysperfdisktime": [{
"dateTime": "2016-06-29 01:28:59",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:01",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:03",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:05",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:07",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:09",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:11",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:13",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:15",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:17",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:19",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:21",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:23",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:25",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:27",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:29",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:31",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:33",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:35",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:37",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:39",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:41",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:43",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:45",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:47",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:49",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:51",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:53",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:55",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:57",
"value": "100.0"
}, {
"dateTime": "2016-06-29 01:29:59",
"value": "100.0"
}]
};
var points = [];
for (var i in points_data) {
var p = {
"type": "line",
"showInLegend": "true"
};
p.name = i;
//alert(p.name);
p.dataPoints = [];
for (var j = 0; j < points_data[i].length; j++) {
//alert(new Date(points_data[i][j].dateTime));
//alert(points_data[i][j].value);
p.dataPoints.push({
x: new Date(points_data[i][j].dateTime),
y: parseFloat(points_data[i][j].value)
});
}
points.push(p);
}
//alert(points);
window.onload = function() {
var chart1 = new CanvasJS.Chart("chartContainer1", {
title: {
text: ""
},
axisX: {
title: "",
gridThickness: 2,
interval: 5,
intervalType: "minute",
valueFormatString: "HH:mm:ss",
labelAngle: -20
},
axisY: {
title: ""
},
data: points
});
chart1.render();
}<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>If still you can't figure out the problem. It would be helpful if share the embedded data.