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:
- beginner level .Net Core Razor pages
- intermediate Javascript
- download https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js and place it into wwwroot folder, js subfolder
- you can download source code: https://github.com/zoltanhalasz/ChartJSTutorial
- A more detailed version of this is on my personal blog: https://mydev-journey.blogspot.com/2019/12/chartjs-tutorial-with-aspnet-core-22.html
- 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, shortly described, to follow the code in the repo:
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.
Top comments (4)
Hi Zoltan , thanks a lot for the tutorial, I learned a lot and try to implement ChartJS into my Razor Page Model Project. I'm struggling right now in the adaption from synchronious method to async. (in "public JsonResult OnGetInvoiceChartData() " ). I use SQL as a Database for my data and therefore use async method to access the data. Can you give me a hint how to change the following Method in Index.cshtml.cs
public JsonResult OnGetInvoiceChartData()
{
InvoiceList = _invoiceService.GetInvoices();
var invoiceChart = new CategoryChartModel();
invoiceChart.AmountList = new List();
invoiceChart.CategoryList = new List();
return new JsonResult(invoiceChart);
}
into a working async method? Or an example or a adapted chartjs tutorial with database access :-) ? Any help would be very helpfull!
Thanks a lot
Michael
Hi! Code below updated
Let's say you have an async method to obtain a list of invoices:
Great, it works now!!! I did it in the same way in the past, but you made me confident, that it should work. So I started a brand new Project with a simple database and your Data. I had 2 issues in my code.
1) with .Net Core 3.1 Framework, which I used, you have to add the Nuget Package "Microsoft.AspNetCore.Mvc.NewtonsoftJson -Version 3.1.0" and add "services.AddMvc().AddNewtonsoftJson();" in Startup.cs under ConfigureServices. I found this solution somewhere in the net.
2) I used OnGetInvoiceChartDataAsync in "public async Task OnGetInvoiceChartDataAsync()" and it seems that JsonResult doesn't allow the Async word at the end... It just dropes the output, no Error, nothing ..
Anyway, thank you very much for your help and for the tutorial... It helped me lot!
Michael
Glad that I could help.