ASP.NET MVC Box And Whisker Charts & Graphs

Download ASP.NET Chart Samples

Box and Whisker Charts are used to show the distribution of numerical data through their quartiles, highlighting the median / mean values. Box and Whisker Charts are also known as Box Plots. Given example shows simple ASP.NET MVC Box and Whisker Chart along with source code that you can try running locally.

@{
	Layout = null;
}

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

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Turn Around Time for Printed Circuit Boards"
	},
	data: [{
		type: "boxAndWhisker",
		yValueFormatString: "#,##0.## Days",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" 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("1 to 2 Layer Board", new double[] { 5, 8.5, 14, 20, 12 }));
			dataPoints.Add(new DataPoint("4 to 6 Layer Board", new double[] { 8, 12, 23, 28, 18 }));
			dataPoints.Add(new DataPoint("8 to 10 Layer Board", new double[] { 8, 12, 21, 30, 16 }));
			dataPoints.Add(new DataPoint("12 to 14 Layer Board", new double[] { 8, 12, 22, 30, 18 }));
			dataPoints.Add(new DataPoint("16 to 14 Layer Board", new double[] { 10, 14, 24, 32, 20 }));

			ViewBag.DataPoints = 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(string label, double[] y)
		{
			this.Label = label;
			this.Y = y;
		}

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

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

Chart Customizations

stemThickness, stemColor properties can be used to customize the thickness and color of the stems. whiskerThickness & whiskerColor are similar counterparts for whisker customization. Some other frequently used customization options are upperBoxColor, lowerBoxColor, etc.

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