ASP.NET MVC Line Charts & Graphs

Download ASP.NET Code Samples

Line / Trend Charts are drawn by interconnecting all data points in a series using straight line segments. Library also allows you to plot lines as solid, dashed or dotted. Given example shows multi-series 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: "Product Trends By Month"
	},
	axisY: {
		includeZero: false
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "line",
		name: "Desktops",
		showInLegend: true,
		dataPoints: @Html.Raw(ViewBag.DataPoints1)
	}, {
		type: "line",
		name: "Laptops",
		showInLegend: true,
		dataPoints: @Html.Raw(ViewBag.DataPoints2)
	}, {
		type: "line",
		name: "Mobiles",
		showInLegend: true,
		dataPoints: @Html.Raw(ViewBag.DataPoints3)
	}]
});
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>();
			List<DataPoint> dataPoints3 = new List<DataPoint>();

			dataPoints1.Add(new DataPoint("Jan", 72));
			dataPoints1.Add(new DataPoint("Feb", 67));
			dataPoints1.Add(new DataPoint("Mar", 55));
			dataPoints1.Add(new DataPoint("Apr", 42));
			dataPoints1.Add(new DataPoint("May", 40));
			dataPoints1.Add(new DataPoint("Jun", 35));

			dataPoints2.Add(new DataPoint("Jan", 48));
			dataPoints2.Add(new DataPoint("Feb", 56));
			dataPoints2.Add(new DataPoint("Mar", 50));
			dataPoints2.Add(new DataPoint("Apr", 47));
			dataPoints2.Add(new DataPoint("May", 65));
			dataPoints2.Add(new DataPoint("Jun", 69));
				
			dataPoints3.Add(new DataPoint("Jan", 38));
			dataPoints3.Add(new DataPoint("Feb", 46));
			dataPoints3.Add(new DataPoint("Mar", 55));
			dataPoints3.Add(new DataPoint("Apr", 70));
			dataPoints3.Add(new DataPoint("May", 77));
			dataPoints3.Add(new DataPoint("Jun", 91));

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

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

Related Customization

lineThickness property can be used to customize the thickness of the line. The markers can be also customized using markerColor and markerType property. Some other commonly used customization options are markerSize, markerBorderColor, etc.

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