ASP.NET MVC Error Line Charts & Graphs

Download ASP.NET Chart Samples

Error Charts are used to show uncertainty or variability of data and used on graphs to indicate the same in reported measurement. Error Graph combined with Line Chart is commonly referred as Error Line Chart. Given example shows ASP.NET MVC Error Line 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", {
	animationEnabled: true,
	theme: "dark1",
	title: {
		text: "Rainfall Predictions - 2017"
	},
	axisX: {
		interval: 1
	},
	axisY: {
		title: "Precipitation (in inch)",
		suffix: " in",
		gridThickness: 0
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "line",
		name: "Predicted",
		toolTipContent: "<b>{label}</b><br><span style=\"color:#4F81BC\">{name}:</span> {y} in",
		markerType: "none",
		dataPoints: @Html.Raw(ViewBag.DataPoints1)
	},
	{
		type: "error",
		name: "Error Range",
		toolTipContent: "<span style=\"color:#C0504E\">{name}:</span> {y[0]} in - {y[1]} in",
		dataPoints: @Html.Raw(ViewBag.DataPoints2) 
	}]
});
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> dataPoints1 = new List<DataPoint>();
			List<DataPoint> dataPoints2 = new List<DataPoint>();

			dataPoints1.Add(new DataPoint("Jan", 3.69));
			dataPoints1.Add(new DataPoint("Feb", 3.06));
			dataPoints1.Add(new DataPoint("Mar", 4.08));
			dataPoints1.Add(new DataPoint("Apr", 4.06));
			dataPoints1.Add(new DataPoint("May", 4.48));
			dataPoints1.Add(new DataPoint("Jun", 3.45));
			dataPoints1.Add(new DataPoint("Jul", 4.17));
			dataPoints1.Add(new DataPoint("Aug", 4.05));
			dataPoints1.Add(new DataPoint("Sep", 4.05));
			dataPoints1.Add(new DataPoint("Oct", 3.5));
			dataPoints1.Add(new DataPoint("Nov", 4));
			dataPoints1.Add(new DataPoint("Dec", 3.86));

			dataPoints2.Add(new DataPoint("Jan", new double[] { 3.6, 3.8 }));
			dataPoints2.Add(new DataPoint("Feb", new double[] { 3, 3.4 }));
			dataPoints2.Add(new DataPoint("Mar", new double[] { 3.8, 4.3 }));
			dataPoints2.Add(new DataPoint("Apr", new double[] { 3.9, 4.2 }));
			dataPoints2.Add(new DataPoint("May", new double[] { 4.3, 4.6 }));
			dataPoints2.Add(new DataPoint("Jun", new double[] { 3.3, 3.6 }));
			dataPoints2.Add(new DataPoint("Jul", new double[] { 4, 4.4 }));
			dataPoints2.Add(new DataPoint("Aug", new double[] { 3.9, 4.3 }));
			dataPoints2.Add(new DataPoint("Sep", new double[] { 3.8, 4.2 }));
			dataPoints2.Add(new DataPoint("Oct", new double[] { 3.4, 3.7 }));
			dataPoints2.Add(new DataPoint("Nov", new double[] { 3.8, 4.2 }));
			dataPoints2.Add(new DataPoint("Dec", new double[] { 3.7, 4 }));


			ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints1);
			ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints2);			

			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, dynamic 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 dynamic Y = null;
	}
}

Chart Customizations

stemColor and whiskerColor properties can be used to customize the stem and whisker colors. Some other frequently used customizations include whiskerDashType, stemDashType, linkedDataSeriesIndex, etc.

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