Adding null datapoint when datapoint is missing at regular interval - CanvasJS JavaScript Charts

Adding null datapoint when datapoint is missing at regular interval - CanvasJS JavaScript Charts

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 dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Line Chart with Null Data"
  },
  axisX: {
    valueFormatString: "HH:mm",
  },
  axisY:{
    includeZero: false
  },
  data: [{
    type: "line",
    xValueType:"dateTime",
    xValueFormatString: "HH:mm",
    dataPoints: dataPoints
  }]
});
$.getJSON("https://api.myjson.com/bins/15smp6", function(data) {
  for(var i = 0; i < data.length; i++){
    dataPoints.push({ x: new Date(data[i].x), y: data[i].y })
  }
  renderChart();
});

function renderChart() {
  var j =0;
  
	var minutes = 15*60*1000;
  for(var i = dataPoints[0].x.getTime(); i < dataPoints[dataPoints.length-1].x.getTime(); i+=minutes) {
    while(j < dataPoints.length) {
      if(dataPoints[j].x.getTime() === i) {
        j++;
        break;
      }
      else {
        dataPoints.splice( j, 0, { x: new Date(i), y: null }); 
      }
    }
  }
  chart.render();
}