ASP.NET MVC Chart Data from Database

Download ASP.NET Chart Samples

CanvasJS allows rendering of Charts using data from database. Given example shows Column chart rendered using data from database. It also includes source code that you can try running locally.

@{
	Layout = null;
}

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

var result = @Html.Raw(ViewBag.DataPoints);
var dataPoints =[];
for(var i = 0; i < result.length; i++){
	dataPoints.push({x:result[i].x, y:result[i].y});
}

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title: {
        text: "ASP.NET MVC Column Chart from Database"
    },
    data: [
    {
        type: "column",
        dataPoints: dataPoints,
    }
    ]
});
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 System;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Linq;
using Newtonsoft.Json;
using ASPNET_MVC_ChartsDemo.Models;

namespace ASPNET_MVC_ChartsDemo.Controllers
{
	public class HomeController : Controller
	{
		private DataPointsDBEntities _db = new DataPointsDBEntities();
		public ActionResult Index()
		{
			try
			{
				ViewBag.DataPoints = JsonConvert.SerializeObject(_db.Points.ToList(), _jsonSetting);

				return View();
			}
			catch (System.Data.Entity.Core.EntityException)
			{
				return View("Error");
			}
			catch (System.Data.SqlClient.SqlException)
			{
				return View("Error");
			}
		}
		JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
	}
}                        
//------------------------------------------------------------------------------
// 
//     This code was generated from a template.
//
//     Manual changes to this file may cause unexpected behavior in your application.
//     Manual changes to this file will be overwritten if the code is regenerated.
// 
//------------------------------------------------------------------------------

namespace ASPNET_MVC_ChartsDemo.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Point
    {
        public int x { get; set; }
        public int y { get; set; }
    }
}

Chart Customizations

Index / Data labels can be enabled for all the dataPoints using indexLabel property. The positioning of indexLabels can be changed to either "inside" or "outside" using indexLabelPlacement. Some other commonly used customization options are indexLabelOrientaion, indexLabelFontSize, etc.

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