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?

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" />
  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;
  7. namespace ChartistJSMVC4.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. //DbContext
  12. private Db_PersonEntities db = new Db_PersonEntities();
  15. //
  16. // GET: /Home/
  18. public ActionResult Index()
  19. {
  20. return View();
  21. }
  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. };
  33. return Json(DbResult, JsonRequestBehavior.AllowGet);
  34. }
  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
  3. @{
  4. ViewBag.Title = "Chartist MVC 4";
  5. }
  7. <h2>Chartist MVC 4 </h2>
  10. <div class="ct-chart ct-golden-section"></div>
  12. @section scripts{
  14. <!-- CSS -->
  15. <link href="~/Content/chartist.min.css" rel="stylesheet" />
  17. <!-- Scripts JS -->
  18. <script src="~/Scripts/chartist.min.js"></script>
  19. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  22. <script type="text/javascript">
  24. $(document).ready(function () {
  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. });
  36. function OnSuccess(response) {
  38. var result = response;
  39. var arrayLabels = [], arraySeries = [];
  41. $.map(result, function (item, index) {
  43. arrayLabels.push(item.COUNTRY_NAME_P);
  44. arraySeries.push(item.POPULATION_P);
  45. });
  48. var data = {
  50. labels: arrayLabels,
  51. series: arraySeries
  52. }
  55. new Chartist.Pie('.ct-chart', data, { donut: true });
  56. }
  58. function OnError(response) {
  59. alert("Error !");
  60. }
  62. });
  64. </script>
  66. }
Output

Output

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

URL: Chartist-js