Using Chart.JS with a Asp.Net MVC 5 – Part 2

In the first part of this article, I rather cruelly left you at the point where we are just about ready to create our chart (click here if you haven’t read that part yet). In this part we will do just that but also look at a few other methods of retrieving data with which to populate the chart.

Chart.js relies on the canvas element on order to do its drawing, so we will start by defining one. the canvas code is very simple (click here for more info on the canvas element)

Also want to point out that at this point I am using pretty much the standard implementation that you will find in the chartjs.org documentation

Next we need to add the javascript. In part 1 we should have ended up with the following javascript code:

Below the “var resultsArray” line add the following:

We use jQuery to obtain a reference to the canvas. Next we need to define the data structure for our chart:

Notice that the above code takes our resultsArray as the data, but also notice that we could also set the chart labels with an array.

Next we set some options for the chart. Please check the Chart.js documentation for a full details on how options work.

And finally we create our chart passing in the canvas, data and options:

If you build & run the project now, you should see the following:

chart

In the next part I’ll go through other data sources and Angular.js

7 thoughts on “Using Chart.JS with a Asp.Net MVC 5 – Part 2

Leave a Reply

Your email address will not be published. Required fields are marked *