Null Data for an Interval - CanvasJS JavaScript Charts

Null Data for an 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 limit = 200;    //increase number of dataPoints by increasing this
var y = 100;
var data = []; var dataSeries = { type: "line" };
var dataPoints = [];

var lastNumber = 0, prevI = 0;
var intervalRangeForNull = 10; //increase null data interval by increasing this

for (var i = 0; i <= limit; i+= lastNumber) {		
    y += Math.round(Math.random() * 10 - 5);//Random Y Value
    
    //If the there are no dataPoints in the x-value range morethan 10, populate it with null values
    if( i - prevI >= intervalRangeForNull){
        dataPoints.push({
          x: i,
          y: null
        });
    }
    else{
        dataPoints.push({
          x: i,
          y: y                
        });
    }
    prevI = i;
    
    if(Math.round(Math.random()*2) != lastNumber) //To avoid repetitive random number
    		lastNumber = Math.floor(Math.random() * 10) + 1;
		else
    		lastNumber++;
}
dataSeries.dataPoints = dataPoints;

//Uncomment the below line to connect null data with dashed lines
//dataSeries.connectNullData = true; 

data.push(dataSeries);


var chart = new CanvasJS.Chart("chartContainer",
	{
		zoomEnabled: true,
		panEnabled: true, 
		title:{
			text: "Null Data for an Interval" 
		},
		axisY:{
			includeZero: false
		},
		data: data,  // random generator below
    });
	chart.render();