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.
  
  
  

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:



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



Create your MVC application

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





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.





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



Finally, we see that EDMX model generates Populations class.



Create a controller

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



HomeController.cs