Monday, December 2, 2019

ChartJS Tutorial With ASP.NET Core 2.2 Razor Pages


In my first project realized in .NET Core Razor pages, I began experimenting with Chart JS, which is a Javascript library for generating charts.
That's how I ended up writing this tutorial, which needs the following prerequisites:
1. beginner level .Net Core Razor pages
2. intermediate Javascript
3. download https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js and place it into wwwroot folder, js subfolder
4. you can download source code: https://github.com/zoltanhalasz/ChartJSTutorial
5. I suggest you check the tutorials for Razor pages before. See resources:
https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html

The application is live under: https://chartjstutorial.zoltanhalasz.net/


Steps for the application:

A. Create a new Web Application (.Net Core 2.2, Razor Pages Type)
This is the default type web application, and we will use this due to its simplicity. There will be only one page, Index, which is by created default.
B. Create the class of InvoiceModel
This is the main model, the entity for list of invoices. The second class there will be used to provide data to the Chart, is see point E below.
C. Create Service that loads data in Invoice Model
We will not spend time to use a database, but instead, load manually some data into the list.
Then, insert the service into Startup.cs
D. Index page - lists all invoices from above list
Index page - draws the chart using Javascript
If you check the code above, you can see the canvas with the chart. Then there is the Javascript code, that uses the Chart.js mechanism.
E. Code behind, backend for Index page:

OnGet method - loads the invoice list to be displayed in the page
OnGetInvoiceChartData method - is the backend for the fetch at point D in the JavaScript Code. It will provide JSON data in order to be displayed with the list.
I hope you liked this tutorial, please ask me if something needs to be clarified.

No comments:

Post a Comment