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.

In previous article I have explained how to show 0 instead of null value in sqlserver, COALESCE function of sql server with example and Sql Server’s CASEexpression.

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";

}

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>

<legend>Google Chart API tutorial</legend>

</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: