• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Guest Post

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Angular
    • Angular 5
    • Angular 6
  • Azure
  • ASP.NET Core
  • React
  • Interview Questions
    • Angular 6
    • ASP.NET Core
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

Build an app with ASPNET Core and Angular from scratch icon

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;

READ  How to setup a project with Angular 6 & ASP.NET Core 2.1 using VS Code

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.

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

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

One of the best material to learn Angular

Recent Posts

  • Asp.Net Core 3.0 Web API Versioning best practices
  • Entity Framework Core 3.0 Cache Busting | Dotnet Detail
  • Entity Framework Core 3.0 Bulk Insert Update and Delete – Asp.Net Core 3.0
  • Deploy React and Asp Net Core 3 App to Azure using VS2019
  • How to deploy React and Asp.Net Core 3 application to IIS
  • How to Create an Angular 8 and Asp.Net Core 3 app using VS2019

Tags

.NET CORE .NET Core 2.0 .NET CORE MIDDLEWARE .NET Core Routing 2FA ANGULAR ANGULAR 5 ANGULAR 5 TUTORIAL Angular 6 Angular 6 Tutorial Angular 7 Angular 7 Tutorials ANGULAR AND .NET CORE ANGULAR TUTORIAL ASP.NET ASP.NET CORE ASP.NET CORE 2.0 ASP.NET Core 2.1 Asp.Net Core 3.0 ASP.NET CORE MIDDLEWARE ASP.NET Core MVC ASP.NET Core Routing ASP.NET CORE TUTORIAL ASP.NET MVC6 ASP.NET MVC CORE ASP NET MVC Authentication Authentication and Authorization Azure Core Tutorial CRUD Deploy Asp.Net Core App to azure Deployment EF Core ENTITY FRAMEWORK Entity Framework Core Interview Questions JWT MIDDLEWARE MVC 6 MVC COREL MVC CORE 2.0 Reactjs Two Factor Authentication Visual Studio 2019 WEB API
Copyright © 2019