ASP.NET MVC Multi Series Chart

Download ASP.NET Chart Samples

CanvasJS allows plotting more than one data series to create multi series Chart. Given example shows Multi Series Column & 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,
	theme: "light2",
	title: {
		text: "New York Climate Graph - 2017"
	},
	axisX: {
		valueFormatString: "MMM",
		intervalType: "month",
		interval: 1
	},
	axisY: [{
		title: "Precipitation (in inches)",
		lineThickness: 1
	}, {
		title: "Temperature (in °F)",
		lineThickness: 1
	}],
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		itemclick: toogleDataSeries
	},
	data: [{
		type: "column",
		name: "Precipitation",
		showInLegend: true,
		xValueFormatString: "MMMM YYYY",
		yValueFormatString: "#,##0.## inches",
		xValueType: "dateTime",
		dataPoints:  @Html.Raw(ViewBag.DataPoints1)
	}, {
		type: "line",
		name: "Max Temp",
		showInLegend: true,
		axisYIndex: 1,
		yValueFormatString: "#,##0.## °F",
		xValueType: "dateTime",
		dataPoints:  @Html.Raw(ViewBag.DataPoints2)
	}, {
		type: "line",
		name: "Min Temp",
		showInLegend: true,
		axisYIndex: 1,
		yValueFormatString: "#,##0.## °F",
		xValueType: "dateTime",
		dataPoints:  @Html.Raw(ViewBag.DataPoints3)
	}]
});
chart.render();

function toogleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else {
		e.dataSeries.visible = true;
	}
	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(1483209000000, 3.9));
			dataPoints.Add(new DataPoint(1485887400000, 2.95));
			dataPoints.Add(new DataPoint(1488306600000, 4.06));
			dataPoints.Add(new DataPoint(1490985000000, 3.94));
			dataPoints.Add(new DataPoint(1493577000000, 4.45));
			dataPoints.Add(new DataPoint(1496255400000, 3.5));
			dataPoints.Add(new DataPoint(1498847400000, 4.53));
			dataPoints.Add(new DataPoint(1501525800000, 4.13));
			dataPoints.Add(new DataPoint(1504204200000, 3.98));
			dataPoints.Add(new DataPoint(1506796200000, 3.39));
			dataPoints.Add(new DataPoint(1509474600000, 3.82));
			dataPoints.Add(new DataPoint(1512066600000, 3.58));

			ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints);

			dataPoints = new List<DataPoint>();
			dataPoints.Add(new DataPoint(1483209000000, 39));
			dataPoints.Add(new DataPoint(1485887400000, 42));
			dataPoints.Add(new DataPoint(1488306600000, 50));
			dataPoints.Add(new DataPoint(1490985000000, 60));
			dataPoints.Add(new DataPoint(1493577000000, 71));
			dataPoints.Add(new DataPoint(1496255400000, 79));
			dataPoints.Add(new DataPoint(1498847400000, 85));
			dataPoints.Add(new DataPoint(1501525800000, 83));
			dataPoints.Add(new DataPoint(1504204200000, 76));
			dataPoints.Add(new DataPoint(1506796200000, 65));
			dataPoints.Add(new DataPoint(1509474600000, 54));
			dataPoints.Add(new DataPoint(1512066600000, 44));

			ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints);

			dataPoints = new List<DataPoint>();
			dataPoints.Add(new DataPoint(1483209000000, 26));
			dataPoints.Add(new DataPoint(1485887400000, 29));
			dataPoints.Add(new DataPoint(1488306600000, 35));
			dataPoints.Add(new DataPoint(1490985000000, 44));
			dataPoints.Add(new DataPoint(1493577000000, 55));
			dataPoints.Add(new DataPoint(1496255400000, 64));
			dataPoints.Add(new DataPoint(1498847400000, 70));
			dataPoints.Add(new DataPoint(1501525800000, 69));
			dataPoints.Add(new DataPoint(1504204200000, 61));
			dataPoints.Add(new DataPoint(1506796200000, 50));
			dataPoints.Add(new DataPoint(1509474600000, 41));
			dataPoints.Add(new DataPoint(1512066600000, 32));

			ViewBag.DataPoints3 = 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

Legends can be enabled for the data-series by setting showInLegend property to true. The text shown in the legends can be changed using legendText property. Other commonly used customization options include shared(toolTip), toolTipContent, etc.

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