Using Chart.js to display calculator results

In my last post I set up a calculator flow on an ASP.NET web page using Javascript to make an API call and to perform client side rendering, see: http://munceyweb.com/2019/06/06/using-javascript-to-invoke-an-api-in-asp-net-core/

What I want to show with this new post is how to take the results and to use Javascript in ASP.NET core to format and present the results as a stacked bar chart.

To do this I am using a javascript library called chart.js and you can find a link to Chart.js here: https://www.chartjs.org/

The first step then is to open the Index.cshtml page that I previously created and to add a reference to the chartjs javascript library.

Adding a reference to Chart.js

Once this is done I am then able to create the Javascript code to format and display the chart.

First add a canvas to the page to hold the chart.

Adding canvas

Next add in a generateBarChart function

generateBarChart function

Then enhance the onCalculate javascript method to generate the data needed for the bar charts.

So that should be it, so lets fire up the web site created in the last post, run dotnet run and then open https://localhost:5001 and put in my weekly rent.

Chart Generated

This generates a chart that displays the breakdown between repayments and expenses.