Introduction

In this article, I will implement 6 different types of charts in ASP.NET Core 2.1 MVC application using Google Charts API.
Different types of charts are:
  1. Column Chart
  2. Line Chart
  3. Pie Chart
  4. Area Chart
  5. Bar Chart
In all the above-mentioned charts, I want to show year-wise population data in the city.

Google Charts API

It is a freely available powerful tool for creating charts and easy to implement. It gives many features with different types of chart.
I am using this Google API <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Prerequisites
  1. Install Visual studio 2017 updated any version
  2. 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 open. Select .NET Core inside the Visual C# menu from the left side panel.
Then, select “ASP.NET Core web application“ from available project types. Give a name to the project as StackedChartwithCoreMVCDemo and press OK.
Creating Charts 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 saw two drop-down menus at the top left of the template window. Then, select “.NET Core” and “ ASP.NET Core 2.1” from these dropdowns. Select “ Web application (Model-View-Controller)” template and press OK to create Asp.Net Core MVC project.
Creating Charts With ASP.NET Core MVC Using Google Chart API
Step 2 - Column Chart
Add a new class to Models folder as “PopulationModel” and add the following properties.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationModel
  4. {
  5. public string CityName { get; set; }
  6. public int PopulationYear2020 { get; set; }
  7. public int PopulationYear2010 { get; set; }
  8. public int PopulationYear2000 { get; set; }
  9. public int PopulationYear1990 { get; set; }
  11. }
  12. }
Step 3
Add a new class to the Models folder for data access and name it as “PopulationDataAccessaLayer”.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationDataAccessaLayer
  4. {
  5. public static List<PopulationModel> GetCityPopulationList()
  6. {
  7. var list = new List<PopulationModel>();
  8. list.Add(new PopulationModel { CityName = "PURI", PopulationYear2020 = 28000, PopulationYear2010 = 45000, PopulationYear2000 = 22000, PopulationYear1990 = 50000 });
  9. list.Add(new PopulationModel { CityName = "Bhubaneswar", PopulationYear2020 = 30000, PopulationYear2010 = 49000, PopulationYear2000 = 24000, PopulationYear1990 = 39000 });
  10. list.Add(new PopulationModel { CityName = "Cuttack", PopulationYear2020 = 35000, PopulationYear2010 = 56000, PopulationYear2000 = 26000, PopulationYear1990 = 41000 });
  11. list.Add(new PopulationModel { CityName = "Berhampur", PopulationYear2020 = 37000, PopulationYear2010 = 44000, PopulationYear2000 = 28000 , PopulationYear1990 = 48000 });
  12. list.Add(new PopulationModel { CityName = "Odisha", PopulationYear2020 = 40000, PopulationYear2010 = 38000, PopulationYear2000 = 30000 , PopulationYear1990 = 54000 });
  14. return list;
  16. }
  17. }
  18. }
Step 4
Add a new controller to the Controllers folder and name it as “ColumnChart”.
And, create a new Acton Result to display data in the View and load column chart.
  1. using Microsoft.AspNetCore.Mvc;
  2. using StackedChartwithCoreMVCDemo.Models;
  4. namespace StackedChartwithCoreMVCDemo.Controllers
  5. {
  6. public class ColumnChartController: Controller
  7. {
  8. // GET: /<controller>/
  9. public IActionResult Index()
  10. {
  11. return View();
  12. }
  13. [HttpGet]
  14. public JsonResult PopulationChart()
  15. {
  16. var populationList = PopulationDataAccessaLayer.GetCityPopulationList();
  17. return Json(populationList);
  18. }
  19. }
  20. }
Step 5
Add a new folder on Views folder and name it as”ColumnChart”. Add a new View page in the “ColumnChart” folder as”Index.Cshtml”. Add this below code on Index.cshtml page
  1. <title>@ViewData["Title"] - Column Chart</title>
  2. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  4. <div id="chart_div"></div>
  5. <script type="text/javascript">
  7. google.charts.load('current', {
  8. packages: ['corechart', 'bar']
  9. });
  10. google.charts.setOnLoadCallback(LoadData);
  12. function LoadData() {
  13. $.ajax({
  15. url: 'ColumnChart/PopulationChart',
  16. dataType: "json",
  17. type: "GET",
  18. error: function(xhr, status, error) {
  19. var err = eval("(" + xhr.responseText + ")");
  20. toastr.error(err.message);
  21. },
  22. success: function(data) {
  23. PopulationChart(data);
  24. return false;
  25. }
  26. });
  27. return false;
  28. }
  30. function PopulationChart(data) {
  31. var dataArray = [
  32. ['City', '2020 Population', '2010 Population', '2000 Population', '1990 Population']
  33. ];
  34. $.each(data, function(i, item) {
  35. dataArray.push([item.cityName, item.populationYear2020, item.populationYear2010, item.populationYear2000, item.populationYear1990]);
  36. });
  37. var data = google.visualization.arrayToDataTable(dataArray);
  38. var options = {
  39. title: 'Population of Largest Cities of Odisha ',
  40. chartArea: {
  41. width: '50%'
  42. },
  43. colors: ['#b0120a', '#7b1fa2', '#ffab91', '#d95f02'],
  44. hAxis: {
  45. title: 'City',
  46. minValue: 0
  47. },
  48. vAxis: {
  49. title: 'Total Population'
  50. }
  51. };
  52. var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  54. chart.draw(data, options);
  55. return false;
  56. }
  57. </script>
Step 6 - Add a new menu
Edit the Views/Shared/_Layout page and a new menu, as “Column Chart” and add the below code,
  1. <div class="navbar-collapse collapse">
  2. <ul class="nav navbar-nav">
  3. <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  4. <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  5. <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  7. <li><a asp-area="" asp-controller="StackedChart" asp-action="Index">Stacked Chart</a></li>
  8. <li><a asp-area="" asp-controller="ColumnChart" asp-action="Index">Column Chart</a></li>
  11. </ul>
  12. </div>
Step 7
Now run the application and see the column chart as below.
Creating Charts With ASP.NET Core MVC Using Google Chart API

Line Chart

Step 1
Add a new class to Model folder as “PopulationModel” and implement properties.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationModel
  4. {
  5. public string CityName { get; set; }
  6. public int PopulationYear2020 { get; set; }
  7. public int PopulationYear2010 { get; set; }
  8. public int PopulationYear2000 { get; set; }
  9. public int PopulationYear1990 { get; set; }
  11. }
  12. }
Step 2
Add a new class to Model folder for data access and name it as “PopulationDataAccessaLayer” and implement the code.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationDataAccessaLayer
  4. {
  5. public static List<PopulationModel> GetUsStatePopulationList()
  6. {
  7. var list = new List<PopulationModel>();
  8. list.Add(new PopulationModel { CityName = "Chennai", PopulationYear2020 = 28000, PopulationYear2010 = 15000, PopulationYear2000 = 22000, PopulationYear1990 = 50000 });
  9. list.Add(new PopulationModel { CityName = "Pune", PopulationYear2020 = 30000, PopulationYear2010 = 19000, PopulationYear2000 = 24000, PopulationYear1990 = 39000 });
  10. list.Add(new PopulationModel { CityName = "Kochi", PopulationYear2020 = 35000, PopulationYear2010 = 16000, PopulationYear2000 = 26000, PopulationYear1990 = 41000 });
  11. list.Add(new PopulationModel { CityName = "Kolkata", PopulationYear2020 = 37000, PopulationYear2010 = 14000, PopulationYear2000 = 28000 , PopulationYear1990 = 48000 });
  12. list.Add(new PopulationModel { CityName = "Odisha", PopulationYear2020 = 40000, PopulationYear2010 = 18000, PopulationYear2000 = 30000 , PopulationYear1990 = 54000 });
  14. return list;
  16. }
  17. }
  18. }
Step 3
Add a new controller to Controller folder and name it as “LineChart”.
And create a New Acton Result to display data in view and load line chart.
  1. using Microsoft.AspNetCore.Mvc;
  2. using StackedChartwithCoreMVCDemo.Models;
  4. // For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
  6. namespace StackedChartwithCoreMVCDemo.Controllers
  7. {
  8. public class LineChartController : Controller
  9. {
  10. // GET: /<controller>/
  11. public IActionResult Index()
  12. {
  13. return View();
  14. }
  15. [HttpGet]
  16. public JsonResult PopulationChart()
  17. {
  18. var populationList = PopulationDataAccessaLayer.GetCityPopulationList();
  19. return Json(populationList);
  20. }
  21. }
  22. }
Step 4
Add a new folder on Views folder and name it as "LineChart” and add a new view page on “LineChart” folder as”Index.Cshtml”. Add this below code on Index.cshtml page.
  1. <title>@ViewData["Title"] - Line Chart</title>
  2. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  4. <div id="chart_div"></div>
  5. <script type="text/javascript">
  7. google.charts.load('current', {
  8. packages: ['corechart', 'bar']
  9. });
  10. google.charts.setOnLoadCallback(LoadData);
  12. function LoadData() {
  13. $.ajax({
  15. url: 'LineChart/PopulationChart',
  16. dataType: "json",
  17. type: "GET",
  18. error: function(xhr, status, error) {
  19. var err = eval("(" + xhr.responseText + ")");
  20. toastr.error(err.message);
  21. },
  22. success: function(data) {
  23. PopulationChart(data);
  24. return false;
  25. }
  26. });
  27. return false;
  28. }
  30. function PopulationChart(data) {
  31. var dataArray = [
  32. ['City', '2020 Population', '2010 Population', '2000 Population', '1990 Population']
  33. ];
  34. $.each(data, function(i, item) {
  35. dataArray.push([item.cityName, item.populationYear2020, item.populationYear2010, item.populationYear2000, item.populationYear1990]);
  36. });
  37. var data = google.visualization.arrayToDataTable(dataArray);
  38. var options = {
  39. title: 'Population of Largest Cities of Odisha ',
  40. chartArea: {
  41. width: '50%'
  42. },
  43. colors: ['#b0120a', '#7b1fa2', '#ffab91', '#d95f02'],
  44. hAxis: {
  45. title: 'City',
  46. minValue: 0
  47. },
  48. vAxis: {
  49. title: 'Total Population'
  50. }
  51. };
  52. var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  54. chart.draw(data, options);
  55. return false;
  56. }
  57. </script>
Step 5 - Add a new menu
Edit the Views/Shared/_Layout page and a new menu, as “Line Chart” and add the below code.
  1. <div class="navbar-collapse collapse">
  2. <ul class="nav navbar-nav">
  3. <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  4. <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  5. <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  7. <li><a asp-area="" asp-controller="StackedChart" asp-action="Index">Stacked Chart</a></li>
  8. <li><a asp-area="" asp-controller="LineChart" asp-action="Index">Line Chart</a></li>
  10. </ul>
Step 6
Now run the application and see the line chart as below.
Creating Charts With ASP.NET Core MVC Using Google Chart API

Pie Chart

Step 1
Add a new class to Model folder as “PopulationModel” and implement properties.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationModel
  4. {
  5. public string CityName { get; set; }
  6. public int PopulationYear2020 { get; set; }
  7. public int PopulationYear2010 { get; set; }
  8. public int PopulationYear2000 { get; set; }
  9. public int PopulationYear1990 { get; set; }
  11. }
  12. }
Step 2
Add new class to Model folder for data access and named as “PopulationDataAccessaLayer” and implement the code.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationDataAccessaLayer
  4. {
  5. public static List<PopulationModel> GetUsStatePopulationList()
  6. {
  7. var list = new List<PopulationModel>();
  8. list.Add(new PopulationModel { CityName = "Chennai", PopulationYear2020 = 28000, PopulationYear2010 = 15000, PopulationYear2000 = 22000, PopulationYear1990 = 50000 });
  9. list.Add(new PopulationModel { CityName = "Pune", PopulationYear2020 = 30000, PopulationYear2010 = 19000, PopulationYear2000 = 24000, PopulationYear1990 = 39000 });
  10. list.Add(new PopulationModel { CityName = "Kochi", PopulationYear2020 = 35000, PopulationYear2010 = 16000, PopulationYear2000 = 26000, PopulationYear1990 = 41000 });
  11. list.Add(new PopulationModel { CityName = "Kolkata", PopulationYear2020 = 37000, PopulationYear2010 = 14000, PopulationYear2000 = 28000 , PopulationYear1990 = 48000 });
  12. list.Add(new PopulationModel { CityName = "Odisha", PopulationYear2020 = 40000, PopulationYear2010 = 18000, PopulationYear2000 = 30000 , PopulationYear1990 = 54000 });
  14. return list;
  16. }
  17. }
  18. }
Step 3
Add a new controller to Controller folder and name it as “PieChart”.
And create a New Acton Result to display data in view and load Pie chart.
  1. using Microsoft.AspNetCore.Mvc;
  2. using StackedChartwithCoreMVCDemo.Models;
  4. namespace StackedChartwithCoreMVCDemo.Controllers
  5. {
  6. public class PieChartController : Controller
  7. {
  8. // GET: /<controller>/
  9. public IActionResult Index()
  10. {
  11. return View();
  12. }
  13. [HttpGet]
  14. public JsonResult PopulationChart()
  15. {
  16. var populationList = PopulationDataAccessaLayer.GetCityPopulationList();
  17. return Json(populationList);
  18. }
  19. }
  20. }
Step 4
Add a new folder on Views folder and name it as”PieChart” and add a new view page on “PieChart” folder as”Index.Cshtml”. Add this below code on Index.cshtml page.
  1. <title>@ViewData["Title"] - Pie Chart</title>
  2. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  4. <div id="chart_div"></div>
  5. <script type="text/javascript">
  7. google.charts.load('current', {
  8. packages: ['corechart', 'bar']
  9. });
  10. google.charts.setOnLoadCallback(LoadData);
  12. function LoadData() {
  13. $.ajax({
  15. url: 'PieChart/PopulationChart',
  16. dataType: "json",
  17. type: "GET",
  18. error: function (xhr, status, error) {
  19. var err = eval("(" + xhr.responseText + ")");
  20. toastr.error(err.message);
  21. },
  22. success: function (data) {
  23. PopulationChart(data);
  24. return false;
  25. }
  26. });
  27. return false;
  28. }
  30. function PopulationChart(data) {
  31. var dataArray = [
  32. ['City', '2020 Population', '2010 Population', '2000 Population', '1990 Population']
  33. ];
  34. $.each(data, function (i, item) {
  35. dataArray.push([item.cityName, item.populationYear2020, item.populationYear2010, item.populationYear2000, item.populationYear1990]);
  36. });
  37. var data = google.visualization.arrayToDataTable(dataArray);
  38. var options = {
  39. title: 'Population of Largest Cities of Odisha ',
  40. chartArea: {
  41. width: '50%'
  42. },
  43. colors: ['#b0120a', '#7b1fa2', '#ffab91', '#d95f02'],
  44. hAxis: {
  45. title: 'City',
  46. minValue: 0
  47. },
  48. vAxis: {
  49. title: 'Total Population'
  50. }
  51. };
  52. var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  54. chart.draw(data, options);
  55. return false;
  56. }
  57. </script>
Step 5 - Add a new menu
Edit the Views/Shared/_Layout page and a new menu, as “Pie Chart” and add the below code.
  1. <div class="navbar-collapse collapse">
  2. <ul class="nav navbar-nav">
  3. <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  4. <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  5. <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  7. <li><a asp-area="" asp-controller="StackedChart" asp-action="Index">Stacked Chart</a></li>
  8. <li><a asp-area="" asp-controller="PieChart" asp-action="Index">Pie Chart</a></li>
  10. </ul>
Step 6
Now run the application and see the line chart as below.
Creating Charts With ASP.NET Core MVC Using Google Chart API

Area Chart

Step 1
Add a new class to Model folder as “PopulationModel” and implement properties.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationModel
  4. {
  5. public string CityName { get; set; }
  6. public int PopulationYear2020 { get; set; }
  7. public int PopulationYear2010 { get; set; }
  8. public int PopulationYear2000 { get; set; }
  9. public int PopulationYear1990 { get; set; }
  11. }
  12. }
Step 2
Add new class to Model folder for data access and name it as “PopulationDataAccessaLayer” and implement the code.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationDataAccessaLayer
  4. {
  5. public static List<PopulationModel> GetUsStatePopulationList()
  6. {
  7. var list = new List<PopulationModel>();
  8. list.Add(new PopulationModel { CityName = "Chennai", PopulationYear2020 = 28000, PopulationYear2010 = 15000, PopulationYear2000 = 22000, PopulationYear1990 = 50000 });
  9. list.Add(new PopulationModel { CityName = "Pune", PopulationYear2020 = 30000, PopulationYear2010 = 19000, PopulationYear2000 = 24000, PopulationYear1990 = 39000 });
  10. list.Add(new PopulationModel { CityName = "Kochi", PopulationYear2020 = 35000, PopulationYear2010 = 16000, PopulationYear2000 = 26000, PopulationYear1990 = 41000 });
  11. list.Add(new PopulationModel { CityName = "Kolkata", PopulationYear2020 = 37000, PopulationYear2010 = 14000, PopulationYear2000 = 28000 , PopulationYear1990 = 48000 });
  12. list.Add(new PopulationModel { CityName = "Odisha", PopulationYear2020 = 40000, PopulationYear2010 = 18000, PopulationYear2000 = 30000 , PopulationYear1990 = 54000 });
  14. return list;
  16. }
  17. }
  18. }
Step 3
Add a new controller to Controller folder and name it as “AreaChart”.
And create a New Acton Result to display data in view and load Area chart.
  1. using Microsoft.AspNetCore.Mvc;
  2. using StackedChartwithCoreMVCDemo.Models;
  4. namespace StackedChartwithCoreMVCDemo.Controllers
  5. {
  6. public class AreaChartController : Controller
  7. {
  8. // GET: /<controller>/
  9. public IActionResult Index()
  10. {
  11. return View();
  12. }
  13. [HttpGet]
  14. public JsonResult PopulationChart()
  15. {
  16. var populationList = PopulationDataAccessaLayer.GetCityPopulationList();
  17. return Json(populationList);
  18. }
  19. }
  20. }
Step 4
Add a new folder on Views folder and name it as”AreaChart” and add a new view page on “AreaChart” folder as”Index.Cshtml”. Add this below code on Index.cshtml page.
  1. <title>@ViewData["Title"] - Area Chart</title>
  2. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  4. <div id="chart_div"></div>
  5. <script type="text/javascript">
  7. google.charts.load('current', {
  8. packages: ['corechart', 'bar']
  9. });
  10. google.charts.setOnLoadCallback(LoadData);
  12. function LoadData() {
  13. $.ajax({
  15. url: 'AreaChart/PopulationChart',
  16. dataType: "json",
  17. type: "GET",
  18. error: function (xhr, status, error) {
  19. var err = eval("(" + xhr.responseText + ")");
  20. toastr.error(err.message);
  21. },
  22. success: function (data) {
  23. PopulationChart(data);
  24. return false;
  25. }
  26. });
  27. return false;
  28. }
  30. function PopulationChart(data) {
  31. var dataArray = [
  32. ['City', '2020 Population', '2010 Population', '2000 Population', '1990 Population']
  33. ];
  34. $.each(data, function (i, item) {
  35. dataArray.push([item.cityName, item.populationYear2020, item.populationYear2010, item.populationYear2000, item.populationYear1990]);
  36. });
  37. var data = google.visualization.arrayToDataTable(dataArray);
  38. var options = {
  39. title: 'Population of Largest Cities of Odisha ',
  40. chartArea: {
  41. width: '50%'
  42. },
  43. colors: ['#b0120a', '#7b1fa2', '#ffab91', '#d95f02'],
  44. hAxis: {
  45. title: 'City',
  46. minValue: 0
  47. },
  48. vAxis: {
  49. title: 'Total Population'
  50. }
  51. };
  52. var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  54. chart.draw(data, options);
  55. return false;
  56. }
  57. </script>
Step 5 - Add a new menu
Edit the Views/Shared/_Layout page and a new menu, as “Area Chart” and add the below code.
  1. <div class="navbar-collapse collapse">
  2. <ul class="nav navbar-nav">
  3. <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  4. <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  5. <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  7. <li><a asp-area="" asp-controller="StackedChart" asp-action="Index">Stacked Chart</a></li>
  8. <li><a asp-area="" asp-controller="AreaChart" asp-action="Index">Area Chart</a></li>
  10. </ul>
Step 6
Now run the application and see the Area chart as below.
Creating Charts With ASP.NET Core MVC Using Google Chart API

Bar Chart

Step 1
Add a new class to Model folder as “PopulationModel” and implement properties.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationModel
  4. {
  5. public string CityName { get; set; }
  6. public int PopulationYear2020 { get; set; }
  7. public int PopulationYear2010 { get; set; }
  8. public int PopulationYear2000 { get; set; }
  9. public int PopulationYear1990 { get; set; }
  11. }
  12. }
Step 2
Add new class to Model folder for data access and name it as “PopulationDataAccessaLayer” and implement the code.
  1. namespace StackedChartwithCoreMVCDemo.Models
  2. {
  3. public class PopulationDataAccessaLayer
  4. {
  5. public static List<PopulationModel> GetUsStatePopulationList()
  6. {
  7. var list = new List<PopulationModel>();
  8. list.Add(new PopulationModel { CityName = "Chennai", PopulationYear2020 = 28000, PopulationYear2010 = 15000, PopulationYear2000 = 22000, PopulationYear1990 = 50000 });
  9. list.Add(new PopulationModel { CityName = "Pune", PopulationYear2020 = 30000, PopulationYear2010 = 19000, PopulationYear2000 = 24000, PopulationYear1990 = 39000 });
  10. list.Add(new PopulationModel { CityName = "Kochi", PopulationYear2020 = 35000, PopulationYear2010 = 16000, PopulationYear2000 = 26000, PopulationYear1990 = 41000 });
  11. list.Add(new PopulationModel { CityName = "Kolkata", PopulationYear2020 = 37000, PopulationYear2010 = 14000, PopulationYear2000 = 28000 , PopulationYear1990 = 48000 });
  12. list.Add(new PopulationModel { CityName = "Odisha", PopulationYear2020 = 40000, PopulationYear2010 = 18000, PopulationYear2000 = 30000 , PopulationYear1990 = 54000 });
  14. return list;
  16. }
  17. }
  18. }
Step 3
Add a new controller to Controller folder and name it as “BarChart”.
And create a New Acton Result to display data in view and load Area chart.
  1. using Microsoft.AspNetCore.Mvc;
  2. using StackedChartwithCoreMVCDemo.Models;
  4. namespace StackedChartwithCoreMVCDemo.Controllers
  5. {
  6. public class BarChartController : Controller
  7. {
  8. // GET: /<controller>/
  9. public IActionResult Index()
  10. {
  11. return View();
  12. }
  13. [HttpGet]
  14. public JsonResult PopulationChart()
  15. {
  16. var populationList = PopulationDataAccessaLayer.GetCityPopulationList();
  17. return Json(populationList);
  18. }
  19. }
  20. }
Step 4
Add a new folder on Views folder and name it as”BarChart” and add a new view page on “BarChart” folder as”Index.Cshtml”. Add this below code on Index.cshtml page.
  1. <title>@ViewData["Title"] - Bar Chart</title>
  2. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  4. <div id="chart_div"></div>
  5. <script type="text/javascript">
  7. google.charts.load('current', {
  8. packages: ['corechart', 'bar']
  9. });
  10. google.charts.setOnLoadCallback(LoadData);
  12. function LoadData() {
  13. $.ajax({
  15. url: 'BarChart/PopulationChart',
  16. dataType: "json",
  17. type: "GET",
  18. error: function (xhr, status, error) {
  19. var err = eval("(" + xhr.responseText + ")");
  20. toastr.error(err.message);
  21. },
  22. success: function (data) {
  23. PopulationChart(data);
  24. return false;
  25. }
  26. });
  27. return false;
  28. }
  30. function PopulationChart(data) {
  31. var dataArray = [
  32. ['City', '2020 Population', '2010 Population', '2000 Population', '1990 Population']
  33. ];
  34. $.each(data, function (i, item) {
  35. dataArray.push([item.cityName, item.populationYear2020, item.populationYear2010, item.populationYear2000, item.populationYear1990]);
  36. });
  37. var data = google.visualization.arrayToDataTable(dataArray);
  38. var options = {
  39. title: 'Population of Largest Cities of Odisha ',
  40. chartArea: {
  41. width: '50%'
  42. },
  43. colors: ['#b0120a', '#7b1fa2', '#ffab91', '#d95f02'],
  44. hAxis: {
  45. title: 'City',
  46. minValue: 0
  47. },
  48. vAxis: {
  49. title: 'Total Population'
  50. }
  51. };
  52. var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  54. chart.draw(data, options);
  55. return false;
  56. }
  57. </script>
Step 5 - Add a new menu
Edit the Views/Shared/_Layout page and a new menu, as “Area Chart” and add the below code.
  1. <div class="navbar-collapse collapse">
  2. <ul class="nav navbar-nav">
  3. <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  4. <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  5. <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  7. <li><a asp-area="" asp-controller="StackedChart" asp-action="Index">Stacked Chart</a></li>
  8. <li><a asp-area="" asp-controller="BarChart" asp-action="Index">Bar Chart</a></li>
  11. </ul>
  12. </div>
Step 6
Now run the application and see the Area chart as below.
Creating Charts With ASP.NET Core MVC Using Google Chart API