Implement Google Chart Types In Real Time Scenarios Using ASP.NET MVC

Introduction

Google chart is a better way to visualize the data in your personal Web site.

There is a way to use Google charts with simple JavaScript that you need to embed in your Web page. You use some Google chart libraries, list the data, which will be charted, select options to customize your chart and finally create a chart object with an Id value that you want to select.

Google chart reference photo


Images of Google chart types used in ASP.NET MVC session

Example Of Bubble chart

Example Of Area chart

Example Of Line chart

Example Of Scatter chart

Today, I will tell you how to implement Google chart types used in ASP.NET MVC, using static data.

Step 1

Create one model class file named “Cricket.cs”.

Code Ref

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SatyaGoogleChartMvc.Models
{
    public class CricketModel
    {
        public string CricketYear { get; set; }
        public string CenturyTitle { get; set; }
        public string HalfCenturyTitle { get; set; }
        public Cricket CricketData { get; set; }
    }
    public class Cricket
    {
        public string Year { get; set; }
        public string Century { get; set; }
        public string HalfCentury { get; set; }
    }
}

Code description

Here, I have created two classes CricketModel and Cricket.

In Cricket class, I have put some entities through which I will mention some data, using these entities.

public class CricketModel
    {
        public string CricketYear { get; set; }
        public string CenturyTitle { get; set; }
        public string HalfCenturyTitle { get; set; }
        public Cricket CricketData { get; set; }
    }

CricketModel class contains some entities, using which we can access the data of Cricket class .

public class Cricket
    {
        public string Year { get; set; }
        public string Century { get; set; }
        public string HalfCentury { get; set; }
    }

I mentioned the Cricket Class Reference in CricketModel Class.

public Cricket CricketData { get; set; }

Here CricketData is the object of Cricket class file through which we can access the properties and the values of the entities of it and assigned to CricketModel class.

Step 2

Subsequently, create one controller class file named “GoogleController.cs” .

Code Ref

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SatyaGoogleChartMvc.Models;

namespace SatyaGoogleChartMvc.Controllers
{
    public class GoogleController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Title = "M.S. DHONI GOOGLE SCORE CHART";
            CricketModel objCricketModel = new CricketModel();
            objCricketModel.CricketData = new Cricket();
            objCricketModel.CricketData = CricketChartData();
            objCricketModel.CricketYear = "Year";
            objCricketModel.CenturyTitle = "Century";
            objCricketModel.HalfCenturyTitle = "HalfCentury";
            return View(objCricketModel);
        }
        public Cricket CricketChartData()
        {
            Cricket objcricket = new Cricket();
            objcricket.Year = "2009,2010,2011,2012,2013,2014,2015,2016";
            objcricket.Century = "20,28,12,24,14,18,19,27";
            objcricket.HalfCentury = "42,72,22,12,11,34,13,29";
            return objcricket;
        }
    }
}

Code description

Here, I have mentioned the reference of model class file by putting namespace.

using SatyaGoogleChartMvc.Models;

Here, SatyaGoogleChartMvc is the name of ASP.NET MVC project.

Subsequently, I put some controller action method called Index.

public ActionResult Index()
        {
            ViewBag.Title = "M.S. DHONI GOOGLE SCORE CHART";
            CricketModel objCricketModel = new CricketModel();
            objCricketModel.CricketData = new Cricket();
            objCricketModel.CricketData = CricketChartData();
            objCricketModel.CricketYear = "Year";
            objCricketModel.CenturyTitle = "Century";
            objCricketModel.HalfCenturyTitle = "HalfCentury";
            return View(objCricketModel);
        }

Here, I used Browser Title text.

ViewBag.Title = "M.S. DHONI GOOGLE SCORE CHART";

In CricketModel Class, which is defined in models created an object objCricketModel to access the object properties of Cricket Class i.e. CricketData.

CricketModel objCricketModel = new CricketModel();
objCricketModel.CricketData = new Cricket();

Using the object of CricketModel Class, we can access one Method PROPERTIES and some Text Reference, which has already been defined in Cricket Class file as Entities.

objCricketModel.CricketData = CricketChartData();
objCricketModel.CricketYear = "Year";
objCricketModel.CenturyTitle = "Century";
objCricketModel.HalfCenturyTitle = "HalfCentury";

Subsequently, pass the object of CricketModel class inside Index view.

return View(objCricketModel);

Build a function, using Cricket class.

public Cricket CricketChartData()
        {
            Cricket objcricket = new Cricket();
            objcricket.Year = "2009,2010,2011,2012,2013,2014,2015,2016";
            objcricket.Century = "20,28,12,24,14,18,19,27";
            objcricket.HalfCentury = "42,72,22,12,11,34,13,29";
            return objcricket;
        }

Here, I create an object of Cricket class i.e. objcricket.

Using this, we can assign some static data to the entities defined in Cricket class in Models folder.

Cricket objcricket = new Cricket();
objcricket.Year = "2009,2010,2011,2012,2013,2014,2015,2016";
objcricket.Century = "20,28,12,24,14,18,19,27";
objcricket.HalfCentury = "42,72,22,12,11,34,13,29";
return objcricket;

Step 3

Create one CSHTML file In Google of Views folder named “Index.cshtml”.

Code Ref

@model SatyaGoogleChartMvc.Models.CricketModel

<title>
    @ViewBag.Title
</title>
<fieldset>
    <legend style="font-family:Arial;color:blue;font-size:large">M.S. DHONI's 100s and 50s GOOGLE CHART</legend>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">


        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var Year1 = [@Model.CricketData.Year];
            var Century1 = [@Model.CricketData.Century];
            var HalfCentury1 = [@Model.CricketData.HalfCentury];

            var data = new google.visualization.DataTable();
            data.addColumn('string', '@Model.CricketYear');
            data.addColumn('number', '@Model.CenturyTitle');
            data.addColumn('number', '@Model.HalfCenturyTitle');
            for (i = 0; i < Year1.length; i++) {
                data.addRow([Year1[i].toString(), Century1[i], HalfCentury1[i]]);
            }
            var options = {
                title: 'M.S. DHONI CENTURY AND HALF CENTURY',
                hAxis: {
                    title: '@Model.CricketYear', titleTextStyle: { color: 'blue' }
                       }
            };

            //Different chart types >> AreaChart , BubbleChart ,LineChart ,ScatterChart
            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
    <div id="chart_div" style="width: 1100px; height: 700px;">
    </div>
</fieldset>

Code description

Here, I used the reference of CricketModel Class in View CSHTML file.

@model SatyaGoogleChartMvc.Models.CricketModel

The Browser title text is assigned. It is already mentioned in Controller Class.

<title>
    @ViewBag.Title
</title>

I used one script file that should be responsible to show your data in form of Google chart View.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Again, I have mentioned all class reference entities and style of axis and related properties inside JavaScript tags.

<script type="text/javascript">


        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var Year1 = [@Model.CricketData.Year];
            var Century1 = [@Model.CricketData.Century];
            var HalfCentury1 = [@Model.CricketData.HalfCentury];

            var data = new google.visualization.DataTable();
            data.addColumn('string', '@Model.CricketYear');
            data.addColumn('number', '@Model.CenturyTitle');
            data.addColumn('number', '@Model.HalfCenturyTitle');
            for (i = 0; i < Year1.length; i++) {
                data.addRow([Year1[i].toString(), Century1[i], HalfCentury1[i]]);
            }
            var options = {
                title: 'M.S. DHONI CENTURY AND HALF CENTURY',
                hAxis: {
                    title: '@Model.CricketYear', titleTextStyle: { color: 'blue' }
                       }
            };

            //Different chart types >> AreaChart , BubbleChart ,LineChart ,ScatterChart
            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>

Now, load the Visualization API and the corechart package. 

google.load("visualization", "1", { packages: ["corechart"] });

Subsequently, set a callback to run when Google Visualization API is loaded. 

google.setOnLoadCallback(drawChart);

Callback is the one that creates and populates a data table, instantiates Google chart type, passes the data and draws it.

function drawChart() {
            var Year1 = [@Model.CricketData.Year];
            var Century1 = [@Model.CricketData.Century];
            var HalfCentury1 = [@Model.CricketData.HalfCentury];

            var data = new google.visualization.DataTable();
            data.addColumn('string', '@Model.CricketYear');
            data.addColumn('number', '@Model.CenturyTitle');
            data.addColumn('number', '@Model.HalfCenturyTitle');
            for (i = 0; i < Year1.length; i++) {
                data.addRow([Year1[i].toString(), Century1[i], HalfCentury1[i]]);
            }

Create the data table. 

var data = new google.visualization.DataTable();
          data.addColumn('string', '@Model.CricketYear');
          data.addColumn('number', '@Model.CenturyTitle');
          data.addColumn('number', '@Model.HalfCenturyTitle');
          for (i = 0; i < Year1.length; i++) {
              data.addRow([Year1[i].toString(), Century1[i], HalfCentury1[i]]);
          }

Here, I used some CricketModel and Cricket class entities, using @Model to access its properties and values. 

vayr Year1 = [@Model.CricketData.Year];
data.addColumn('string', '@Model.CricketYear');

Year is the entity of Cricket Class object and CricketYear is the entit of CricketModel class.

Like this, others are defined.

var Year1 = [@Model.CricketData.Year];
            var Century1 = [@Model.CricketData.Century];
            var HalfCentury1 = [@Model.CricketData.HalfCentury];

            var data = new google.visualization.DataTable();
            data.addColumn('string', '@Model.CricketYear');
            data.addColumn('number', '@Model.CenturyTitle');
            data.addColumn('number', '@Model.HalfCenturyTitle');

Here, I have added the data rows in the data table, which is based on the variables assigned in the function defined in script tag.

var Year1 = [@Model.CricketData.Year];
            var Century1 = [@Model.CricketData.Century];
            var HalfCentury1 = [@Model.CricketData.HalfCentury];

for (i = 0; i < Year1.length; i++) {
                data.addRow([Year1[i].toString(), Century1[i], HalfCentury1[i]]);
            }


Set chart options

var options = {
                title: 'M.S. DHONI CENTURY AND HALF CENTURY',
                hAxis: {
                    title: '@Model.CricketYear', titleTextStyle: { color: 'blue' }
                       }
            };

Here, I have put some title of Google chart and Axis text information as year.

title: 'M.S. DHONI CENTURY AND HALF CENTURY',
hAxis: {
title: '@Model.CricketYear', titleTextStyle: { color: 'blue' }

Instantiate and draw our chart, passing in some options.

AreaChart, BubbleChart ,LineChart ,ScatterChart are all Google chart types.

 

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);

Div is the one that will hold Google chart type.

<div id="chart_div" style="width: 1100px; height: 700px;">
</div>

Step 4

Make Start page at time of First Load.

Code Ref

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Google", action = "Index", id = UrlParameter.Optional }
            );

Code Description

It is Google name of the Controller.

There is Index name of Controller Action Method name.

Output

The URL Is,

http://localhost:61715/Google/Index

For Area chart

It displays the data when hovering over the points.

Shows data

For Bubble chart

It displays the data when hovering over bubbles.

Shows data

For Line chart

It displays the data tooltips when hovering over points.

Shows data

For Scatter chart

Scatter charts points on a graph. When the user hovers over the points, DATA tooltips are displayed with more information.

Shows data

See the Browser Title Bar Text, as mentioned in the code.

ViewBag.Title = "M.S. DHONI GOOGLE SCORE CHART";

Different types of Google chart are shown earlier, which can be mentioned and changed, which is based on the requirement.

In Index.Cshtml, the code is given below.

var chart = new google.visualization.AreaChart (document.getElementById('chart_div'));
var chart = new google.visualization.BubbleChart (document.getElementById('chart_div'));
var chart = new google.visualization.LineChart (document.getElementById('chart_div'));
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

AreaChart, BubbleChart ,LineChart ,ScatterChart are all Google chart types.

Summary

What is Google Chart?

How To Add Google chart In real time ASP.NET MVC Project.

Different types Of Google charts.

Packages used in Index.Cshtml to access Google charts.