How to connect Firebase in Chart.js?

Ionic Framework ionic-v3
1

I’m using Ionic and I have a CRUD that creates a list of name “Item”:

item.models.ts:

export interface Item {
    key?: string;
    data: string;
    humor: string;
    mania: string;
    numero: string;
    medicamento?: string;
    dormidas?: string;
    menstrual?: boolean;
    evento?: string;
    impacto?: number;
    outras?:  string;

}

See how the data is stored in firebase:
image

So, how to connect the list data created in my chart done in Chart.js?
I can create a static graph only, I would like the graphic to be dynamic and with the data stored in Firebase. On the X axis I want to put the variable “data” and on the Y axis the variable “numero”.

.HTML CODE:

<div class="row">
    <div class="col-md-6">
      <div style="display: block;">
      <canvas baseChart width="600" height="400"
                  [datasets]="lineChartData"
                  [labels]="lineChartLabels"
                  [options]="lineChartOptions"
                  [colors]="lineChartColors"
                  [legend]="lineChartLegend"
                  [chartType]="lineChartType">
      </canvas>
      </div>
    </div>
  </div>

.TS CODE:

import { Item } from '../../models/item/item.models';

public lineChartData:Array<any> = [
  {data: [-34, -78, 45, 65], label: 'Humor'}
  ];

  public lineChartLabels:Array<any> = ['19/jun', '20/jun', '21/jun', '22/jun' ];

public lineChartColors:Array<any> = [
  { // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  }
];
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';

image

Could someone please help me connect Firebase to my chart?
I have not found any material on the subject. If possible, I would like to see a practical example.

1 Like