Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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 datapointsPassed=new Array();
datapointsPassed.push({ x: new Date(2012,06,02), y:200 });
datapointsPassed.push({ x: new Date(2012,06,07), y:200 });
datapointsPassed.push({ x: new Date(2012,06,15), y:200 });
datapointsPassed.push({ x: new Date(2012,06,22), y:200 });
datapointsPassed.push({ x: new Date(2012,06,30), y:200 });

var chart = new CanvasJS.Chart("chartContainer",
				    {
				      theme: "theme1",
				      title:{
				        text: "Iphone",
				        fontSize: 30
				      },
				      animationEnabled: true,
				      axisX: {
				        valueFormatString: "MM/DD",
				        gridColor: "Silver",
						tickColor: "silver",
				      },
				      axisY:{
				    	  gridColor: "Silver",
							tickColor: "silver",
				        includeZero: true
				        
				      },
				      legend:{
							verticalAlign: "center",
							horizontalAlign: "right"
						},
				      toolTip:{
				          shared:true
				        },
				      data: [
				      {        
				        type: "line",
				        showInLegend: true,
						lineThickness: 3,
						name: "Passed",
						markerType: "square",
						color: "green",        
				        dataPoints: datapointsPassed
				      }
				      ],legend:{
				          cursor:"pointer",
				          itemclick:function(e){
				            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
				            	e.dataSeries.visible = false;
				            }
				            else{
				              e.dataSeries.visible = true;
				            }
				            chart.render();
				          }
				        }
				    });

				chart.render();