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:

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;
  7. namespace JqPlot_ASP.NET_MVC4.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  12. //DbContext
  13. private Db_PersonEntities db = new Db_PersonEntities();
  15. // PieChart
  16. //
  17. // GET: /Home/
  19. public ActionResult PieRenderer()
  20. {
  21. return View();
  22. }
  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. };
  34. return Json(DbResult, JsonRequestBehavior.AllowGet);
  35. }
  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
  3. @{
  4. ViewBag.Title = "PieRenderer";
  5. }
  7. <h2>PieRenderer</h2>
  11. <div id="chartdiv" style="height: 400px; width: 500px;"></div>
  13. @section scripts {
  15. <!-- CSS -->
  16. <link href="~/Content/jquery.jqplot.min.css" rel="stylesheet" />
  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>
  25. <script type="text/javascript">
  28. $(document).ready(function () {
  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. });
  39. function OnSuccess(response) {
  41. var aData = response;
  42. var dataArray = [];
  44. $.each(aData, function (i, item) {
  45. dataArray.push([item.COUNTRY_NAME_P, item.POPULATION_P]);
  46. });
  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.
  59. showDataLabels: true
  60. }
  61. },
  62. legend: { show: true, location: 'e' }
  63. }
  64. );
  66. }
  67. function OnError(response) {
  68. alert("Error !");
  69. }
  71. });
  73. </script>
  75. }
Output

Output

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

URL: jqplot