ASP.NET MVC Dynamic / Live Column Charts & Graphs

Download ASP.NET Chart Samples

Dynamic Charts are also popularly called as Live or Real-Time Charts. Column Chart, like any other chart in CanvasJS, supports updating of data in real-time. Given example shows Real-Time Column 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", {
	title: {
		text: "Pollutant Level in a City"
	},
	axisY: {
		title: "Concentration (in µg/m3)"
	},
	data: [{
		type: "column",
		yValueFormatString: "#,##0.00 µg/m3",
		indexLabel: "{y}",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
			
function updateChart() {
	var deltaY, yVal;
	var dps = chart.options.data[0].dataPoints;
	for (var i = 0; i < dps.length; i++) {
		deltaY = (1 + Math.random() * (-1 - 1)) * 0.1 * dps[i].y;
		yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0;
		dps[i].y = yVal;
	}
	chart.options.data[0].dataPoints = dps;
	chart.render();
};
updateChart();

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

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/jquery.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("NO2", 64));
			dataPoints.Add(new DataPoint("PM10", 80));
			dataPoints.Add(new DataPoint("O3", 32));
			dataPoints.Add(new DataPoint("NH3", 3));
			dataPoints.Add(new DataPoint("SO2", 8));
			dataPoints.Add(new DataPoint("CO", 22));
			dataPoints.Add(new DataPoint("PM2.5", 79));

			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(string label, dynamic 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 dynamic Y = null;
	}
}

Chart Customizations

color property can be used to change the color of columns. You can also customize their opacity using fillOpacity property. Other commonly used customization options are indexLabel, animationEnabled, theme, etc.

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