Draw Stacked column chart using Google chart API in asp.net MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial


Draw Stacked column chart using Google chart API in asp.net MVC

In this article I am going to explain how to create stacked and multi series column chart using Google chart API in asp.net MVC.


Description:
I want to draw a chart to show how many male and female in Indian states. We have two approaches to draw chart. First we can create multi series chart and second can draw stacked chart.

Implementation:
I have created a table Tb_Statewisepopulation and insert dummy data into it.

Stateid
int
StateName
varchar(100)
Male
int
Female
int

I am using data first approach in MVC application.

Model :
  public partial class Tb_Statewisepopulation
    {
        public int Stateid { get; set; }
        public string StateName { get; set; }
        public Nullable<int> Male { get; set; }
        public Nullable<int> Female { get; set; }
    }

Add Controller :
Add an empty to mvc project and create Json method to get data from database.
Complete code of controller:

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

namespace MVC_Project.Controllers
{
    public class ChartController : Controller
    {
        DemoEntities1 db = new DemoEntities1();
        //
        // GET: /Chart/
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Chartd()
        {
            var data = db.Tb_Statewisepopulation.ToList();
            return Json(data,JsonRequestBehavior.AllowGet);

        }
            }
}

Add View

Draw multi series chart:
Add view for Index action.

Complete structure of view to draw multi series chart:

@{
    ViewBag.Title = "Google Chart API";
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<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() {
        $.post('/Chart/Chartd/', {}, function (data) {
            var dt = new google.visualization.DataTable();
            dt.addColumn('string', 'StateName');
            dt.addColumn('number', 'Male');
            dt.addColumn('number', 'Female');
            for (var i = 0; i < data.length; i++) {
                dt.addRow([data[i].StateName, data[i].Male, data[i].Female]);
            }
            var options = {
                title: "State wise Population",
                is3D: true
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
            chart.draw(dt, options);
        });
    }
</script>

<fieldset>
    <legend>Google Chart API tutorial</legend>
    <div id="chart" style="height: 400px"></div>
</fieldset>


Draw multi series column chart using Google chart API in asp.net MVC


Draw stacked chart:
To draw stacked chart you have to set isStacked: true in chart options.

Complete structure of view to draw stacked chart:

@{
    ViewBag.Title = "Google Chart API";
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<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() {
        $.post('/Chart/Chartd/', {}, function (data) {
            var dt = new google.visualization.DataTable();
            dt.addColumn('string', 'StateName');
            dt.addColumn('number', 'Male');
            dt.addColumn('number', 'Female');
            for (var i = 0; i < data.length; i++) {
                dt.addRow([data[i].StateName, data[i].Male, data[i].Female]);
            }
            var options = {
                title: "State wise Population",
                is3D: true,
                isStacked: true
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
            chart.draw(dt, options);
        });
    }
</script>
<fieldset>
    <legend>Google Chart API tutorial</legend>
    <div id="chart" style="height: 400px"></div>
</fieldset>

  
Draw Stacked column chart using Google chart API in asp.net MVC



What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+
loading...


EmoticonEmoticon