Generate charts with Google DataTable .NET Wrapper from ASP.NET 6.0 Razor Pages...

Generate charts with Google DataTable .NET Wrapper from ASP.NET 6.0 Razor Pages App

The scenario that this article addresses is a situation whereby there is server-side generated data that needs to be displayed on a web page as a chart. The API used for generating the chart is the freely available Google Charts JavaScript-based API. The Google DataTable .NET Wrapper is used to create a lightweight representation of the google.visualization.DataTable object directly in Microsoft.NET. The wrapper allows for the creation of the appropriate JSON which is easily ingested by the Google Chart Tools JavaScript library.

I will show you how to generate six types of charts to display dynamically generated data. The source of data will be the well known Northwind database running in a Docker container. I will work with the ASP.NET Razor Pages template (AKA Web App).

Source code:  

The environment I am using is: https://github.com/medhatelmasry/ChartRazorGoogleWrapper

• Windows 11
• Docker Desktop for Windows
• .NET version 6.0.100
• Visual Studio Code

Start Northwind database in a Docker container

Let us make sure that the container is running. Execute this command to ensure that the container is indeed running.

dotnet new razor -f net6.0 -o ChartRazorGoogleWrapper

Change directory into the new folder and open the project inside VS Code with the following commands:

cd ChartRazorGoogleWrapper 

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

dotnet add package Google.DataTable.Net.Wrapper

Reading data

@page

@model ChartDataModel

using ChartRazorGoogleWrapper.NW;

using Google.DataTable.Net.Wrapper;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using Microsoft.EntityFrameworkCore;

namespace ChartRazorGoogleWrapper.Pages;

public class ChartDataModel : PageModel {

   private readonly ILogger<ChartDataModel> _logger;

   private readonly NorthwindContext _northwindContext;

   public ChartDataModel(ILogger<ChartDataModel> logger, NorthwindContext northwindContext) {

     _logger = logger;

     _northwindContext = northwindContext;

   public async Task<IActionResult> OnGet() {

     var data = await _northwindContext.Orders

     .GroupBy(_ => _.ShipCity)

     .Select(g => new {

         Name = g.Key,

         Count = g.Count()

     .OrderByDescending(cp => cp.Count)

     .ToListAsync();

     //let's instantiate the DataTable.

     var dt = new Google.DataTable.Net.Wrapper.DataTable();

     dt.AddColumn(new Column(ColumnType.String, "Name", "Name"));

     dt.AddColumn(new Column(ColumnType.Number, "Count", "Count"));

     foreach (var item in data) {

         Row r = dt.NewRow();

         r.AddCellRange(new Cell[] {

             new Cell(item.Name),

             new Cell(item.Count)

         dt.AddRow(r);

     //Let's create a Json string as expected by the Google Charts API.

     return Content(dt.GetJson());

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

NOTE: you will need to adjust the port number to suit your environment.

This is what was revealed in my browser:

Charting the data

Replace your Pages/Index.cshtml with the following code:

If you point your browser to the home page, you should see six charts, namely: column, line, pie, area, bar and pie 3D charts.

Conclusion

This shows you how the Google Chart Tools JavaScript library makes it much easier to generate charts from an ASP.NET Razor application.