Sharing Top Content from the Angular-sphere.

Angular 5 – Charts – T-Pub :)

  • In this post let’s see how to pull data from a Firestore collection and display it in charts in an angular 5 app.
  • We’ll have a simple form that would contain three fields, namely Country, Gender and Rating.
  • Now we have written code to save data to our firestore collection called surveys.
  • (Remember you have to save some entries by filling the form above this chart so that there is some data to be shown).
  • Though this has a number of use cases, let’s build a simple rating system that uses a horizontal bar chart to denote the average rating of a product based on ratings given by users in our next post.

Hope you are all well. This is one of the most requested posts on this channel. In this post let’s see how to pull data from a Firestore collection and display it in charts in an angular 5 app.

Hi Friends,

Hope you are all well. This is one of the most requested posts on this channel. In this post let’s see how to pull data from a Firestore collection and display it in charts in an angular 5 app.

Let’s begin.

Code for this post is available – here

As with all my previous posts, I have created a new project with Angular-cli and installed firebase, angularfire2 and material 2 to it.

Add the firebase configuration details to environment.ts file as shown below.

We’ll have a simple form that would contain three fields, namely Country, Gender and Rating.

Upon saving this info to our firestore collection, this data would be pulled again and then shown up in a pie-chart.

We’ll be using a ngModule called ngx-charts for this purpose. Install it using the below command.

Country and gender would be select fields while rating would be a radio group. I am importing everything in app.module.ts as shown below.

Now open up app.component.html and add the below code.

Now open up app.component.ts file and add the below code.

Open up vote.service.ts file and add the below code.

Now we have written code to save data to our firestore collection called surveys.

Let’s throw in a pie-chart in there.

Open up app.component.html and add code as shown below.

Angular 5 – Charts – T-Pub 🙂

Comments are closed, but trackbacks and pingbacks are open.