ASP.NET MVC Charts & Graphs with Animation

Download ASP.NET Chart Samples

CanvasJS ASP.NET MVC Charts supports animated rendering that makes chart look more appealing. Below example shows animated Pie Chart that 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", {
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	exportEnabled: true,
	animationEnabled: true,
	title: {
		text: "Automotive Semiconductor Vendors 2015",
		fontSize: 21
	},
	data: [{
		type: "pie",
		startAngle: 160,
		toolTipContent: "<b>{label}</b>: {y}%",
		indexLabel: "{label} - {y}%",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.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("NXP", 14));
			dataPoints.Add(new DataPoint("Infineon", 10));
			dataPoints.Add(new DataPoint("Renesas", 9));
			dataPoints.Add(new DataPoint("STMicroelectronics", 8));
			dataPoints.Add(new DataPoint("Texas Instruments", 7));
			dataPoints.Add(new DataPoint("Bosch", 5));
			dataPoints.Add(new DataPoint("ON Semiconductor", 4));
			dataPoints.Add(new DataPoint("Toshiba", 3));
			dataPoints.Add(new DataPoint("Micron", 3));
			dataPoints.Add(new DataPoint("Osram", 2));
			dataPoints.Add(new DataPoint("Others", 35));

			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, 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;
	}
}

Chart Customizations

animtionDuration property can be used to change the time taken for animation. Some other commonly used customization options are animationEnabled, theme, etc.

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