ASP.NET MVC 5 - Customizing Bar Chart Using JavaScript C3 Chart Library

Introduction

 

In my previous article, we discussed how to generate a C3 Bar Chart in our ASP.NET MVC5 web application with JSON data using Entity Framework. Now, let us discuss different ways of customization on a Bar Chart using C3 Chart JavaScript Library. The result from the previous article is below,

 

We have seen how to generate a bar chart and a stacked bar chart. Now, let's move forward to do customization on the Bar chart.

 

Customization

 

In the above result, we can see that the x-axis named as auto generates numbers 0,1,3, etc. But here we need to give the proper name for each bar, right? Now, let's give a name to each bar. Here, I planned to generate the stacked bar chart by month and year. So, we need to write the logic to group the data before rendering. So, first let's create a stored procedure with this logic.

 

Stored Procedure  

CREATE PROCEDURE GenderPopulation
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
Select Country,SUM(Male) as Male,SUM(Female) as Female,SUM(Others) as Others,FORMAT(MonthAndYear,'MMM-yyyy') AS MonthYr from [dbo].[Population]group by FORMAT(MonthAndYear,'MMM-yyyy'), Country
END
GO

Here, I am grouping the data by month and year, in the below image you can see the result. Now, we will give the MonthYr column data as x-axis name for each bar.

 

 

 

Execute the stored procedure from our MVC controller using entity framework SQL Query as below,

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

We are binding the returned data to our custom model, the custom model named it as  "GenderPopulation" and it's created as below,

public class GenderPopulation {
    public Nullable < double > Male {
        get;
        set;
    }
    public Nullable < double > Female {
        get;
        set;
    }
    public Nullable < double > Others {
        get;
        set;
    }
    public string Country {
        get;
        set;
    }
    public string MonthYr {
        get;
        set;
    }
}

In the script, we will put this date in array  catagories in each bar. Here, the jsondata represents a success response from our controller,

var MonthYr = [];
jsondata.forEach(function(e) {
    MonthYr.push(e.MonthYr);
})

Now, the MonthYr array holds a list of grouped dates. Now, we have to catagories the chart in the x-axis. In the below code type 'category' is the predefined keyword and the next parameter categories value is our array.

axis: {
    x: {
        type: 'category',
        categories: MonthYr,
    }
},

Now, run the application, In the below image we can see that we have got the required name for each bar.

 

 

Types 

 

Now, we can check the male population from start date to the last date, so we can use the type param to see that. Here, I wanted to see the the male population. 

types: {
   Male: 'area',
},

Now, run your application, take a look at the below image, the male population is clear to see from the start date to the last date.

 

 

Now, we shall add the female in this type with 'area-spline' type.

types: {
   Male: 'area',
   Female: 'area-spline'
},

Run your application, now we can can see who has a higher  count.

 

 

axis.x.tick.rotate

 

Our x-axis name is not a single line, right? Now, we are going to rotate those x-axis catagory, as per our need so we increase or decrease the rotation length, 

axis: {
    x: {
        type: 'category',
        categories: MonthYr,
        tick: {
            rotate: 50
        },
    }
},

Run your application. In the below result we can see that x-axis catagory has been rotated,

 

 

Complete controller

using Piechart.Models;
using System;
using System.Linq;
using System.Web.Mvc;
namespace Barchart.Controllers {
    public class ChartController: Controller {
        // GET: Chart
        public ActionResult Index() {
            return View();
        }
        public ActionResult BarChart() {
            CSharpCornerEntities1 entities = new CSharpCornerEntities1();
            var test = entities.Database.SqlQuery < GenderPopulation > ("exec GenderPopulation").ToList();
            return Json(test, JsonRequestBehavior.AllowGet);
        }
        public class GenderPopulation {
            public Nullable < double > Male {
                get;
                set;
            }
            public Nullable < double > Female {
                get;
                set;
            }
            public Nullable < double > Others {
                get;
                set;
            }
            public string Country {
                get;
                set;
            }
            public string MonthYr {
                get;
                set;
            }
        }
    }
}

View and Script

@ {
    ViewBag.Title = "Index";
} < br / > < br / > < div id = "Barchart" > < /div> < script type = "text/javascript" > $(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "/Chart/BarChart",
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            successFunc(response);
        },
    });

    function successFunc(jsondata) {
        var MonthYr = [];
        jsondata.forEach(function(e) {
            MonthYr.push(e.MonthYr);
        })
        var chart = c3.generate({
            bindto: '#Barchart',
            data: {
                json: jsondata,
                keys: {
                    value: ['Male', 'Female', 'Others'],
                },
                columns: ['Male', 'Female', 'Others'],
                type: 'bar',
                groups: [
                    ['Male', 'Female', 'Others']
                ],
                types: {
                    Male: 'area',
                    Female: 'area-spline'
                },
            },
            axis: {
                x: {
                    type: 'category',
                    categories: MonthYr,
                    tick: {
                        rotate: 50
                    },
                }
            },
            color: {
                pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
            },
        });
    }
}); < /script>

Stored Procedure 

CREATE PROCEDURE GenderPopulation
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
Select Country,SUM(Male) as Male,SUM(Female) as Female,SUM(Others) as Others,FORMAT(MonthAndYear,'MMM-yyyy') AS MonthYr from [dbo].[Population]group by FORMAT(MonthAndYear,'MMM-yyyy'), Country
END
GO

exec GenderPopulation

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 the different ways of customization on a Bar chart using C3 Chart JavaScript library and chart transmission.

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