This sample illustrates how the drill down functionality of the chart can be used.

You need bind client-side click event to the chart. The javascript code:

var chartClientId = "#<%=C1BarChart1.ClientID%>";
$(document).ready(function () {
	var drawBrands = function (e, data) {
		$(chartClientId).c1barchart("option", "click", drawVersions);
		$(chartClientId).c1barchart("option", "seriesList", seriesList);
	}

	var drawVersions = function (e, data) {
		var key = data.x, series = drillDwonData[key];
		$(chartClientId).c1barchart("option", "click", drawBrands);
		$(chartClientId).c1barchart("option", "seriesList", [series]);
	}

	$(chartClientId).c1barchart("option", "click", drawVersions);
});

Test the features

• Click on any column to see more details about the selected product.
• In detailed view click on any column again to return back.
• Note that percentage on 'y' axis changes according to chart values.