Doughnut chart with drill down - CanvasJS

Doughnut chart with drill down - CanvasJS

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

chart = new CanvasJS.Chart("chartContainer",{
	title:{ 
		text: "Drill down stacked Doughnut chart"
	},
    toolTip: {
        enabled: false
    },
});
	
var	data = [
{
	type: "doughnut",
    click: onClick,
	dataPoints:[
		{label: "Jan", y: 55.58, color:"blue"  },		
		{label: "Feb", y: 20.09 , color:"red" }
	]
}
]

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

var data_Jan = [{
	type: "doughnut",
	click: onDoughnutClick,
	dataPoints:[
		{label: "Jan 2012", y: 6.21, color:"#000066" },
		{label: "Jan 2013", y: 1.93, color:"#0000ff" }		
	]
}];

var data_Feb = [{
	type: "doughnut",
    click: onDoughnutClick,
	dataPoints:[
		
		{label: "Feb 2012", y: 0.42, color:"#550000" },
		{label: "Feb 2013", y: 0.41, color:"#aa0000" },
		{label: "Feb 2014", y: 0.60, color:"#ff0000" }
	]
}];


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


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