How to add Pie-Chart using Angular 6 & Asp Net Core web API

Build an app with ASPNET Core and Angular from scratch

In one of the previous tutorials, we have discussed how to add static pie-chart in Angular 6 and Asp Net Core Application with static data. But now in this tutorial, we are going to learn how to add dynamic pie-chart in Angular 6 and Asp Net Core web API project using chart.js. So, first-of-all, we will add some node packages, then create component, then add controller and then service.

Note: – we are not going to create a new project for this tutorial. If you don’t know how to create a new project using Angular 6 and Asp Net Core, then click here.

Learn how to add dynamic pie-chart in Angular 6 and Asp Net Core Web API Application using chart.js?

Let’s start to understand how to add dynamic chart in Angular 6 using Asp Net Core web API application in steps.

Step # 1 : Add Some Node Packages.

First-of-all, we need to install some node packages in our Angular 6 application. So, to do it, go to Visual Studio Code terminal => then write these below commands.

=> npm install chart.js angular2-chartjs --save

This above command will create bunch of components that we can use in our project.

Step # 2 : Import the module into the App.Module.ts

Now in this step, we need to import module into the app.module.ts file. So, go to project folder structure and open the app.module.ts file and then add the below line of code into the app.module.ts.

Import { ChartModule } from ‘angular2-chartjs’;

Now, add the “ChartModule” into the imports block.

Step # 3 : Create A New Component

Now in this step we will create a new component to show pie chart in Angular 6 application. So, to do it, go to Visual Studio terminal and add the below Angular CLI command to create a new component.

Note: – make sure you are creating new component in correct location.

=> ng g component pie-chart

After running this command, you will see a new folder with the name of pie-chart in your project folder directory with some files.

Note: – Don’t forget to add route of this component.

Step # 4 : Add Front-end code.

Now in this step we will add front-end code for pie chart in our angular 6 project. So, go to pie-chart folder and open “pie-chart.component.html” file and then add the code into this file as you see in the below line.

<chart type="pie" [data]="data"></chart>

Step # 5 : Add add component code.

Now go to pie-chart.component.ts file and add the code as you see in the below file.

Let’s understand the above code.

Line # 8: In this line, we are accessing the BookstoreServcie which we will have to create in Step # 7;

Line # 12, 13,14: In these lines, we are declaring some array type variable.

Line # 16 : Here in this line, we are declaring bookstore service.

Line # 21 : In this line, we are getting all the record from database and storing it in books variable in line number 23.

Line # 27 and 28: In these two lines, we are getting all the record in the form of group. In line # 27, we are pushing all the publisher name in labelData variable. And same as in line number28, here we are pushing books name count against each publisher in valueData variable.

Line # 33 to 43: This block of code showing the data in the form of chart.

Line # 34 : Showing all the publisher name which we are getting from line # 27.

Line # 36 : Showing all the published book’s number.

Step # 6 : Add Controller

Now, in this step we will create a new controller. So, to do it, go to project folder => then go to controller => then right click on the Controllers folder => Add a new c# file and then name it like this “booksGroupController.cs”. Then add the code as you see in the below file.

Let’s understand the above code,

Line # 16 to 20 : Accessing the DbContext class using dependency injection.

Note: – If you don’t how to to create a database in Angular 6 and Asp Net Core Application using Entity framework, then click here.

Line # 25 : Getting the record using linq query.

Step # 7 : Add Service

Now in this step, we will create a new service. So, go to project folder structure and then go to services folder and then right click on services folder and add a new file with the name of bookstore service and then add the code as you see in the below file.

Step # 8 : Run your project

Now run your project and go to browser and write the url like this “http://localhost:5000/PieChart” and then you will see a beautiful pie chart as you see in the below screenshot.

Note:- If you found this blog helpful then: Buy me a coffee