Creating Stacked Column Chart With ASP.NET Core MVC Using Google Charts API

Introduction

In this article, I will implement a stacked column chart in ASP.NE Core 2.1 MVC application using Google Charts API. I want to create a stacked chart to show the year-wise population data in the city.

Google Charts API

It is a freely available powerful tool for creating charts and it is very easy to implement. It gives many features with different types of charts.

I am using this Google API - <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Prerequisites

Install Visual studio 2017 updated any version
Install .Net core SDK 2.1 or above

Step 1- Create an ASP.NET Core 2.1 MVC Project

Open Visual Studio and select File -> New -> Project.

After selecting the project, a "New Project" dialog will be opened. Select .NET Core inside the Visual C# menu from the left side panel.

Then, select “ASP.NET Core web application“ from the available project types. Then, put the name of the project as StackedChartwithCoreMVCDemo and press OK.

Note
StackedChartwithCoreMVCDemo is my project name.

Creating Stacked Column Chart With ASP.NET Core MVC Using Google Chart API

After clicking on the OK button, a new dialog will open to select the project template. You can see two drop-down menus at the top left of the template window. Select “.NET Core” and “ ASP.NET Core 2.1” from these dropdowns. Then, select “ Web application (Model-View-Controller)” template and press OK to create the ASP.NET Core MVC project.

Step 2

Add a new class to the Models folder as “PopulationModel” and implement properties.

namespace StackedChartwithCoreMVCDemo.Models
{
public class PopulationModel
{
public string CityName { get; set; }
public int PopulationYear2020 { get; set; }
public int PopulationYear2010 { get; set; }
public int PopulationYear2000 { get; set; }
public int PopulationYear1990 { get; set; }
}
}

Step 3

Add a new class to the Models folder for data access, named as “PopulationDataAccessaLayer” and add the following code.

namespace StackedChartwithCoreMVCDemo.Models
{
public class PopulationDataAccessaLayer
{
public static List<PopulationModel> GetCityPopulationList()
{
var list = new List<PopulationModel>();
list.Add(new PopulationModel { CityName = "PURI", PopulationYear2020 = 28000, PopulationYear2010 = 45000, PopulationYear2000 = 22000, PopulationYear1990 = 50000 });
list.Add(new PopulationModel { CityName = "Bhubaneswar", PopulationYear2020 = 30000, PopulationYear2010 = 49000, PopulationYear2000 = 24000, PopulationYear1990 = 39000 });
list.Add(new PopulationModel { CityName = "Cuttack", PopulationYear2020 = 35000, PopulationYear2010 = 56000, PopulationYear2000 = 26000, PopulationYear1990 = 41000 });
list.Add(new PopulationModel { CityName = "Berhampur", PopulationYear2020 = 37000, PopulationYear2010 = 44000, PopulationYear2000 = 28000 , PopulationYear1990 = 48000 });
list.Add(new PopulationModel { CityName = "Odisha", PopulationYear2020 = 40000, PopulationYear2010 = 38000, PopulationYear2000 = 30000 , PopulationYear1990 = 54000 });
return list;
}
}
}

Step 4

Add a new controller to the Controllers folder and name it as “StackedChart”.

Create a new Acton Result to display the data in the View and load the Stacked Column chart.

namespace StackedChartwithCoreMVCDemo.Controllers
{
public class StackedChartController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult PopulationChart()
{
var populationList = PopulationDataAccessaLayer.GetCityPopulationList();
return Json(populationList);
}
}
}

Step 5

Add a new folder in the Views folder and name that as”StackedChart” and add a new View page in the “StackedChart” folder as ”Index.Cshtml”. Add this below code on the Index.cshtml page

<title>@ViewData["Title"] - DemoGoogleChart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(LoadData);
function LoadData() {
$.ajax({
url: 'StackedChart/PopulationChart',
dataType: "json",
type: "GET",
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
toastr.error(err.message);
},
success: function(data) {
PopulationChart(data);
return false;
}
});
return false;
}
function PopulationChart(data) {
var dataArray = [
['City', '2020 Population', '2010 Population', '2000 Population', '1990 Population']
];
$.each(data, function(i, item) {
dataArray.push([item.cityName, item.populationYear2020, item.populationYear2010, item.populationYear2000, item.populationYear1990]);
});
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'Population of Largest Cities of Odisha ',
is3D: true,
isStacked: true,
chartArea: {
width: '50%'
},
colors: ['#b0120a', '#7b1fa2', '#ffab91', '#d95f02'],
hAxis: {
title: 'City',
minValue: 0
},
vAxis: {
title: 'Total Population'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
return false;
}
</script>

Step 6 - Add a new menu

Edit the Views/Shared/_Layout page and add a new menu as “stacked Chart”. For that, add the below code.

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
<li><a asp-area="" asp-controller="StackedChart" asp-action="Index">Stacked Chart</a></li>
</ul>
</div>

Step 7

Now, run the application. You will successfully see the Stacked Column chart as below.