Using jqxChart With ASP.NET MVC 4

In this article, we will see how we can use jqxChart in MVC application.

Introduction

 

In this post, I will explain to you how we can use jqxChart control in MVC4 application, using C# and Entity Framework, JSON.

 

What is jqxChart?

 

jqxChart is an easy to use chart widget based on the popular jQuery library. It is written 100 percent in JavaScript and uses W3C standards, like HTML5, CSS and SVG. jqxChart provides optimal chart rendering performance and high quality visualization across browsers and devices (PCs, Laptops, Tablets and Mobile phones).

 

Set up database

 

Firstly, we need to create a table, as shown below:

 

 

 

In the next step, you can fill it with the following rows.

 

 

 

Create your MVC application

 

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

 

 

 

 

 

Creating ADO.NET Entity Data Model

 

In this step, we proceed to generate our Entity Data Model.

 

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

 

 

 

Now, select your server name and your database.

 

 

 

If you have followed all steps described above, you will see that EDMX model generates Browsers class.

 

 

Create a Controller

 

Right click on the controller folder > Add > Controller > Enter Controller name (‘HomeController’).

 

 

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace jqxChartMVC4.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        //Db Context
        private Db_PersonEntities db = new Db_PersonEntities();


        public JsonResult GetBrowsers()
        {
            var DbResult = from d in db.Browsers
                           select new
                           {
                               d.Browser,
                               d.Share
                           };

            return Json(DbResult, JsonRequestBehavior.AllowGet);
        }

    }
}

Creating a strongly typed View

 

 

 

Index.cshtml 

@model jqxChartMVC4.Browsers

@{
    ViewBag.Title = "Pie Series";
}

<h2>Browsers Share</h2>

<div id="chartDiv" style="width:700px; height:400px;">
</div>

@section scripts{

    <!-- CSS -->
    <link href="~/Content/jqx.base.css" rel="stylesheet" />




 <!-- Scripts JS that should be included for using jqxChart control -->

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jqxcore.js"></script>
    <script src="~/Scripts/jqxdraw.js"></script>
    <script src="~/Scripts/jqxchart.core.js"></script>
    <script src="~/Scripts/jqxdata.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data as an array
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Browser' },
                    { name: 'Share' }
                ],

                // calling GetBrowsers action
                url: 'Home/GetBrowsers '
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // prepare jqxChart settings
            var settings = {
                title: "Browsers Share",
                description: "",
                enableAnimations: true,
                showLegend: false,
                showBorderLine: true,
                legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'donut',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 120,
                                        initialAngle: 15,
                                        radius: 170,
                                        innerRadius: 70,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#chartDiv').jqxChart(settings);

        });
    </script>

}

Output

 

 

For more details related to jqxChart, you can use the following link:

 

jqxChart Documentation