27 Create Charts Using Chart.js

In this procedure, you will add charts in your application using Chart.js library.

1. Install the Chart.js library scripts

   1. Download the Chart.bundle.min.js file from the link Chart.js

   2. Drag the file you downloaded and drop it into the /Scripts folder in your project.

2. Create a controller that will include all charts of your application.

   Right-click on the Controllers folder and add new empty controller. You may name the controller ChartsController.

3. Build your project

4. Create the actions

   You may create one or multiple actions depend of the number of charts and who is accessing these charts.

   In these actions you will build your linq queries to get the data from your domain model and store them in ViewBag. You may use view models, but they are not necessary with charts.

   The information you need to pass to the views through the ViewBag property are:

   • Data: This an array of data that will be displayed (e.g. on the y-axes)

   • labels: These are the labels on the x-axes; they need to be stored in an array.

   Example: /Controllers/ChartsController.cs in Index() action

5. Create the views

   Right-click on the action in the controller and choose "Add View" then select an empty view.

   • Add the script section with a reference to Chart.bundle.min.js file

   • Add the canvas tags where your graphs are positioned. Use Bootstrap to arrange the canvas on the screen like a dashboard.

   • Add the scripts that generate your graphs

   Example: /Views/Charts/Index.cshtml

6. Test the charts

   Example: /Charts/Index