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.

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".

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.

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.