HTML5 Step Area Chart built using CanvasJS

HTML5 Step Area Chart built using CanvasJS

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>
<p class="description">An HTML5 Step Area Chart built using CanvasJS.<br/>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

JavaScript

var chart =  new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
  	zoomEnabled: true,
  	zoomType: 'xy',
	exportEnabled: true,
	title:{
		text: "Step Function"
	},
	axisY:{ 
		title: "On/Off",
		includeZero: false, 
		valueFormatString: "#.0"
	},
	data: [{
		type: "stepLine",
		yValueFormatString: "#0.0\"%\"",
		xValueFormatString: "MMM YYYY",
		markerSize: 5,
		dataPoints: [
			{ x: new Date(2016, 0), y: 1.0 },
			{ x: new Date(2016, 1), y: 2.0 },
			{ x: new Date(2016, 2), y: 2.0 },
			{ x: new Date(2016, 3), y: 2.0 },
			{ x: new Date(2016, 4), y: 2.0 },
			{ x: new Date(2016, 5), y: 1.0 },
			{ x: new Date(2016, 6), y: 1.0 },
			{ x: new Date(2016, 7), y: 1.0 },
			{ x: new Date(2016, 8), y: 2.0 },
			{ x: new Date(2016, 9), y: 2.0 },
			{ x: new Date(2016, 10), y: 2.0 },
			{ x: new Date(2016, 11), y: 2.0 },
			{ x: new Date(2017, 0), y: 2.0 },
			{ x: new Date(2017, 1), y: 2.0 },
			{ x: new Date(2017, 2), y: 1.0 },
			{ x: new Date(2017, 3), y: 1.0 },
			{ x: new Date(2017, 4), y: 2.0 },
			{ x: new Date(2017, 5), y: 2.0 }
		]
	}]
});

chart.render();