ASP.NET MVC Area Charts & Graphs

Download ASP.NET Chart Samples

Area Charts are same as Line Charts except that the area chart shades the area that it covers. It is used to visualize cumulative value over a period of time or range. Given example shows simple ASP.NET MVC 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",
	animationEnabled: true,
	title: {
		text: "Power Produced by a Wind Turbine"
	},
	axisX: {
		title: "Wind Speed (in m/s)"
	},
	axisY: {
		title: "Instantaneous Power (in kW)"
	},
	data: [{
		type: "area",
		color: "#0BB5FF",
		markerSize: 0,
		toolTipContent: "Wind Speed: {x} m/s<br>Ins. Power: {y} kW",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<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(1, 0));
			dataPoints.Add(new DataPoint(2, 0));
			dataPoints.Add(new DataPoint(3, 31));
			dataPoints.Add(new DataPoint(4, 145));
			dataPoints.Add(new DataPoint(5, 341));
			dataPoints.Add(new DataPoint(6, 620));
			dataPoints.Add(new DataPoint(7, 1007));
			dataPoints.Add(new DataPoint(8, 1486));
			dataPoints.Add(new DataPoint(9, 1857));
			dataPoints.Add(new DataPoint(10, 1983));
			dataPoints.Add(new DataPoint(11, 1994));
			dataPoints.Add(new DataPoint(12, 1998));
			dataPoints.Add(new DataPoint(13, 2000));
			dataPoints.Add(new DataPoint(14, 2000));
			dataPoints.Add(new DataPoint(15, 2000));
			dataPoints.Add(new DataPoint(16, 2000));
			dataPoints.Add(new DataPoint(17, 2000));
			dataPoints.Add(new DataPoint(18, 2000));
			dataPoints.Add(new DataPoint(19, 2000));
			dataPoints.Add(new DataPoint(20, 2000));
			dataPoints.Add(new DataPoint(21, 2000));
			dataPoints.Add(new DataPoint(22, 1906));
			dataPoints.Add(new DataPoint(23, 1681));
			dataPoints.Add(new DataPoint(24, 1455));
			dataPoints.Add(new DataPoint(25, 1230));

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

Chart Customizations

color and fillOpacity properties can be used to customize the filled area in an Area Chart. Other frequently used customization options include, lineColor, lineDashType, etc.

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