Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by lokey1410

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 chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Using valueFormatString in Crosshair"
	},
	axisX:{
		crosshair: {   
			enabled: true,
			valueFormatString: "####"
		},
	valueFormatString: "####"
	},
	data: [{
		type: "splineArea",
		dataPoints: [
			{ x: 1910, y: 5 }, 
			{ x: 1920, y: 9 }, 
			{ x: 1930, y: 17 }, 
			{ x: 1940, y: 32 }, 
			{ x: 1950, y: 22 }, 
			{ x: 1960, y: 14 }, 
			{ x: 1970, y: 25 }, 
			{ x: 1980, y: 18 }, 
			{ x: 1990, y: 20 }
		]
    		
 $dataPoints = array(
	array("x" => 5, "y" =>  97.2),
	array("x" => 5.5, "y" => 99.8),
	array("x" => 6, "y" =>102.3),
	array("x" => 6.5, "y" => 104.9),
	array("x" => 7, "y" => 107.4),
	array("x" => 7.5, "y" => 110.0),
	array("x" => 8, "y" => 112.6),
	array("x" => 8.5,"y" => 115.2),
	array("x" => 9, "y" => 117.8),
	array("x" => 9.5, "y" => 120.5),
	array("x" => 10, "y" => 123.3),
	array("x" => 10.5, "y" => 126.1),
	array("x" => 11, "y" => 128.8),
	array("x" => 11.5, "y" => 131.5),
	array("x" => 12, "y" => 134.0),
	array("x" => 12.5, "y" => 136.3),
	
	array("x" => 13, "y" => 138.2),
	array("x" => 13.5, "y" =>139.9),
	array("x" => 14, "y" => 141.3),
	array("x" => 14.5, "y" => 142.4),
	array("x" => 15, "y" =>  143.3),
	
	array("x" => 15.5, "y" => 144.1),
	array("x" => 16, "y" => 144.7),
	array("x" => 16.5, "y" => 145.2),
	array("x" => 17, "y" => 145.7),

	array("x" => 17.5, "y" => 146.2),
	array("x" => 18, "y" => 146.6)
	
 );
 

 
  $dataPoints1 = array(
	array("x" => 5, "y" => 100.5),
	array("x" => 5.5, "y" => 103.2),
	array("x" => 6, "y" =>106.0),
	array("x" => 6.5, "y" => 108.7),
	array("x" => 7, "y" => 111.4),
	array("x" => 7.5, "y" => 114.1),
	array("x" => 8, "y" => 116.8),
	array("x" => 8.5,"y" => 119.6),
	array("x" => 9, "y" => 122.4),
	array("x" => 9.5, "y" => 125.2),
	array("x" => 10, "y" =>128.1),
	array("x" => 10.5, "y" => 130.9),
	array("x" => 11, "y" => 133.7),
	array("x" => 11.5, "y" => 136.4),
	array("x" => 12, "y" => 138.9),
	array("x" => 12.5, "y" =>...