How To Create jqPlot Charts With ASP.NET MVC 4

Introduction

In this post, I will explain to you how to create charts with jqPlot jQuery Plugin in ASP.NET MVC 4 using C# and Entity Framework, JSON.

What is JqPlot?

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar, and pie charts, with many features:

  • Numerous chart style options.
  • Date axes with customizable formatting.
  • Up to 9 Y axes.
  • Rotated axis text.
  • Automatic trend line computation.
  • Tooltips and data point highlighting.
  • Sensible defaults for ease of use.

    JqPlot

In this example, we will see how to use PieChart jqPlot.

SQL Database part

Create Table

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

Table

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

Table

Create your MVC application

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

 MVC application

 MVC application

Creating ADO.NET Entity Data Model

In this level, we need to create an Entity Data Model which allows us to retrieve data from 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.

database

Finally, we see that EDMX model generates Populations class.

EDMX model

Create a controller

Now, we proceed to creating a controller. Right click on the controller folder > Add > Controller > Enter Controller name (‘Home Controller’).

Create a 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 JqPlot_ASP.NET_MVC4.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.   
  12.         //DbContext  
  13.         private Db_PersonEntities db = new Db_PersonEntities();  
  14.   
  15.         // PieChart  
  16.         //  
  17.         // GET: /Home/  
  18.   
  19.         public ActionResult PieRenderer()  
  20.         {  
  21.             return View();  
  22.         }  
  23.   
  24.   
  25.         public JsonResult GetPieRenderer()  
  26.         {  
  27.             var DbResult = from d in db.Populations  
  28.                            select new  
  29.                            {  
  30.                                d.COUNTRY_NAME_P,  
  31.                                d.POPULATION_P  
  32.                            };  
  33.   
  34.             return Json(DbResult, JsonRequestBehavior.AllowGet);  
  35.         }  
  36.   
  37.     }  
  38. }  
As you can see, I am creating GetPieRenderer() action to retrieve the data from Populations table as JSON format.

Creating a strongly typed view

We are going to create a strongly typed View.

view

PieRenderer.cshtml
  1. @model JqPlot_ASP.NET_MVC4.Populations  
  2.   
  3. @{  
  4.     ViewBag.Title = "PieRenderer";  
  5. }  
  6.   
  7. <h2>PieRenderer</h2>  
  8.   
  9.   
  10.   
  11. <div id="chartdiv" style="height: 400px; width: 500px;"></div>  
  12.   
  13. @section scripts {  
  14.   
  15.     <!-- CSS  -->  
  16.     <link href="~/Content/jquery.jqplot.min.css" rel="stylesheet" />  
  17.   
  18.     <!-- Scripts JS  -->  
  19.     <script src="~/Scripts/jquery-1.7.1.min.js"></script>  
  20.     <script src="~/Scripts/jquery.jqplot.min.js"></script>  
  21.     <script src="~/Scripts/jqplot.pieRenderer.js"></script>  
  22.   
  23.   
  24.   
  25.     <script type="text/javascript">  
  26.          
  27.   
  28.         $(document).ready(function () {  
  29.   
  30.             $.ajax({  
  31.                 type: "POST",  
  32.                 url: "Home/GetPieRenderer",  
  33.                 contentType: "application/json; charset=utf-8",  
  34.                 dataType: "json",  
  35.                 success: OnSuccess,  
  36.                 error: OnError  
  37.             });  
  38.   
  39.             function OnSuccess(response) {  
  40.   
  41.                 var aData = response;  
  42.                 var dataArray = [];  
  43.   
  44.                 $.each(aData, function (i, item) {  
  45.                     dataArray.push([item.COUNTRY_NAME_P, item.POPULATION_P]);  
  46.                 });  
  47.   
  48.                 
  49.   
  50.                 var plot1 = jQuery.jqplot('chartdiv', [dataArray],  
  51.                     {  
  52.                         seriesDefaults: {  
  53.                             // Make this a pie chart.  
  54.                             renderer: jQuery.jqplot.PieRenderer,  
  55.                             rendererOptions: {  
  56.                                 sliceMargin: 4,  
  57.                                 // Put data labels on the pie slices.  
  58.                                  
  59.                                 showDataLabels: true  
  60.                             }  
  61.                         },  
  62.                         legend: { show: true, location: 'e' }  
  63.                     }  
  64.                 );  
  65.   
  66.             }  
  67.             function OnError(response) {  
  68.                 alert("Error !");  
  69.             }  
  70.              
  71.         });  
  72.   
  73.     </script>  
  74.       
  75. }  
Output

Output

For any details related jqPlot, you can use the link below:

URL: jqplot