ASP.NET MVC Multi Series Area Charts & Graphs

Multi Series Area Charts are used to compare cumulative total over a period of time or range of values. Given example shows Multi Series Area 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", {
	theme: "light2",
	title: {
		text: "Comparison of Exchange Rates"
	},
	subtitles: [{
		text: "EUR & USD to INR"
	}],
	axisY: {
		includeZero: false,
		prefix: "₹"
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "area",
		name: "Euro",
		markerSize: 0,
		xValueType: "dateTime",
		xValueFormatString: "MMM YYYY",
		yValueFormatString: "₹#,##0.##",
		dataPoints: @Html.Raw(ViewBag.DataPoints1)
	},
	{
		type: "area",
		name: "USD",
		markerSize: 0,
		xValueType: "dateTime",
		xValueFormatString: "MMM YYYY",
		yValueFormatString: "₹#,##0.##",
		dataPoints: @Html.Raw(ViewBag.DataPoints2)
	}
	]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/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(1451586600000, 73.5555));
			dataPoints1.Add(new DataPoint(1454265000000, 74.1625));
			dataPoints1.Add(new DataPoint(1456770600000, 75.398));
			dataPoints1.Add(new DataPoint(1459449000000, 76.0965));
			dataPoints1.Add(new DataPoint(1462041000000, 74.8165));
			dataPoints1.Add(new DataPoint(1464719400000, 74.966));
			dataPoints1.Add(new DataPoint(1467311400000, 74.4805));
			dataPoints1.Add(new DataPoint(1469989800000, 74.7355));
			dataPoints1.Add(new DataPoint(1472668200000, 74.8155));
			dataPoints1.Add(new DataPoint(1475260200000, 73.2275));
			dataPoints1.Add(new DataPoint(1477938600000, 72.6315));
			dataPoints1.Add(new DataPoint(1480530600000, 71.461));
			dataPoints1.Add(new DataPoint(1483209000000, 72.9025));
			dataPoints1.Add(new DataPoint(1485887400000, 70.575));
			dataPoints1.Add(new DataPoint(1488306600000, 69.0955));
			dataPoints1.Add(new DataPoint(1490985000000, 70.0565));
			dataPoints1.Add(new DataPoint(1493577000000, 72.532));
			dataPoints1.Add(new DataPoint(1496255400000, 73.835));
			dataPoints1.Add(new DataPoint(1498847400000, 76.0255));
			dataPoints1.Add(new DataPoint(1501525800000, 76.1465));
			dataPoints1.Add(new DataPoint(1504204200000, 77.157));
			dataPoints1.Add(new DataPoint(1506796200000, 75.4075));
			dataPoints1.Add(new DataPoint(1509474600000, 76.769));
			dataPoints1.Add(new DataPoint(1512066600000, 75.883));

			dataPoints2.Add(new DataPoint(1451586600000, 67.878));
			dataPoints2.Add(new DataPoint(1454265000000, 68.208));
			dataPoints2.Add(new DataPoint(1456770600000, 66.255));
			dataPoints2.Add(new DataPoint(1459449000000, 66.425));
			dataPoints2.Add(new DataPoint(1462041000000, 67.209));
			dataPoints2.Add(new DataPoint(1464719400000, 67.504));
			dataPoints2.Add(new DataPoint(1467311400000, 66.655));
			dataPoints2.Add(new DataPoint(1469989800000, 66.973));
			dataPoints2.Add(new DataPoint(1472668200000, 66.556));
			dataPoints2.Add(new DataPoint(1475260200000, 66.686));
			dataPoints2.Add(new DataPoint(1477938600000, 68.598));
			dataPoints2.Add(new DataPoint(1480530600000, 67.955));
			dataPoints2.Add(new DataPoint(1483209000000, 67.515));
			dataPoints2.Add(new DataPoint(1485887400000, 66.725));
			dataPoints2.Add(new DataPoint(1488306600000, 64.86));
			dataPoints2.Add(new DataPoint(1490985000000, 64.29));
			dataPoints2.Add(new DataPoint(1493577000000, 64.51));
			dataPoints2.Add(new DataPoint(1496255400000, 64.62));
			dataPoints2.Add(new DataPoint(1498847400000, 64.2));
			dataPoints2.Add(new DataPoint(1501525800000, 63.935));
			dataPoints2.Add(new DataPoint(1504204200000, 65.31));
			dataPoints2.Add(new DataPoint(1506796200000, 64.75));
			dataPoints2.Add(new DataPoint(1509474600000, 64.49));
			dataPoints2.Add(new DataPoint(1512066600000, 64.055));

			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(double x, double y)
		{
			this.x = x;
			this.Y = y;
		}

		//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;
	}
}

Related Customization

A common toolTip can be shown for all the area data-series by setting shared property within the toolTip object to true. Some of the other commonly used customization options are color, fillOpacity, showInLegend, etc.

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