CanvasJs dynamic chart showing blank data?

Question

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.

Answer 1

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.