Google Charts is a free JavaScript API that you can use to generate good looking charts on a web page. Although it has nothing to do with C# and .NET, we can still use it in an ASP.NET application. In this article, I will show you how to generate five types of charts to display dynamically generated data. The source of data will be the well known Northwind database running in a Docker container.
In another article, I show how to use Google charts with an ASP.NET Core Razor Pages application. In this article, I work with the ASP.NET MVC template, instead.
Source code: https://github.com/medhatelmasry/gChartMVC
The environment I am using is:
- Windows 11
- Docker Desktop for Windows
- .NET version 6.0.100
- Visual Studio Code
Start Northwind database in a Docker container
| Docker image: | kcornwall/sqlnorthwind |
| Container Name (--name): | nw |
| Ports (-p): | Port 1433 in container is exposed as port 1444 on the host computer |
| Password: | The sa password is Passw0rd2018. This was determined from the Docker Hub page for the image. |
| -d: | Starts the container in detached mode |
Let us make sure that the container is running. Execute this command to ensure that the container is indeed running.
Project setup
dotnet new mvc -f net6.0 -o gChartMVC
Change directory into the new folder and open the project inside VS Code with the following commands:
cd gChartMVC
code .
We will need to install an Entity Framework command-line utility. If you have not done so already, install dotnet-ef with this command:
dotnet tool install –g dotnet-ef
It does not hurt to upgrade this tool to the latest version with:
dotnet tool update -g dotnet-ef
Also, from within the root folder of your project, add some SQL-Server and Entity Framework related packages with the following terminal-window commands:
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
Reading data
At this stage, let's run our web application and verify that we are indeed able to read data from the Northwind database and subsequently generate JSON data. Run your application with:
dotnet watch run
Point your browser to https://localhost:7108/home/chartdata
NOTE: you will need to adjust the port number to suit your environment.
This is what was revealed in my browser:
We have a sense of assurance that our data is ready to be displayed in a chart.
Charting the data
Replace your Views/Home/Index.cshtml with the following code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="column_chart_div"></div>
<div id="line_chart_div"></div>
<div id="pie_chart_div"></div>
<div id="area_chart_div"></div>
<div id="bar_chart_div"></div>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(LoadData);
function LoadData() {
$.ajax({
url: '/Home/ChartData',
dataType: "json",
type: "GET",
error: function(xhr, status, error) {
toastr.error(xhr.responseText);
},
success: function(data) {
PopulationChart(data, "column-chart");
PopulationChart(data, "line-chart");
PopulationChart(data, "pie-chart");
PopulationChart(data, "area-chart");
PopulationChart(data, "bar-chart");
return false;
}
});
return false;
}
function PopulationChart(data, chart_type) {
var dataArray = [
['Category', 'Product']
];
$.each(data, function(i, item) {
dataArray.push([item.name, item.count]);
});
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'Product count by category',
chartArea: {
width: '80%'
},
colors: ['#b0120a', '#7b1fa2', '#ffab91', '#d95f02'],
hAxis: {
title: 'Categories',
minValue: 0
},
vAxis: {
title: 'Product Count'
}
};
var chart;
switch(chart_type) {
case "line-chart":
chart = new google.visualization.LineChart(document.getElementById('line_chart_div'));
break;
case "pie-chart":
chart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
break;
case "area-chart":
chart = new google.visualization.AreaChart(document.getElementById('area_chart_div'));
break;
case "bar-chart":
chart = new google.visualization.BarChart(document.getElementById('bar_chart_div'));
break;
default:
chart = new google.visualization.ColumnChart(document.getElementById('column_chart_div'));
break;
}
chart.draw(data, options);
return false;
}
</script>
If you point your browser to the home page, you should see five charts, namely: column, line, pie, area and bar charts.
Conclusion
I trust the above article helps you consider using Google Charts with ASP.NET MVC apps to visually display data.
