Dec 19

Google Visualization Charts using jQuery and ASP.NET MVC – Part 1(Bar and Column)

Google Visualization Charts using jQuery and ASP.NET MVC – Part 1(Bar Chart)

1. Introduction

Chart is also called as graph and it is graphical representation of data. Chart can usually be read more quickly than the row data. Chart is the greatest and simplest way to express data to user or management persons. Charts are very common in all type of business requirement. In one of my assignment there were the functionality of organization chart display. I googled and explored various approaches to find the solution and found interesting article on google i.e. Google Charts. The google chart tools are powerful and easy to use. Google also provides different type of rich gallery of interactive charts and data tools.

In previous article we discussed Organization Chart using google visualization chart. In this article I will explain how google visualization charting tool useful for displaying Bar and Column chart using ASP.NET MVC.

Click here to view basic concept of Charts. The Overview section will explain The details about various parts or concepts of a chart.

2. Overview

In my careers starting days with ASP.NET, I remember we used different type of third party control to implement chart functionality in applications. But now using different open source library provides inbuilt support for different Chart in a very simpler fashion. The Google Charts shows how we can display Bar and Column Chart in very simpler manner .
Google charts provides a perfect way to visualize data on your website. The google chart gallery provides number of ready-to-use chart types. The most common way to use Google Charts is with simple JavaScript that you embed in your web page. You load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a <div> with that id to display the Google Chart. Google Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility and cross platform portability to iPhones, iPads and Android.

All chart types are populated with data using the DataTable class, making it easy to switch between chart types as you experiment to find the ideal appearance. The DataTable provides methods for sorting, modifying, and filtering data, and can be populated directly from your web page, a database, or any data provider supporting the Chart Tools Datasource protocol.
It uses below simple steps.
1.       Load AJAX API library from Google Chart website
2.       Load the Visualization API and the required package.
3.       Set a callback to run when the Google Visualization API is loaded.
4.       Callback that creates and populates a data table, instantiates the required chart, passes in the data and draws it.
5.       Create the data table.
6.       Set chart options
7.       Instantiate and draw our chart, passing in some options.
8.       Create Div that will hold the required chart

3. Practical Implementation

There are multiple ways to achieve charting functionality. You can create chart using arrays, database query or using xml data. Below example explains how to create chart using json arrays result.

First you should,

Download the loader.js and jsapi.js javascript library to your project or you give reference of this library in your ASP.NET MVC page.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Step 1: Download library to your projects script folder and create bundle in BundleConfig.cs file.
bundles.Add(new ScriptBundle(“~/bundles/googleChart”).Include(
                 “~/Scripts/loader.js”, “~/Scripts/jsapi.js”
                        ));
 
Step 2: Create Razor engine view page and refer the above bundle file.
@{
              ViewBag.Title = “Google Visualization Chart”;
}
@Scripts.Render(“~/bundles/googleChart”)
<div style=”padding-top:50px;“></div>
<div id=”columnChartDiv”></div>
<div style=”padding-top:50px;“></div>
<div id=”barChartDiv”></div>
Step 3: Create or write javascript and refer on page.
<script type=”text/javascript”>
     google.charts.load(‘current’, { packages: [‘corechart’, ‘bar’] });
     google.charts.setOnLoadCallback(drawBarChartAjax);
     functiondrawBarChartAjax() {
         $.ajax({
             type: “GET”,
             contentType: “application/json; charset=utf-8”,
             url: “Home/BarChart”,
             data: “{}”,
             dataType: “json”,
             cache: true,
             success: function (result) {
                 drawBarChart(result);
             },
             error: function (result) {
                 alert(“Error”);
             }
         });
     }
     //This function used to display chart using google visualization API(Application Programming Interface)
     functiondrawBarChart(jsonResult) {   
         var xAxis = [];
         var yAxis = [];
         var items = [];
         var rows = [];
         xAxis.push(jsonResult.XAxisTitle);
         $.each(jsonResult.Series, function (i, series) {
             xAxis.push(series.name);
         });
         $.each(jsonResult.XAxisCategories, function (i, cat) {
             yAxis.push(cat);
             $.each(jsonResult.Series, function(keySeries, series) {
                 yAxis.push(series.data[i]);
             });
             items.push(yAxis);
             yAxis = [];
         });
         //final table
         rows.push(xAxis);
         $.each(items, function (j, val) {
             rows.push(val);
         });
         var data = newgoogle.visualization.arrayToDataTable(rows);
         //This is the data format that we need
         //var data = new google.visualization.arrayToDataTable([
         //  [‘Region’, ‘Year 1800’, ‘Year 1900’, ‘Year 2012’],
         //  [‘Africa’, 107, 133, 1052],
         //  [‘America’, 31,156 , 954],
         //  [‘Asia’, 635, 947, 4250],
         //  [‘Europe’, 203, 408, 740],
         //  [‘Oceania’, 2, 6, 38]
         //]);
         // To display column chart
         var optionsColumnChart = {
             chart: {
                 title: jsonResult.Title,
                 subtitle: jsonResult.SubTitle
             },
             hAxis: {
                 title: jsonResult.XAxisTitle
             },
             vAxis: {
                 title: jsonResult.YAxisTitle,
                 minValue: 0,
                
             },
             bars: ‘vertical’
         };
         chart = newgoogle.visualization.ColumnChart(document.getElementById(‘columnChartDiv’));
         chart.draw(data, optionsColumnChart);
         // To Display bar chart
         varoptionsBarChart = {
             chart: {
                 title: jsonResult.Title,
                 subtitle: jsonResult.SubTitle
             },
             hAxis: {
                 title: jsonResult.YAxisTitle,
                 minValue: 0,
             },
             vAxis: {
                 title: jsonResult.XAxisTitle
             },
             bars: ‘horizontal’
         };
         chart = new google.visualization.BarChart(document.getElementById(‘barChartDiv’));
         chart.draw(data, optionsBarChart);
     }
</script>
Step 4: Create appropriate model to display data. We already discussed this model in my previous highchart post. So utilizing same code here as well.
    public class SeriesModel<T>
    {
        public string name { get; set; }
        public ICollection<T> data { get; set; }
    }
    public class ChartModel<T>
    {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string[] XAxisCategories { get; set; }
        public stringXAxisTitle { get; set; }
        public stringYAxisTitle { get; set; }
        public stringYAxisTooltipValueSuffix { get; set; }
        public ICollection<SeriesModel<T>> Series { get; set; }
    }
 
Step 5: Create controller file and create action do display result. We already discussed this controller code in my previous highchart post. So utilizing same code here as well.
public ActionResult Index()
        {
            return View();
        }
        public JsonResultBarChart()
        {
            varbarChartModel = new ChartModel<int>
            {
                Title = “Historic World Population by Region”,
                Subtitle = “Source: <a href=’https://en.wikipedia.org/wiki/World_population’>Wikipedia.org</a>”,
                XAxisCategories = new string[] { “Africa”, “America”, “Asia”, “Europe”, “Oceania” },
                XAxisTitle = “Region”,
                YAxisTitle = “Population (millions)”,
                YAxisTooltipValueSuffix = ” millions”,
                Series = new List<SeriesModel<int>> {
                    new SeriesModel<int>{ name = “Year 1800”, data = new int[]{ 107, 31, 635, 203, 2 }},
                    new SeriesModel<int>{ name = “Year 1900”, data = new int[]{ 133, 156, 947, 408, 6 }},
                    new SeriesModel<int>{ name = “Year 2012”, data = new int[]{ 1052, 954, 4250, 740, 38 }}
                }
            };
            returnJson(barChartModel, JsonRequestBehavior.AllowGet);
        }
Step 6: Now, run the application to display Bar and Column Chart respectively.
 
I hope you enjoyed the sample code that I provided. I would suggest you to play something around the code and theme.

4. Summary

Using Google Visualization Chart tool, it is very easy to show chart in your ASP.NET MVC application. In this article, I showed you how to create a Bar and Column Chart in ASP.NET MVC. Hopefully you will enjoy this article too. In my next blog post article, I will explain how Google Visualization Chart tools are useful to display Pie, 3D and Donut Charts in ASP.NET MVC.

5. Download Code

 

 

Click here to download the source code of this assignment.

Leave a Reply