ASP.NET MVC Step Area Charts & Graphs

Download ASP.NET Chart Samples

Step Area Charts are drawn by connecting the data points using vertical and horizontal lines and shading the enclosed area. Given example shows ASP.NET MVC Step 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", {
	title: {
		text: "Petrol Prices in Bangalore - December 2017"
	},
	axisX: {
		valueFormatString: "D MMM"
	},
	axisY: {
		prefix: "₹"
	},
	data: [{
		type: "stepArea",
		xValueType: "dateTime",
		yValueFormatString: "₹#,##0.0",
		xValueFormatString: "D MMM",
		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(1513881000000, 70.58));
			dataPoints.Add(new DataPoint(1513794600000, 70.5));
			dataPoints.Add(new DataPoint(1513708200000, 70.42));
			dataPoints.Add(new DataPoint(1513621800000, 70.34));
			dataPoints.Add(new DataPoint(1513535400000, 70.26));
			dataPoints.Add(new DataPoint(1513449000000, 70.22));
			dataPoints.Add(new DataPoint(1513362600000, 70.2));
			dataPoints.Add(new DataPoint(1513276200000, 70.17));
			dataPoints.Add(new DataPoint(1513189800000, 70.14));
			dataPoints.Add(new DataPoint(1513103400000, 70.14));
			dataPoints.Add(new DataPoint(1513017000000, 70.16));
			dataPoints.Add(new DataPoint(1512930600000, 70.19));
			dataPoints.Add(new DataPoint(1512844200000, 70.22));
			dataPoints.Add(new DataPoint(1512757800000, 70.25));
			dataPoints.Add(new DataPoint(1512671400000, 70.26));
			dataPoints.Add(new DataPoint(1512585000000, 70.3));
			dataPoints.Add(new DataPoint(1512498600000, 70.31));
			dataPoints.Add(new DataPoint(1512412200000, 70.32));
			dataPoints.Add(new DataPoint(1512325800000, 70.3));
			dataPoints.Add(new DataPoint(1512239400000, 70.3));
			dataPoints.Add(new DataPoint(1512153000000, 70.29));
			dataPoints.Add(new DataPoint(1512066600000, 70.29));

			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

The markers type can be changed using markerType property. You can also customize the color and size of the existing marker by using markerColor and markerSize properties. Some other commonly used customization options include markerBorderColor, lineColor, color, etc.

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