Using Google Charts in ASP.NET MVC (With Pie Chart Example)

: 16336

Last Updated : 14/12/2022

Posted By :- vikas_jk

When we are developing any web-application, we usually have a dashboard in the Admin panel, to show sales reports in a Chart or say a number of items sold this week, earnings of the last week vs the current week, the total number of new users signed up for the application etc.So to provide better and quick visualization of these data, we need to create charts in our application, and in this article, I am going to demonstrate you, how to show live data from database & integrate it in Google Chart(pie chart) using your ASP.NET MVC application(in JSON format).

Google Chart API provides many types of charts in which we can represent the data in the application. Some of them are given below:

Geo Chart
Column Chart
Bar Chart
Line Chart
Pie Chart
Area Chart

There are 3 major steps in creating pie(or any other) chart in your web application using Google Charts API

Fetch Data from database using C#(Controller or Web Method)
Get data on front end using jQuery Ajax (in JSON or any other format, we will be using JSON in this example)
Add Columns, Value in google chart Datatable and draw the chart using javascript/jQuery.

Let's create a sample project(GoogleChartExample) for it using Visual Studio 2017(You can use older version also if you don't have VS 2017).

File -> New Project -> Web(Left Hand menu)/Asp.NET Web application (Right hand menu)
Select MVC template for auto-generating basic Controller and View of MVC
Connect your Solution to database using Entity Framework, check this article here if you are new to Edmx
Suppose we have this table in our Database, and we want to show its PostCount data by CategoryName in Google Charts(pie chart here)
Now Press Ctrl+F5, it will build your project and open Index View of HomeController in your default Web-Browser

If you are new to MVC, you can read about the basics of MVC in our previous article
Now, what we need to do here is:

1. to erase this auto-generated HTML
2. create the HTML div for pie chart
3. place the Ajax call while loading the page
4. Fetch data into a List using C#
5. pass this list as a JSON to front end
6. Add this list data in Google Chart API Column using Javascript
7. Draw the Chart from the above-created column's and show it

Note: don't forget to include Google chart scripts into to your View/Application, here is the link <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Go step by step as described above

HTML for Pie Chart in Index view can be

<div id="chartdiv" style="width: 600px; height: 350px;">
</div>

Create an Ajax Call on Load of a View using jQuery to call Controller Method which will return JSON list

//reference of Google charts in javascript
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });

    //Call function after Google Chart is loaded, it is required, otherwise you may get error
    google.charts.setOnLoadCallback(DrawonLoad);
  

    function  DrawonLoad()
    {
        $(function () {
            $.ajax({
                type: 'GET',
                url: '/Home/GetPiechartJSON',
                success: function (chartsdata) {
                    // Callback that creates and populates a data table,
                    // instantiates the pie chart, passes in the data and
                    // draws it.

                    //get JSONList from Object
                    var Data = chartsdata.JSONList;
                    var data = new google.visualization.DataTable();

                    data.addColumn('string', 'CategoryName');
                    data.addColumn('number', 'PostCount');
                    
                    /Loop through each list data
                    for (var i = 0; i < Data.length; i++) {
                        data.addRow([Data[i].CategoryName, Data[i].PostCount]);
                    }

                    // Instantiate and draw our chart, passing in some options
                    var chart = new google.visualization.PieChart(document.getElementById('chartdiv'));

                    //Draw pie chart command with data and chart options
                    chart.draw(data,
                        {
                            title: "Google pie Chart in ASP.NET MVC",
                            position: "top",
                            fontsize: "14px",
                        });

                },
                error: function () {
                    alert("Error loading data! Please try again.");
                }
            });
        })
    
    }
</script>

Create GetPiechartJSON Method in HomeController to fetch data from database, return the data as JSON

    public JsonResult GetPiechartJSON()
        {
            List<BlogPieChart> list = new List<BlogPieChart>();
            using (var context = new BlogDbEntities())
            {
                list = context.Blogs.Select(a=>new BlogPieChart { CategoryName=a.CategoryName, PostCount=a.PostCount }).ToList();

            }

            return Json(new { JSONList=list},JsonRequestBehavior.AllowGet);
        }?

Note: I have created a new Class named as BlogPieChart.cs to get only CategoryName and PostCount, here is the code for it

public class BlogPieChart
    {
        public string CategoryName { get; set; }
        public int? PostCount { get; set; }
    }

Now Run your application using Ctrl+f5, it will open in your browser, and the output would be like

Google-pie-chart-example-in-asp-net-mvc

That's it, you have just created your pie chart using Google charts

Understanding the Javascript code

Although I have explained my javascript code above with comments, I would like to clarify it a bit more

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(DrawonLoad);

the above javascript code loads the google charts on our web page and it will call DrawonLoad a function after charts are loaded, it is required to write above lines, remove it and calling Ajax call directly may throw javascript error "Cannot read property 'DataTable' of undefined" related to Google charts.

var Data = chartsdata.JSONList;
var data = new google.visualization.DataTable();

Above code will Fetch JSONList and creates a variable to initialize datatable of Google Charts

Now add the columns in your Google Charts using, with their data-type

  data.addColumn('string', 'CategoryName');
  data.addColumn('number', 'PostCount');

Below code will help your loop through the data, and add data as a row in Google charts above created datatable

  for (var i = 0; i < Data.length; i++) {
  data.addRow([Data[i].CategoryName, Data[i].PostCount]);
}

After this, we are adding initiating and drawing our chart using the ID and some extra header options

// Instantiate and draw our chart, passing in some options
                    var chart = new google.visualization.PieChart(document.getElementById('chartdiv'));

                    //Draw pie chart command with data and chart options
                    chart.draw(data,
                        {
                            title: "Google pie Chart in ASP.NET MVC",
                            position: "top",
                            fontsize: "14px",
                        });

Making it as 3D Pie Chart

To convert the above Pie Chart in 3d, we just need to make sure "is3D" = true in Google chart options when initializing it, so basically, in the above code, we need to add just one line, as shown below

// Instantiate and draw our chart, passing in some options
                    var chart = new google.visualization.PieChart(document.getElementById('chartdiv'));

                    //Draw pie chart command with data and chart options
                    chart.draw(data,
                        {
                            title: "Google pie Chart in ASP.NET MVC",
                            position: "top",
                            fontsize: "14px",

                            is3D: true // this makes pie chart 3D

                        });

That's we are done if you find any issue in the code, or while creating google chart in your MVC application, feel free to add a comment or ask your question on it, we will help you.

Buy us a coffee

Become a Patron Q Follow our Quora space

Comment

Comment's

mspace

Hello I would like to ask what the Blogs stands for in your linq query ? is another model?

thank you

1/23/2018 9:31:41 AM

Add Comment

vikas_jk

Hi, thanks for your question, as I understand you are pointing this line of code

//this below line Blogs
list = context.Blogs.Select(a=>new BlogPieChart { CategoryName=a.CategoryName, PostCount=a.PostCount }).ToList()

The above Blogs refers to table below, which i have included in the GoogleChartMVC project using Entity framework and ADO.NET

The above table name is Blog, which automatically get's converted to Blogs when added in project using ADO.NET/Entity Framework(.edmx file)

1/23/2018 2:57:06 PM

Add Comment

mspace

Hello thank you for your reply. What if I need to pull data from one field? I mean I have a column named Frequencies and I want to see its data to a pie chart. I try it by change the ling query but no luck!

1/24/2018 10:29:20 AM
Edited at :- 1/24/2018 10:40:29 AM

vikas_jk

Can you comment all the details of your table and columns, also please note you would need at least 2 columns of data to show in Google chart, otherwise, it may throw error not enough data, you can do it like

FrequencyName, FrequencyValue

Here is fiddle example for this http://jsfiddle.net/R5t4U/632/ considering you have two values frequency name and frequency data.

Now about linq issue try this steps, it may work, if not feel free to create a new question and link this, or comment all your details here

I assume you have connected your MVC project with database using Entity Framework & Ado.net(edmx) for now

Use this Query now

 public JsonResult GetPiechartJSON()
        {
            List<PieChartModel> list = new List<PieChartModel>();
            using (var context = new DbEntities())
            {
                list = context.FrequencyColumnTable.Select(a=>new PieChartModel{ Frequencies=a.FrequencyColumn}).ToList();

            }

            return Json(new { JSONList=list},JsonRequestBehavior.AllowGet);
        }?

where PieChartModel is

public class PieChartModel
    {
        
        public int? Frequencies { get; set; }
    }

Now when you are pushing data in array in front end using jquery, you need to push some frequency name(like "A","B"..etc), you can create this arbitrary values depending on length of your returned frequency data, for now i assume it is three

            var Data = [{"Frequencies": "1"},{"Frequencies":"2"},{"Frequencies": "3"}];

            var freqNames = ["A", "B", "C"];
            var data = new google.visualization.DataTable();

            data.addColumn('string', 'DisplayName');
            data.addColumn('number', 'FreqValue');

            //Loop through each list data
            for (var i = 0; i < Data.length; i++) {
                
                data.addRow([freqNames[i], parseInt(Data[i].Frequencies, 10)]);
            }

Load this data into google chart and you are done
Here is the working example for this one https://jsfiddle.net/ecoukvhx/

1/24/2018 1:35:59 PM

mspace

Hello again, thank you very much for your extended answer!

What I need is to display the data from a survey which is included in MVC website. I would like to display values like "Often" "Very Often" "Rare" etc. For each SurveyID I need to display these frequencies in one chart. Is that possible to make it with a loop? Can you help me on this?

Something like

for (i = 0; i < Data.length; i++) {
                            data.addColumn('number', 'ID');

                            for (var i = 0; i < Data.length; i++) {
                           

                                data.addRow([Data[i].frequency]);
                            
                            

                            }
                        }

thank you

1/25/2018 6:49:24 AM
Edited at :- 1/25/2018 7:36:58 AM

Add Comment

vikas_jk

I am not able to get your details, please ask a separate question, link this article, enter your complete details like database structure(a demo data image), current C# code & current front-end jQuery code, explain your issue with complete details, hopefully, I can understand your issue from all the detail and answer on your question.

Also looking at your above code, using single column is not possible

data.addColumn('number', 'ID');

you need at least two column for any type of google chart, your above code only shows one column that is ID and values(Rows) of Frequency.

1/25/2018 8:49:44 AM
Edited at :- 1/25/2018 8:52:11 AM

mspace

ok I put a question here with link to this article...Unfortunately I cannot post more data.

thank you again

1/25/2018 10:08:57 AM
Edited at :- 1/25/2018 10:25:44 AM

Add Comment

Vipin

Great explanation with example, helped me a lot today :)

3/18/2018 6:23:44 AM
Edited at :- 3/18/2018 6:24:07 AM

Add Comment

SK

I have followed all the steps but it is showing json data instaed of google chart.

6/3/2021 2:26:46 PM

Add Comment

vikas_jk

If it is showing JSON data, then there is probably some error when looping JSON in jQuery AJAX Results.

Consider checking these lines of code.

 $.ajax({
                type: 'GET',
                url: '/Home/GetPiechartJSON',
                success: function (chartsdata) {
                   
                    //consider checking these lines of your jQuery Code.
                    var Data = chartsdata.JSONList; //check if you are picking correct object and value.
                    var data = new google.visualization.DataTable();

                    data.addColumn('string', 'CategoryName');
                    data.addColumn('number', 'PostCount');
                    
                    /Loop through each list data
                    for (var i = 0; i < Data.length; i++) {
                        
                        data.addRow([Data[i].CategoryName, Data[i].PostCount]);
                    }

});

You can also check fiddle from above comments, which might give you better details (Not MVC based but JS code might help, static data is used)

6/3/2021 3:26:31 PM