Google charts with DataTable .NET Wrapper and API data in ASP.NET 6.0 Razor Pages App
Channel: Medhat Elmasry
Date: 2022-01-08

Source Code: https://github.com/medhatelmasry/OrdersChartRazorGoogleWrapper

Companion Article: https://blog.medhat.ca/2022/01/google-charts-with-datatable-net.html

You have data from an API (or any other data source like a database) and wish to display the results in a chart. The library we will use for generating charts 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 an API at https://northwind.vercel.app/api/orders that displays orders. I will work with the ASP.NET Razor Pages template (AKA Web App).