OHLC Chart with Custom Breaks when there is discontinuity in data for morethan 2 days - CanvasJS JavaScript Charts

OHLC Chart with Custom Breaks when there is discontinuity in data for morethan 2 days - 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 dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
		animationEnabled: true,
		exportEnabled: true,
		title: {
				text: "Intel Stock Price - January 2017"
		},
		axisX: {
				valueFormatString: "DD MMM",
		},
		axisY: {
				title: "Price",
				includeZero: false,
				prefix: "$"
		},
		data: [{
				type: "ohlc",
				name: "Intel Stock Price",
				color: "#DD7E86",
				showInLegend: true,
				yValueFormatString: "$##0.00",
				xValueType: "dateTime",
				dataPoints: dps
		}]
});

$.getJSON("https://api.myjson.com/bins/1aorjp", parseData);

function parseData(result) {
		for (var i = 0; i < result.length; i++) {
				dps.push({
						x: result[i].x,
						y: result[i].y
				});
		}
		addbreaks();
		chart.render();
}

function addbreaks() {
		var diffBetweenDps, startValue, endValue, noOfDays;
		var customBreaks = [];
		noOfDays = 2;
		for (var i = 1; i < chart.options.data[0].dataPoints.length; i++) {
				diffBetweenDps = new Date(chart.options.data[0].dataPoints[i - 1].x).getDate() - new Date(chart.options.data[0].dataPoints[i].x).getDate();
				if (diffBetweenDps > noOfDays) {   
						startValue = chart.options.data[0].dataPoints[i - 1].x - (12 * 60 * 60 * 1000);
						endValue = chart.options.data[0].dataPoints[i].x + (12 * 60 * 60 * 1000);
						customBreaks.push({
								startValue: startValue,
								endValue: endValue
						})
				}
		}
		if (!chart.options.axisX)
		chart.options.axisX = {};
		if (!chart.options.axisX.scaleBreaks)
		chart.options.axisX.scaleBreaks = { type: "straight", lineThickness: 0, spacing: 0};

		chart.options.axisX.scaleBreaks.customBreaks = customBreaks;
}