ASP.NET MVC Step Line Charts & Graphs

Download ASP.NET Chart Samples

Step Line Charts are like line chart that are useful when comparing trends for events that changes value at discrete at non-uniform intervals of time. In Step Line Charts, datapoints are connected using horizontal and vertical lines. Given example shows simple ASP.NET MVC Step 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,
	title: {
		text: "Price Of Crude Oil 2014-2016"
	},
	axisX: {
		valueFormatString: "MMM YY"
	},
	axisY: {
		title: "Per Barrel",
		prefix: "$"
	},
	data: [{
		type: "stepLine",
		xValueType: "dateTime",
		yValueFormatString: "$#,##0.##",
		xValueFormatString: "MMM YY",		
		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(1388514600000, 102.1));
			dataPoints.Add(new DataPoint(1391193000000, 104.83));
			dataPoints.Add(new DataPoint(1393612200000, 104.04));
			dataPoints.Add(new DataPoint(1396290600000, 104.87));
			dataPoints.Add(new DataPoint(1398882600000, 105.71));
			dataPoints.Add(new DataPoint(1401561000000, 108.37));
			dataPoints.Add(new DataPoint(1404153000000, 105.23));
			dataPoints.Add(new DataPoint(1406831400000, 100.05));
			dataPoints.Add(new DataPoint(1409509800000, 95.85));
			dataPoints.Add(new DataPoint(1412101800000, 86.08));
			dataPoints.Add(new DataPoint(1414780200000, 76.99));
			dataPoints.Add(new DataPoint(1417372200000, 60.7));
			dataPoints.Add(new DataPoint(1420050600000, 47.11));
			dataPoints.Add(new DataPoint(1422729000000, 54.79));
			dataPoints.Add(new DataPoint(1425148200000, 52.83));
			dataPoints.Add(new DataPoint(1427826600000, 57.54));
			dataPoints.Add(new DataPoint(1430418600000, 62.51));
			dataPoints.Add(new DataPoint(1433097000000, 61.31));
			dataPoints.Add(new DataPoint(1435689000000, 54.34));
			dataPoints.Add(new DataPoint(1438367400000, 45.69));
			dataPoints.Add(new DataPoint(1441045800000, 46.28));
			dataPoints.Add(new DataPoint(1443637800000, 46.96));
			dataPoints.Add(new DataPoint(1446316200000, 43.11));
			dataPoints.Add(new DataPoint(1448908200000, 36.57));
			dataPoints.Add(new DataPoint(1451586600000, 29.78));
			dataPoints.Add(new DataPoint(1454265000000, 31.03));
			dataPoints.Add(new DataPoint(1456770600000, 37.34));
			dataPoints.Add(new DataPoint(1459449000000, 40.75));
			dataPoints.Add(new DataPoint(1462041000000, 45.94));
			dataPoints.Add(new DataPoint(1464719400000, 47.69));
			dataPoints.Add(new DataPoint(1467311400000, 44.13));
			dataPoints.Add(new DataPoint(1469989800000, 44.87));
			dataPoints.Add(new DataPoint(1472668200000, 45.04));
			dataPoints.Add(new DataPoint(1475260200000, 49.29));
			dataPoints.Add(new DataPoint(1477938600000, 45.26));
			dataPoints.Add(new DataPoint(1480530600000, 52.62));

			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

lineDashType property can be used to change the Dash Style of line. You can also customize the color using lineColor property. Other frequently used customization options are markerSize, markerType, etc.

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