Ionic 3 – Charts

Hi Friends,

Hope you are all well. This is one of the most requested posts on this site. In this post let’s see how to show a simple chart in your Ionic 3 apps using the Chart.js library

Let’s begin.

A screen cast of the post:

 

Code for this post – here.

We’ll simply show a screen with a product and then try to give a rating for that product.

I have scaffolded out an application using the Ionic-Cli and have it configured to use firebase and angularfire 2. We’ll be using Firestore to store the votes for the product.

Open up firestore and create a collection that looks like this.

Screenshot 2018-02-14 22:55:00

We just have a votes collection with a single document and this document contains two fields dopes & nopes namely.

(Dopes denote the number of thumbs-ups and nopes denote the number of thumbs-downs).

Now open up home.html (in the pages/home) directory and write the below code.

Cool. This will create a screen as shown below.

Screenshot_2018-02-14-22-37-05

(I have used the vimeo logo here on the fab button. I simply thought V could represent vote here).

Now open up home.ts file (in the same directory)

Let’s break this down.

The showChart() function is the one that actually makes the chart. Here it makes a doughnut Chart but it could be Pie, line or whatever chart you want.

I have also disabled legend and enabled tooltips. Here labels will be shown as tooltips when tapped on the chart.

The data comes from two variables dopes and nopes which are the actual votes pulled from the firestore collection.

If you notice, I have a dope() function and a nope() function and it helps me update the votes in the firestore collection through a service called vote service.

Let’s go ahead and create it using the below command.

Ensure that this is imported and included in the providers in app.module.ts file. Your app.module.ts file would look like as shown below

 

Now open up vote (in providers/vote directory) and add the below code.

 

Now we simply have two methods here which simply adds a new vote and pulls all the votes from the votes collection in firestore.

Now run the app and tap on the vote button. You will see a screen like this.

Screenshot_2018-02-14-22-37-11

Tap on either thumbs-up or thumbs-down button and you will see a chart as shown below.

Screenshot_2018-02-14-22-38-45

Just try tapping on the chart and whichever side you tap you will see a tooltip (based on which part you tapped)

Screenshot_2018-02-14-22-37-30

Now let me tap on the orange side of the chart.

Screenshot_2018-02-14-22-38-36

Also notice that now the voting button has been removed from the screen as well; which means a person can vote only once for a product.

This is how you could bring a simple chart into your Ionic 3 apps. Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!
  • Surya Thrideep

    hi
    in whats app we can mention some one in a group by tapping @ i am working on that functionality.
    in angular there is a plugin angular2-mention using npm it working fine in browser when i trying to integrate in ionic it was not tringgering. the keyboard is different in android right. can u suggest me if there is any third party plugin or alternatives to acheive this task.