How to create a Chart with dynamic data from Firebase?

Ionic Framework ionic-v3
1

Hi, i am new to ionic. Am currently developing a blood-Type donation app.
But i want to create Charts to monitor how many people are of a particular blood-type and perhaps capture there locations. I definitely need some help with this.
Looking foward to your guide. Thanks in advance!!

model.ts
export interface Person{
//
key?:string;
name: string;
location: string;
age: number;
bloodType: string;
conscent: string;
tel:string;
email: string;
}

add-person.ts
import { Component, OnInit } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, ToastController,
ViewController, LoadingController, AlertController } from ‘ionic-angular’;
import { FormGroup, FormControl, Validators } from “@angular/forms”;

import { Person } from “…/…/models/persons”;
import { PersonsService } from ‘…/…/services/persons’;
import { AuthService } from ‘…/…/services/auth’;
import { PersonsPage } from ‘…/persons/persons’;
import { HomePage } from ‘…/home/home’;

// @IonicPage()
@Component({
selector: ‘page-add-person’,
templateUrl: ‘add-person.html’,
})
export class AddPersonPage {

selectOptions = ['O+','O+','A+','A-','B+','B-','AB+','AB-'];

conscent = ['Yes', 'No'];

  personsPage=PersonsPage;

    person: Person = {
    name: ' ',
    location: ' ',
    email:' ',
    age: null,
    bloodType: ' ',
    conscent: ' ',
    tel: ' ',
  };

  constructor(
    public navCtrl: NavController,public toastCtrl: ToastController,
    public navParams: NavParams,public viewCtrl: ViewController,
    private personListService: PersonsService) {
      console.log(this.conscent.length);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddNotePage');
  }

  addPerson(person: Person) {
    const toast = this.toastCtrl.create({
          message: 'Donor Successfully Registered',
            duration: 2000
          });
          toast.present();

    this.personListService.addPerson(person).then(ref => {
      this.navCtrl.setRoot(HomePage);
    })
  }

onCancel(){
this.viewCtrl.dismiss();
}
}

2

Hello Devpassion96,
You can use ng2charts for generate chart dynamically.
Here is link where you can find npm package and complete guide for how to use chart

:slightly_smiling_face:

1 Like