JavaScript Multi Series Step Line Charts

Download JavaScript Chart Samples

Multi Series Step Line Chart is useful when comparing multiple trends for events which are not continuous in nature. Multi-series Step Line Graph allows plotting multiple datasets while also making it easier for comparison. Given example shows Multi Series Step Line Chart along with source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart= new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Multi-Series StepLine Chart with Null Data"
	},
	axisX: {
		valueFormatString: "DD MMM"
	},
	axisY2: {
		minimum:25
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "stepLine",
		connectNullData: true,
		xValueFormatString: "MMM",
		dataPoints: [
			{ x: new Date(2008,02), y: 15.00 },
			{ x: new Date(2008,03), y: 14.50 },
			{ x: new Date(2008,04), y: 14.00 },
			{ x: new Date(2008,05), y: 14.50 },
			{ x: new Date(2008,06), y: 14.75 },
			{ x: new Date(2008,07), y: null },
			{ x: new Date(2008,08), y: 15.80 },
			{ x: new Date(2008,09), y: 17.50 }
		]
	},
	{
		type: "stepLine",  
		axisYType: "secondary",
		connectNullData: true,
		xValueFormatString: "MMM",
		dataPoints: [
			{ x: new Date(2008,02), y: 41.00 },
			{ x: new Date(2008,03), y: 43.50 },
			{ x: new Date(2008,04), y: 41.00 },
			{ x: new Date(2008,05), y: null },
			{ x: new Date(2008,06), y: 47.55 },
			{ x: new Date(2008,07), y: 45.00 },
			{ x: new Date(2008,08), y: 40.70 },
			{ x: new Date(2008,09), y: 37.00 }
		]
	}]
});
chart.render();

}

Chart Customizations

You can use connectNullData property to draw a line when null Data Points are encountered instead of showing discontinuity. You can also modify dash type of the connecting line by using nullDataLineDashType property. Some other common customizations include showInLegend, shared (toolTip), etc.