ASP.NET MVC 5 - JavaScript C3 Chart Library📊 - Generate Gauge Chart And Customize It

Introduction

 

In this article, I will demonstrate how to generate a Gauge Chart using C3 Chart JavaScript Library to view the population stats by gender from a database using Entity Framework in ASP.NET MVC5. Gauge Chart supports three types of values - Min, Max, and Data. By default, min parameter would be a 0 and will show the value in %. Here, we are going to assign the total population value as Max and gender values as data. Okay, let us move forward to generate the chart.

 

Prerequisites

• Visual Studio
• SQL Server
• Basic Knowledge of ASP.NET MVC
• Basic Knowledge of Entity Framework
• Basic Knowledge of jQuery
• Basic Knowledge of CSS

Article Flow

• Create a table in a database with the list of the population by gender and write a stored procedure.
• Create ASP.NET MVC Empty project
• Configure Entity Framework with database and application
• Create a Controller and View
• Install C3 chart from NuGet and enable it in our application
• Generate Gauge Chart
• Customize Chart

Create a table in a database with the list of the population by gender and write a stored procedure

 

First, we will create a table in SQL Server to generate a gauge chart with the gender population in ASP.NET MVC Web application. I have created a table called "Population" with the following design.

 

 

 

Execute the below query to create a table with the above design.

CREATE TABLE [dbo].[Population](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[Male] [float] NULL,
[Female] [float] NULL,
[Others] [float] NULL,
[Country] [nvarchar](50) NULL,
[MonthAndYear] [datetime] NULL,
CONSTRAINT [PK_Population] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

And now, add a few dummy values to view in the gauge chart. I have added some rows as shown below.

 

 

 

To add these dummy data values of the population by gender, execute the below insert queries.

USE [CSharpCorner]
GO
SET IDENTITY_INSERT [dbo].[Population] ON
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (1, 150, 200, 10, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (2, 200, 100, 5, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (3, 200, 300, 4, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (4, 300, 150, 7, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (5, 400, 300, 6, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (6, 200, 500, 3, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (7, 100, 200, 2, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (8, 300, 100, 8, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (9, 500, 200, 6, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (10, 300, 100, 11, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
INSERT [dbo].[Population] ([Id], [Male], [Female], [Others], [Country], [MonthAndYear]) VALUES (11, 100, 50, 10, N'India', CAST(N'2018-12-12T02:16:13.380' AS DateTime))
GO
SET IDENTITY_INSERT [dbo].[Population] OFF
GO

Create ASP.NET MVC Empty project 

• To create an ASP.NET MVC empty project, follow the below steps one by one. Here, I have used Visual Studio 2017.
• Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "GaugeChartDemo".
• Now, click OK.
• Then, select Empty ASP.NET MVC template and click OK to create the project.
• Once you click OK, the project will be created with the basic architecture of MVC. If you are not aware of how to create an Empty ASP.NET Web Application, please visit  Step 1 and Step 2 to learn.

Once you complete these steps, you will get the screen as below.

 

 

 

Configure Entity Framework with database and application

 

Here, I have already discussed how to configure and implement a database-first approach. In the meantime, choose your created table with Entity Framework. Once we do our configuration with SQL table "Population" from CSharpCorner database and with our application, we will get the below screen as the succeeding configuration.

 

 

 

Create a Controller and View

 

Now, create an empty Controller and View. Here, I created a Controller with the name of "GaugeController". Whenever we create an empty Controller, it is created with an empty Index action method. And create an empty View of this action method "Index".

 

Install C3 chart from NuGet and enable it in our application

 

I discussed C3 Installation and integration in  My Article.

 

Generate a Gauge Chart Controller

 

Now, write the logic in your Controller to fetch the data from the database and return that data as JSON to the View. In the below code, you can see that I have created a "GaugeChart" action to fetch the data from the database using Entity Framework and SqlQuery.Before that let's write the Logic using stored procedures to get the sum of male, female, others and total population.

USE [CSharpCorner]
GO
/****** Object: StoredProcedure [dbo].[GAUGE_CHART_sp] Script Date: 12/22/2018 12:02:57 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[GAUGE_CHART_sp]
AS
BEGIN
select SUM(Male) as Male, SUM(Female) as Female,SUM(Others) as Others, SUM(Male)+SUM(Female)+SUM(Others) as Total from Population
END

Now, execute the stored procedure. Let's render this result in the chart.

 

 

 

Now write the logic in the controller to get the value from the database.

public ActionResult GaugeChart() {
    CSharpCornerEntities entities = new CSharpCornerEntities();
    var test = entities.Database.SqlQuery < GenderPopulation > ("exec GAUGE_CHART_sp").ToList();
    return Json(test, JsonRequestBehavior.AllowGet);
}

Use the Below model to bind the data.

public class GenderPopulation {
    public Nullable < double > Male {
        get;
        set;
    } = 0;
    public Nullable < double > Female {
        get;
        set;
    } = 0;
    public Nullable < double > Others {
        get;
        set;
    } = 0;
    public Nullable < double > Total {
        get;
        set;
    } = 0;
}

View

 

In View, add a Controller which will act as a gauge chart in our application. For that, I have added one div with the name of GaugeChart.

<div id="GaugeChart"></div>

Script

 

Now, write the logic in jQuery AJAX to get the JSON data from your controller action. In the below code, you can see that we are trying to retrieve the data from BarChart action under chart controller.

$.ajax({
    type: "GET",
    url: "/Gauge/GaugeChart",
    data: {},
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
        successFunc(response);
    },
});

After getting JSON data from our controller, bind the JSON data to the chart as below.

 

c3.generate({ -> This is the predefined keyword c3 charts to generate charts on respective controls

 

bindto: '#GaugeChart', -> Changing our div control to Bar chart control or all bar chart features will bind to this control

 

columns: [['Male', jsondata[0].Male]-> We are getting values of males in first row

 

max: jsondata[0].Total, -> we did set the max value for gauge chart 

 

jsondata[0] -> We have only one row in json result; that's why we mentioned [0] to get first row value

 

type: 'gauge' -> It's to mention the type of chart we wanted to generate

 

color: {pattern: -> Combination color will be applied to our chart

function successFunc(jsondata) {
    var chart = c3.generate({
        bindto: '#GaugeChart',
        data: {
            columns: [
                ['Male', jsondata[0].Male]
            ],
            type: 'gauge',
        },
        gauge: {
            max: jsondata[0].Total,
            label: true
        },
        color: {
            pattern: ['#FF0000', '#F97600'],
        },
    });
}

Now run your application

 

 

Now, view all gender population by setting the timeout in JavaScript.

setTimeout(function() {
    chart.load({
        columns: [
            ['Female', jsondata[0].Female]
        ]
    });
}, 1000);
setTimeout(function() {
    chart.load({
        columns: [
            ['Others', jsondata[0].Others]
        ]
    });
}, 2000);

Now, run your application.

 

 

Customize Chart

 

   Let's do some customization on this gauge chart. 

• Change color of Min Value Label  
  

  .c3-chart-arcs .c3-chart-arcs-gauge-min {
     fill: black;
  }

• Change color of Max Value Label   
  

  .c3-chart-arcs .c3-chart-arcs-gauge-max {
     fill: red;
  }

• Change color of % (data) Value 
  

  .c3-chart-arc .c3-gauge-value {
     fill: teal;
  }

Run your Application, In below image you can see that label has been changed.

 

 

Complete View 

@ {
    ViewBag.Title = "Chart";
    Layout = "~/Views/Shared/_Layout.cshtml";
} < style > .c3 - chart - arcs.c3 - chart - arcs - gauge - min {
    fill: black;
}.c3 - chart - arcs.c3 - chart - arcs - gauge - max {
    fill: red;
}.c3 - chart - arc.c3 - gauge - value {
    fill: teal;
} < /style> < br / > < div id = "GaugeChart" > < /div> < script type = "text/javascript" > $(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "/Gauge/GaugeChart",
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            successFunc(response);
        },
    });

    function successFunc(jsondata) {
        var chart = c3.generate({
            bindto: '#GaugeChart',
            data: {
                columns: [
                    ['Male', jsondata[0].Male]
                ],
                type: 'gauge',
            },
            gauge: {
                max: jsondata[0].Total,
                label: true
            },
            color: {
                pattern: ['#F97600'],
            },
        });
        setTimeout(function() {
            chart.load({
                columns: [
                    ['Female', jsondata[0].Female]
                ]
            });
        }, 1000);
        setTimeout(function() {
            chart.load({
                columns: [
                    ['Others', jsondata[0].Others]
                ]
            });
        }, 2000);
    }
}); < /script>

_Layout.cshtml 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/c3.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/c3.min.js"></script>
    <script src="~/Scripts/d3.min.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> @Html.ActionLink("Gauge Chart", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content"> @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
</body>

</html>

Complete Controller

using GaugeChartDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace GaugeChartDemo.Controllers {
    public class GaugeController: Controller {
        // GET: Gauge
        public ActionResult Index() {
            return View();
        }
        public ActionResult GaugeChart() {
            CSharpCornerEntities entities = new CSharpCornerEntities();
            var test = entities.Database.SqlQuery < GenderPopulation > ("exec GAUGE_CHART_sp").ToList();
            return Json(test, JsonRequestBehavior.AllowGet);
        }
        public class GenderPopulation {
            public Nullable < double > Male {
                get;
                set;
            } = 0;
            public Nullable < double > Female {
                get;
                set;
            } = 0;
            public Nullable < double > Others {
                get;
                set;
            } = 0;
            public Nullable < double > Total {
                get;
                set;
            } = 0;
        }
    }
}

Refer to the attached project for reference and I did attach the demonstrated project without a package due to the size limit.

 

Summary

 

In this article, we have seen how to generate a C3 Gauge Chart in our ASP.NET MVC5 web application with JSON data using Entity Framework.

 

I hope you enjoyed this article. Your valuable feedback and comments about this article are always welcome.