Handling custom inuput format - CanvasJS

Handling custom inuput format - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var datas = [
   {
     "report_date": "2016-02-02",
      "submited":1,
      "approved":1,
      "declined":0
   },
   {
       "report_date":"2016-02-03",
       "submited":2,
       "approved":0,
       "declined":1
  },
  {
       "report_date":"2016-02-17",
       "submited":1,
       "approved":0,
       "declined":0
   },
   {
       "report_date":"2016-02-18",
       "submited":2,
       "approved":1,
       "declined":0
   },
   {
       "report_date":"2016-02-19",
       "submited":4,
       "approved":3,
       "declined":1
   }
];

var result = [];
//$.getJSON("jsonData.json", function (datas){
  success(datas);
  var columnchart = new CanvasJS.Chart("chartContainer", {
              title:{
                    text: "Overall report statistic"
              },
              axisX:{
                   gridColor: "Silver",
                   tickColor:"silver",
                   valueFormatString: "DD/MMM"
              },
               data: result
           });

  columnchart.render();



//---------- Function for formatting datas splitting into dataseries --------------

  function success(datas){
          var i,j, key,
              keys = [],
              dataSeriesMapping = {};

         for(i = 0; i< datas.length; i++){
            if(datas[i].report_date){

              keys = Object.keys(datas[i]);
              for(j = 0; j< keys.length; j++){
                  if(keys[j] === "report_date")
                      continue;
                  key = keys[j];

                  if(typeof(dataSeriesMapping[key]) === "undefined")
                    {
                      result.push({
                        name : key,
                        type: "line",
                        dataPoints : []
                      });
                      dataSeriesMapping[key] = result.length-1;

                    }
                  result[dataSeriesMapping[key]].dataPoints.push({	x :new Date(datas[i].report_date), y: datas[i][key]});

             ...