• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to add Pie-Chart using Angular 6 & Asp Net Core web API

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

September 21, 2018 by mebakar1005 Leave a Comment

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.

See also  How to add Treeview in Angular 6 and Asp.Net Core Application

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.

See also  ASP.NET Core Middleware

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.

How to deploy Angular 6 and Asp Net Core Application in IIS 8?
How to deploy Angular 6 & Asp Net Core App to Azure using FileZilla

Related

Filed Under: Angular, Angular 5, Angular 6, ASP.NET Core, web API Tagged With: Angular 6 chart, ASP.NET CORE, Chart in Angular, Charts using Web API, Pie-Chart in Angular 6

Leave a Reply Cancel reply

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

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • 4 Explicaciones por qué Ella le dio El hombro frío
  • Overland Park: más grande suburbio de Kansas City es en realidad un romántico Destino lleno de Exterior Actividades, Comida excelentes y Cultura
  • Lasting Online Dating Sites: Techniques For Survival
  • How to get the Best Info Room Services
  • Very best Antiviruses Designed for PC Game enthusiasts
  • Very best Antivirus Software
Copyright © 2022