Featured
Google Chart in ASP.NET 5
Last modified: June 18, 2021Chart in Web application that process data/information is very common. In this tutorial, we will look at how we can use Google Chart in ASP.NET 5. It is very powerful yet free to use. We will be producing following charts.
- Column Chart
- Pie Chart
- Line Chart
Step 1
Create an ASP.NET Core MVC application.
Step 2
Create a Student_Marks class file in the Model folder.
public class Student_Marks
{
public string Subject { get; set; }
public decimal Score { get; set; }
}
Step 3
Create an Interfaces folder in the root level of the application, and then create IScoreService interface in it. An interface is similar to a class except it is purely represents a contract between an object and user. We do not put the implementation of a method in the interface file, just the signature.
Step 4
Create a Services folder in the root level of your application and then create a ScoreService class file in it. We inherit IScoreService interface to ScoreService class. We put some dummy records so that we can test Google Charts.
public class ScoreService : IScoreService
{
public IEnumerable<Student_Marks> GetScores()
{
return new List<Student_Marks>
{
new Student_Marks{Subject="Biology", Score= 80},
new Student_Marks{Subject="Chemistry", Score=90},
new Student_Marks{Subject="English", Score=100},
new Student_Marks{Subject="Chinese", Score=88},
};
}
}
Step 5
In the Home Controller, add a new method called GetData() that returns the list of the Student Score in JSON format. We inject IScoreService as dependency injection (DI) in the constructor.
[HttpGet]
public JsonResult GetData()
{
var scores = _scoreService.GetScores();
return Json(scores);
}
Step 6
We also need to add a line in the startup.cs in ConfigureServices method for IScoreService DI. Without it, the application will not work.
services.AddScoped<IScoreService, ScoreService>();
Step 7
In the Index View of Home, we have three div placeholders for charts to render.
<div id="chart_div_bar_chart"></div>
<div id="chart_div_pie_chart"></div>
<div id="chart_div_line_chart"></div>
We put the following charts javascript as shown below.
@section Scripts {
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> //google chart javascript
<script>
google.charts.load('current', {
packages: ['corechart', 'bar']
});
//Call function after Google Chart is loaded, it is required, otherwise you may get error
google.charts.setOnLoadCallback(LoadData);
function LoadData() {
$.ajax({
url: 'Home/GetData', //get the home controller Get Data method to json data
dataType: "json",
type: "GET",
success: function (data) {
DrawBarChart(data); //draw bar chart
DrawPieChart(data); //draw pie chart
DrawLineChart(data); //draw line chart
}
});
}
function DrawBarChart(chartData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Subject');//create title
data.addColumn('number', 'Score');//create title
for (var i = 0; i < chartData.length; i++) { //loop through the json data and assign the value to data
data.addRow([chartData[i].subject, chartData[i].score]);
}
var options = {
title: 'Student Subject Marks',
chartArea: {
width: '50%'
},
hAxis: {
title: 'Subjects',
minValue: 0
},
vAxis: {
title: 'Total Score'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_bar_chart'));
chart.draw(data, options);
}
function DrawPieChart(chartData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Subject');
data.addColumn('number', 'Score');
for (var i = 0; i < chartData.length; i++) {
data.addRow([chartData[i].subject, chartData[i].score]);
}
var options = {
title: 'Student Subject Marks',
position: "top",
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div_pie_chart'));
chart.draw(data, options);
}
function DrawLineChart(chartData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Subject');
data.addColumn('number', 'Score');
for (var i = 0; i < chartData.length; i++) {
data.addRow([chartData[i].subject, chartData[i].score]);
}
var options = {
title: 'Student Subject Marks',
chartArea: {
width: '50%'
},
hAxis: {
title: 'Subjects',
minValue: 0
},
vAxis: {
title: 'Total Score'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div_line_chart'));
chart.draw(data, options);
}
</script>
}
Full source code can be found here
