How to connect Firebase on a graph?

Ionic Framework ionic-v3
1

I’m new in TypeScript, I would like to know how to connect information saved in Firebase to a graph? I use Ionic v3 and I’m using the Highcharts library to generate the graph. I’ve read the documentation AngularFire2, but still can not find a solution. I would like to see an example, please.

Code:

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:

R4uKG

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

<div [chart]="chart"></div>

.TS

chart = new Chart ({
    
    chart: {
      type: 'spline'
  },
  title: {
      text: undefined
  },
   xAxis: {
      type: 'datetime',
      labels: {
          overflow: 'justify'
      }
  },
  yAxis: {
      title: {
          text: undefined
      },
      minorGridLineWidth: null,
      gridLineWidth: null,
      alternateGridColor: null,
      plotBands: [{ 
          from: 0.5,
          to: 1.5,
          color: 'rgba(68, 170, 213, 0.1)',
          label: {
              text: 'Grave Depressão',
              style: {
                  color: '#606060'
              }
          }
      }, { 
          from: 1.5,
          to: 2.5,
          color: 'rgba(0, 0, 0, 0)',
          label: {
              text: 'Moderado Alto Depressão',
              style: {
                  color: '#606060'
              }
          }
      }, { 
          from: 2.5,
          to: 3.5,
          color: 'rgba(68, 170, 213, 0.1)',
          label: {
              text: 'Moderado Baixo Depressão',
              style: {
                  color: '#606060'
              }
          }
      }, { 
          from: 3.5,
          to: 4.5,
          color: 'rgba(0, 0, 0, 0)',
          label: {
              text: 'Leve Depressão',
              style: {
                  color: '#606060'
              }
          }
      }, { 
          from: 4.5,
          to: 5.5,
          color: 'rgba(244, 246, 245, 1)',
          label: {
              text: 'Estável',
              style: {
                  color: ''
              }
          }
      }, { 
          from: 5.5,
          to: 6.5,
          color: 'rgba(0, 0, 0, 0)',
          label: {
              text: 'Leve Mania',
              style: {
                  color: '#606060'
              }
          }
      }, { 
          from: 6.5,
          to: 7.5,
          color: 'rgba(68, 170, 213, 0.1)',
          label: {
              text: 'Moderado Baixo Mania',
              style: {
                  color: '#606060'
              }
            }
          }, { 
            from: 7.5,
            to: 8.5,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: 'Moderado Alto  Mania',
                style: {
                    color: '#606060'
                }
              }
            },{ 
              from: 8.5,
              to: 9.5,
              color: 'rgba(68, 170, 213, 0.1)',
              label: {
                  text: 'Grave Mania',
                  style: {
                      color: '#606060'
                  }
              },
      }]
  },  
  series: [{
      
      name: 'Humor',
      data: [3, 6, 8, 4, 2, 1, 5, 3, 8, 5, 4, 9, 4, 1, 5, 7]
  }],
  
  })

Result:

graph
graph.png699×315 17.6 KB

Could someone please help me connect Firebase to my graph?

2

See: