With CanvasJS, you can easily create charts from database in your ASP.NET MVC Application.Before we start, create an empty project in Visual Studio as mentioned in this article.
Once the project is created, please follow below step-by-step instructions:
After you create your database, you can connect to the database by double-clicking the DataPointsDB.mdf file located in the App_Data folder. Double-clicking the DataPointsDB.mdf file opens the Server Explorer window. Create a new database table and populate the database.
After you click the Add button, the Entity Data Model Wizard appears. Follow these steps to complete the wizard:
using System.Linq;
using System.Web.Mvc;
using DataPoints.Models;
namespace DataPoints.Controllers
{
public class HomeController : Controller
{
private DataPointsDBEntities _db = new DataPointsDBEntities();
public ActionResult Index()
{
return View(_db.DataPointsSet.ToList());
}
}
}
Modify the View (Index.cshtml) as shown below.
<div id="chartContainer"></div>
<script type="text/javascript">
var result = @Html.Raw(ViewBag.DataPoints);
var dataPoints =[];
for(var i = 0; i < result.length; i++){
dataPoints.push({label:result[i].x, y:result[i].y});
}
$(function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
zoomEnabled: true,
animationEnabled: true,
title: {
text: "Line Chart with Data-Points from DataBase"
},
data: [
{
type: "line",
dataPoints: dataPoints,
}
]
});
chart.render();
});
</script>
Now build and run the project to see charts being rendered from database!
To summarize, in order to render data from database you need to fetch data from database, parse it to CanvasJS supported format and then pass the dataPoints to the chart. For more info on ASP.Net MVC Models and Data-Access, refer this link.
Below is the compilation of final code. Sample provided above includes some of the auto-generated (by visual studio) files as well.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DataFromDataBase</title>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
var result = @Html.Raw(ViewBag.DataPoints);
var dataPoints =[];
for(var i = 0; i < result.length; i++){
dataPoints.push({label:result[i].x, y:result[i].y});
}
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
zoomEnabled: true,
animationEnabled: true,
title: {
text: "Line Chart with Data-Points from DataBase"
},
data: [
{
type: "line",
dataPoints: dataPoints,
}
]
});
chart.render();
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ASPNET_MVC_Samples.Controllers
{
public class HomeController : Controller
{
public ActionResult DataFromDataBase()
{
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 };
}
}
//------------------------------------------------------------------------------
// <auto-generated>
// 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.
// </auto-generated>
//------------------------------------------------------------------------------
namespace ASPNET_MVC_Samples.Models
{
using System;
using System.Collections.Generic;
public partial class Point
{
public int x { get; set; }
public Nullable<int> y { get; set; }
}
}
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix