Combination of ASP.NET MVC Column, Line and Area Charts

Download ASP.NET Chart Samples

You can create combination of any Charts which has same orientation of X and Y axis. Given examples shows combination of Column, Line and Area Charts. It also includes 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: "Monthly Sales Data"
	},
	axisX: {
		valueFormatString: "MMM"
	},
	axisY: {
		prefix: "$",
		labelFormatter: addSymbols
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [
		{
			type: "column",
			name: "Actual Sales",
			showInLegend: true,
			xValueType: "dateTime",
			xValueFormatString: "MMM YYYY",
			yValueFormatString: "$#,##0.##",
			dataPoints: @Html.Raw(ViewBag.DataPoints1)
		},
		{
			type: "line",
			name: "Expected Sales",
			showInLegend: true,
			xValueType: "dateTime",
			yValueFormatString: "$#,##0.##",
			dataPoints: @Html.Raw(ViewBag.DataPoints2)
		},
		{
			type: "area",
			name: "Profit",
			markerBorderColor: "white",
			markerBorderThickness: 2,
			showInLegend: true,
			xValueType: "dateTime",
			yValueFormatString: "$#,##0.##",
			dataPoints: @Html.Raw(ViewBag.DataPoints3)
		}]
});
chart.render();

function addSymbols(e) {
	var suffixes = ["", "K", "M", "B"];
	var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);

	if (order > suffixes.length - 1)
		order = suffixes.length - 1;

	var suffix = suffixes[order];
	return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
}

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else {
		e.dataSeries.visible = true;
	}
	e.chart.render();
}
	
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" 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> dataPoints1 = new List<DataPoint>();
			List<DataPoint> dataPoints2 = new List<DataPoint>();
			List<DataPoint> dataPoints3 = new List<DataPoint>();

			dataPoints1.Add(new DataPoint(1451586600000, 50000, null));
			dataPoints1.Add(new DataPoint(1454265000000, 40000, null));
			dataPoints1.Add(new DataPoint(1456770600000, 30000, null));
			dataPoints1.Add(new DataPoint(1459449000000, 35000, null));
			dataPoints1.Add(new DataPoint(1462041000000, 43000, null));
			dataPoints1.Add(new DataPoint(1464719400000, 60000, null));
			dataPoints1.Add(new DataPoint(1467311400000, 35000, null));
			dataPoints1.Add(new DataPoint(1469989800000, 50000, null));
			dataPoints1.Add(new DataPoint(1472668200000, 70000, "High Renewals"));
			dataPoints1.Add(new DataPoint(1475260200000, 35000, null));
			dataPoints1.Add(new DataPoint(1477938600000, 30000, null));
			dataPoints1.Add(new DataPoint(1480530600000, 37000, null));

			dataPoints2.Add(new DataPoint(1451586600000, 45000, null));
			dataPoints2.Add(new DataPoint(1454265000000, 48000, null));
			dataPoints2.Add(new DataPoint(1456770600000, 40000, null));
			dataPoints2.Add(new DataPoint(1459449000000, 41000, null));
			dataPoints2.Add(new DataPoint(1462041000000, 49000, null));
			dataPoints2.Add(new DataPoint(1464719400000, 46000, null));
			dataPoints2.Add(new DataPoint(1467311400000, 42000, null));
			dataPoints2.Add(new DataPoint(1469989800000, 43000, null));
			dataPoints2.Add(new DataPoint(1472668200000, 50000, null));
			dataPoints2.Add(new DataPoint(1475260200000, 43000, null));
			dataPoints2.Add(new DataPoint(1477938600000, 42000, null));
			dataPoints2.Add(new DataPoint(1480530600000, 50000, null));

			dataPoints3.Add(new DataPoint(1451586600000, 27000, null));
			dataPoints3.Add(new DataPoint(1454265000000, 21000, null));
			dataPoints3.Add(new DataPoint(1456770600000, 12000, null));
			dataPoints3.Add(new DataPoint(1459449000000, 18000, null));
			dataPoints3.Add(new DataPoint(1462041000000, 24000, null));
			dataPoints3.Add(new DataPoint(1464719400000, 33000, null));
			dataPoints3.Add(new DataPoint(1467311400000, 16000, null));
			dataPoints3.Add(new DataPoint(1469989800000, 29000, null));
			dataPoints3.Add(new DataPoint(1472668200000, 38000, null));
			dataPoints3.Add(new DataPoint(1475260200000, 24000, null));
			dataPoints3.Add(new DataPoint(1477938600000, 12000, null));
			dataPoints3.Add(new DataPoint(1480530600000, 19000, null));


			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(double x, double y, string indexLabel)
		{
			this.X = x;
			this.Y = y;
			this.IndexLabel = indexLabel;
		}

		//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;

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "indexLabel")]
		public string IndexLabel = "";
	}
}

Chart Customizations

You can enable legends for data-series present in the chart by setting showInLegend to true. The text shown in the legends can also be changed using legendText property. Some of the other commonly used customization options include color, markerType, markerSize, dataPointWidth, theme, animationEnabled, etc.

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