ASP.NET MVC Dynamic / Live Multi Series Chart

Download ASP.NET Chart Samples

Dynamic updates are also supported in Multi Series Charts. You can also combine different types of same axis oriented graph and make it dynamic. Given example shows Multi Series Line Chart that updates every two seconds. It also includes source code that you can try running locally.

@{
	Layout = null;
}

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var dataPoints1 = @Html.Raw(ViewBag.DataPoints1);
var dataPoints2 = @Html.Raw(ViewBag.DataPoints2);

var chart = new CanvasJS.Chart("chartContainer", {
	zoomEnabled: true,
	title: {
		text: "Reading From Two Sensor"
	},
	axisX: {
		title: "chart updates every 2 secs",
		crosshair: {
			enabled: true,
			snapToDataPoint: true
		}
	},
	axisY: {
		crosshair: {
			enabled: true,
			snapToDataPoint: true,
			valueFormatString: "#,##0"
		}
	},
	toolTip: {
		shared: true
	},
	legend: {
		dockInsidePlotArea: true,
		verticalAlign: "top",
		horizontalAlign: "right"
	},
	data: [{
		type: "line",
		markerType: "none",
		xValueType: "dateTime",
		xValueFormatString: "hh:mm:ss TT",
		name: "Sensor 1",
		showInLegend: true,
		dataPoints: dataPoints1
	},
	{
		type: "line",
		markerType: "none",
		xValueType: "dateTime",
		name: "Sensor 2",
		showInLegend: true,
		dataPoints: dataPoints2
	}]
});

chart.render();

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else {
		e.dataSeries.visible = true;
	}
	chart.render();
}

var updateInterval = @Html.Raw(ViewBag.UpdateInterval);
// initial value
var yValue1 = @Html.Raw(ViewBag.YValue1);
var yValue2 = @Html.Raw(ViewBag.YValue2);

var time = new Date(@Html.Raw(ViewBag.Time));

function updateChart(count) {
	count = count || 1;
	var deltaY1, deltaY2;
	for (var i = 0; i < count; i++) {
		time.setTime(time.getTime() + updateInterval);
		deltaY1 = .5 + Math.random() * (-.5 - .5);
		deltaY2 = .5 + Math.random() * (-.5 - .5);

		// adding random value and rounding it to two digits.
		yValue1 = Math.round((yValue1 + deltaY1) * 100) / 100;
		yValue2 = Math.round((yValue2 + deltaY2) * 100) / 100;

		// pushing the new values
		dataPoints1.push({
			x: time.getTime(),
			y: yValue1
		});
		dataPoints2.push({
			x: time.getTime(),
			y: yValue2
		});
	}

	chart.render();
}

setInterval(function () { updateChart() }, updateInterval);

}
</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;
using System.Collections.Generic;
using System.Web.Mvc;

namespace ASPNET_MVC_ChartsDemo.Controllers
{
	public class HomeController : Controller
	{
		// GET: Home
		public ActionResult Index()
		{
			Random random = new Random();
			List<DataPoint> dataPoints1 = new List<DataPoint>();
			List<DataPoint> dataPoints2 = new List<DataPoint>();

			int updateInterval = 2000;

			// initial value
			double yValue1 = 600;
			double yValue2 = 605;
			double time;

			DateTime dateNow = DateTime.Now;
			DateTime date = new DateTime(dateNow.Year, dateNow.Month, dateNow.Day, 9, 30, 00);
			time = ((DateTimeOffset)date).ToUnixTimeSeconds() * 1000;
			addData(100);

			ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints1);
			ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints2);
			ViewBag.YValue1 = yValue1;
			ViewBag.YValue2 = yValue2;
			ViewBag.Time = time;
			ViewBag.UpdateInterval = updateInterval;

			return View();

			void addData(int count)
			{
				double deltaY1, deltaY2;
				for (int i = 0; i < count; i++)
				{
					time += updateInterval;
					deltaY1 = .5 + random.NextDouble() * (-.5 - .5);
					deltaY2 = .5 + random.NextDouble() * (-.5 - .5);

					// adding random value and rounding it to two digits.
					yValue1 = Math.Round((yValue1 + deltaY1) * 100) / 100;
					yValue2 = Math.Round((yValue2 + deltaY2) * 100) / 100;

					// pushing the new values
					dataPoints1.Add(new DataPoint(time, yValue1));
					dataPoints2.Add(new DataPoint(time, yValue2));
				}
			}
		}
	}
}                        
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.Web;

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

Legend can be enabled for each data-series by setting showInLegend to true. You can also hide / unhide a data-series by toggling the visible property. Some other frequently used customization options are lineThickness, animationEnabled, theme, etc.

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