How to connect Firebase on a graph? - firebase

Question

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:
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:
Could someone please help me connect Firebase to my graph?