ASP.NET MVC Drilldown Charts & Graphs

Download ASP.NET Chart Samples

Drilldown Charts are used for better visualization of data to reveal additional details. The given example shows Doughnut chart with Drilldown functionality. It also includes source code that you can try running locally.

@{
	Layout = null;
}

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var totalVisitors = 883000;
var visitorsData = {
	"New vs Returning Visitors": [{
		click: visitorsChartDrilldownHandler,
		cursor: "pointer",
		explodeOnClick: false,
		innerRadius: "75%",
		legendMarkerType: "square",
		name: "New vs Returning Visitors",
		radius: "100%",
		showInLegend: true,
		startAngle: 90,
		type: "doughnut",
		dataPoints: @Html.Raw(ViewBag.NewVsReturningVisitors)
	}],
	"New Visitors": [{
		color: "#E7823A",
		name: "New Visitors",
		type: "column",
		xValueType: "dateTime",
		dataPoints:  @Html.Raw(ViewBag.NewVisitors)
	}],
	"Returning Visitors": [{
		color: "#546BC1",
		name: "Returning Visitors",
		type: "column",
		xValueType: "dateTime",
		dataPoints:  @Html.Raw(ViewBag.ReturningVisitors)
	}]
};

var newVSReturningVisitorsOptions = {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "New VS Returning Visitors"
	},
	subtitles: [{
		text: "Click on Any Segment to Drilldown",
		backgroundColor: "#2eacd1",
		fontSize: 16,
		fontColor: "white",
		padding: 5
	}],
	legend: {
		fontFamily: "calibri",
		fontSize: 14,
		itemTextFormatter: function (e) {
			return e.dataPoint.name + ": " + Math.round(e.dataPoint.y / totalVisitors * 100) + "%";
		}
	},
	data: []
};

var visitorsDrilldownedChartOptions = {
	animationEnabled: true,
	theme: "light2",
	axisX: {
		labelFontColor: "#717171",
		lineColor: "#a2a2a2",
		tickColor: "#a2a2a2"
	},
	axisY: {
		gridThickness: 0,
		includeZero: false,
		labelFontColor: "#717171",
		lineColor: "#a2a2a2",
		tickColor: "#a2a2a2",
		lineThickness: 1
	},
	data: []
};

var chart = new CanvasJS.Chart("chartContainer", newVSReturningVisitorsOptions);
chart.options.data = visitorsData["New vs Returning Visitors"];
chart.render();

function visitorsChartDrilldownHandler(e) {
	chart = new CanvasJS.Chart("chartContainer", visitorsDrilldownedChartOptions);
	chart.options.data = visitorsData[e.dataPoint.name];
	chart.options.title = { text: e.dataPoint.name }
	chart.render();
	$("#backButton").toggleClass("invisible");
}

$("#backButton").click(function () {
	$(this).toggleClass("invisible");
	chart = new CanvasJS.Chart("chartContainer", newVSReturningVisitorsOptions);
	chart.options.data = visitorsData["New vs Returning Visitors"];
	chart.render();
});

}
</script>
<style>
#backButton {
	border-radius: 4px;
	padding: 8px;
	border: none;
	font-size: 16px;
	background-color: #2eacd1;
	color: white;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.invisible {
	display: none;
}
</style>
</head>
<body>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<button class="btn invisible" id="backButton">&lt; Back</button>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>                              
using ASPNET_MVC_ChartsDemo.Models;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Web.Mvc;

namespace ASPNET_MVC_ChartsDemo.Controllers
{
	public class HomeController : Controller
	{
		// GET: Home
		public ActionResult Index()
		{
			List<DataPoint> dataPoints = new List<DataPoint>();

			dataPoints.Add(new DataPoint(519960, "New Visitors", "#E7823A"));
			dataPoints.Add(new DataPoint(363040, "Returning Visitors", "#546BC1"));

			ViewBag.NewVsReturningVisitors = JsonConvert.SerializeObject(dataPoints);

			dataPoints = new List<DataPoint>();
			dataPoints.Add(new DataPoint(1420050600000, 33000));
			dataPoints.Add(new DataPoint(1422729000000, 35960));
			dataPoints.Add(new DataPoint(1425148200000, 42160));
			dataPoints.Add(new DataPoint(1427826600000, 42240));
			dataPoints.Add(new DataPoint(1430418600000, 43200));
			dataPoints.Add(new DataPoint(1433097000000, 40600));
			dataPoints.Add(new DataPoint(1435689000000, 42560));
			dataPoints.Add(new DataPoint(1438367400000, 44280));
			dataPoints.Add(new DataPoint(1441045800000, 44800));
			dataPoints.Add(new DataPoint(1443637800000, 48720));
			dataPoints.Add(new DataPoint(1446316200000, 50840));
			dataPoints.Add(new DataPoint(1448908200000, 51600));

			ViewBag.NewVisitors = JsonConvert.SerializeObject(dataPoints);

			dataPoints = new List<DataPoint>();
			dataPoints.Add(new DataPoint(1420050600000, 22000));
			dataPoints.Add(new DataPoint(1422729000000, 26040));
			dataPoints.Add(new DataPoint(1425148200000, 25840));
			dataPoints.Add(new DataPoint(1427826600000, 23760));
			dataPoints.Add(new DataPoint(1430418600000, 28800));
			dataPoints.Add(new DataPoint(1433097000000, 29400));
			dataPoints.Add(new DataPoint(1435689000000, 33440));
			dataPoints.Add(new DataPoint(1438367400000, 37720));
			dataPoints.Add(new DataPoint(1441045800000, 35200));
			dataPoints.Add(new DataPoint(1443637800000, 35280));
			dataPoints.Add(new DataPoint(1446316200000, 31160));
			dataPoints.Add(new DataPoint(1448908200000, 34400));

			ViewBag.ReturningVisitors = JsonConvert.SerializeObject(dataPoints);

			return View();
		}
	}
}                        
using System;
using System.Runtime.Serialization;

namespace ASPNET_MVC_ChartsDemo.Models
{
	//DataContract for Serializing Data - required to serve in JSON format
	[DataContract]
	public class DataPoint
	{
		public DataPoint(double x, double y)
		{
			this.X = x;
			this.Y = y;
		}

		public DataPoint(double y, string name, string color)
		{
			this.Y = y;
			this.Name = name;
			this.Color = color;
		}

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "x")]
		public Nullable<double> X = null;

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "y")]
		public Nullable<double> Y = null;

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "name")]
		public string Name = "";

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "color")]
		public string Color = null;
	}
}

Chart Customizations

Inner and outer radius of the doughnut chart can be customized using innerRadius and radius properties. You can set a slice to be exploded by default using exploded property. Some other commonly used customization options include color, animationEnabled, theme, etc.

Note   For step by step instructions, follow our ASP.NET MVC Integration Tutorial