Responsive Charts Using ChartistJS In ASP.NET MVC 4

Introduction

In this post, I will explain to you how to create charts with ChartistJS plugin with ASP.NET MVC 4, using C#, Entity framework and JSON.

What is CHARTIST?

  • Chartist.js is the product of a community which was disappointed about the abilities provided by other charting.

    The following facts should give you an overview about why to choose Chartist as your front-end chart generator:

    • Simple handling, while using convention over configuration.
    • Great flexibility, while using clear separation of concerns (Style with CSS & control with JS).
    • Usage of SVG (Yes! SVG is the future of illustration in Web!).
    • Fully responsive and DPI independent.
    • Responsive configuration with the media queries.
    • Fully built and customizable with Sass.

      Chartist.js

Let’s start to create our first responsive chart, using ChartistJS in ASP.NET MVC.

Download ChartistJS library and CSS files

You can download the library included in JS and CSS files directly from the Chartist-js Website.

  1. <!-- CSS -->  
  2. <link href="~/Content/chartist.min.css" rel="stylesheet" />  
  3.   
  4. <!-- Scripts JS -->  
  5. <script src="~/Scripts/chartist.min.js"></script>  
  6. <script src="~/Scripts/jquery-1.7.1.min.js"></script>  
SQL database part

Create Table

You will find the table, given below, used in our Application:

Create Table

After creating the table, you can fill it, using the data, as shown below:

Create Table

Create your MVC Application

Open Visual Studio. Click File > New > Project and name your project, as shown below:

MVC application

MVC application

Creating ADO.NET Entity Data Model

Now, we need to create an Entity Data Model, which allows us to retrieve the data from the database.

Right click on the project name. Click Add > Add New Item. In the dialog box displayed, select Data > click Add button.

ADO.NET Entity Data Model

ADO.NET Entity Data Model

After clicking Next button, the dialog box will be displayed, as shown below. You need to choose your Server name and select your database.

server name

Finally, we see that EDMX model will generate Populations class.

class

Create a controller

We proceed to create a controller. Right click on the controller folder > Add > Controller > enter Controller name (‘Home Controller’).

controller

HomeController.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace ChartistJSMVC4.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //DbContext  
  12.         private Db_PersonEntities db = new Db_PersonEntities();  
  13.   
  14.   
  15.         //  
  16.         // GET: /Home/  
  17.   
  18.         public ActionResult Index()  
  19.         {  
  20.             return View();  
  21.         }  
  22.   
  23.         public ActionResult GetPopulation()  
  24.         {  
  25.             var DbResult = from d in db.Populations  
  26.                            select new  
  27.                            {  
  28.                                d.COUNTRY_NAME_P,  
  29.                                d.POPULATION_P  
  30.                            };  
  31.   
  32.   
  33.             return Json(DbResult, JsonRequestBehavior.AllowGet);  
  34.         }  
  35.   
  36.     }  
  37. }  
As you can see, I am creating GetPopulation () action to retrieve the data from Populations table in JSON format.

Creating a strongly typed view

We are going to create a strongly typed view.

strongly typed view

Index.cshtml
  1. @model ChartistJSMVC4.Populations  
  2.   
  3. @{  
  4.     ViewBag.Title = "Chartist MVC 4";  
  5. }  
  6.   
  7. <h2>Chartist MVC 4 </h2>  
  8.   
  9.   
  10. <div class="ct-chart ct-golden-section"></div>  
  11.   
  12. @section scripts{  
  13.   
  14.     <!-- CSS -->  
  15.     <link href="~/Content/chartist.min.css" rel="stylesheet" />  
  16.   
  17.     <!-- Scripts JS -->  
  18.     <script src="~/Scripts/chartist.min.js"></script>  
  19.     <script src="~/Scripts/jquery-1.7.1.min.js"></script>  
  20.   
  21.   
  22.     <script type="text/javascript">  
  23.   
  24.         $(document).ready(function () {  
  25.   
  26.             
  27.             $.ajax({  
  28.                 type: "POST",  
  29.                 url: "Home/GetPopulation",  
  30.                 contentType: "application/json; charset=utf-8",  
  31.                 dataType: "json",  
  32.                 success: OnSuccess,  
  33.                 error: OnError  
  34.             });  
  35.   
  36.             function OnSuccess(response) {  
  37.   
  38.                 var result = response;  
  39.                 var arrayLabels = [], arraySeries = [];  
  40.   
  41.                 $.map(result, function (item, index) {  
  42.   
  43.                     arrayLabels.push(item.COUNTRY_NAME_P);  
  44.                     arraySeries.push(item.POPULATION_P);  
  45.                 });  
  46.                  
  47.   
  48.                 var data = {  
  49.   
  50.                     labels: arrayLabels,  
  51.                     series: arraySeries  
  52.                 }  
  53.   
  54.                   
  55.                 new Chartist.Pie('.ct-chart', data, { donut: true });  
  56.             }  
  57.      
  58.             function OnError(response) {  
  59.                 alert("Error !");  
  60.             }  
  61.             
  62.         });   
  63.   
  64.     </script>  
  65.   
  66. }  
Output

Output

For any details related to ChartistJS, you can use the link, given below:

URL: Chartist-js