Charts examples in CanvasJs

by thiago_sandes

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title:{
			text: "Attaching Click event on dataSeries"
		},
		data: [
		{
			type: "column",
			click: onClick,
			dataPoints: [
				{ x: 10, y: 71},
				{ x: 20, y: 55},
				{ x: 30, y: 50 },
				{ x: 40, y: 65 },
				{ x: 50, y: 95 },
				{ x: 60, y: 68 },
				{ x: 70, y: 28 },
				{ x: 80, y: 34 },
				{ x: 90, y: 14}
			]
		},
		{
			type: "scatter",
			click: onClick,
			dataPoints: [
				{ x: 10, y: 34},
				{ x: 20, y: 45},
				{ x: 30, y: 19 },
				{ x: 40, y: 75 },
				{ x: 50, y: 15 },
				{ x: 60, y: 60 },
				{ x: 70, y: 48 },
				{ x: 80, y: 04 },
				{ x: 90, y: 35}
			]
		}
		]
	});
	chart.render();

	function onClick(e) {
		alert(  e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
	}
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>


</body>
</html>

JavaScript

chart = new CanvasJS.Chart("chartContainer2",{
	title:{ 
		text: "Drill down stacked column chart"
	},
    toolTip: {
        enabled: false
    },
	axisX: {
		title: "click on stacked columns to see drill down, Click again to go back"
	},	
});
	
var	data = [
{
	type: "pie",
    click: onClick,
	dataPoints:[
		{label: "Jan", y: 55.58  },		
		{label: "Feb", y: 20.09  }
	]
}
]

chart.options.data = data;
chart.render();	

var data_Jan = [{
	type: "pie",
	click: onPieClick,
	dataPoints:[
		{label: "Jan 2012", y: 6.21},
		{label: "Jan 2013", y: 1.93}		
	]
}];

var data_Feb = [{
	type: "pie",
    click: onPieClick,
	dataPoints:[
		{label: "Feb 2012", y: 0.42},
		{label: "Feb 2013", y: 0.41},
		{label: "Feb 2014", y: 0.60}
	]
}];


function onClick(e) {
    if( e.dataPoint.label === "Jan" ){
        chart.options.data = data_Jan;
        chart.render();
       
    }
    else {
        chart.options.data = data_Feb;
        chart.render();
    }
}


function onPieClick() {    
    chart.options.data = data;
    chart.render();
}