Chart.js and Firebase in Ionic 2

Ionic Framework ionic-v3
1

I am trying to get data from firebase to my ionic 2 app then i will transfrom this data to a graph.
keeping in mind the that the data i want to retrieve is in an array.

2

So where is your problem?

Just use this: http://ionicframework.com/docs/v2/native/firebase/ and install Chart.js by npm

3

my problem is getting the data and transforming it then inserting into the graph

4

Not to be mean, but you’re not giving us much to work with.

Are you getting an error retrieving data?
Are you getting an error transforming data?

What code are you using to retrieve data or transform data?

5

i have an array of meter reading in my firebase database, I am trying to retrieve the data of the first 24 data in the array and convert that into a graph.

  1. so what queries can i perform to retrieve that data.
  2. what way can i convert that data to a graph or chart.
6

try AngularFire2 to load your data


with
https://www.npmjs.com/package/angular-highcharts

Highcharts offers better performance than ChartJS

7

Would you mind being a bit more specific? I’m considering adding charts to something, and I’d like to learn from your experience.

8

Follow the implementation steps on NPM or the github of the package their quite good.

As a chart example i used:

View
<div class="session-chart" [chart]="chart"></div>

import

import {Chart} from “angular-highcharts”;

Controller

ngOnInit() {
        this.chart = new Chart({
            chart: {
                type: 'line'
            },
            title: {
                text: '',
                style: {
                    display: 'none'
                }
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    animation: false
                }
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: '',
                    style: {
                        display: 'none'
                    }
                }
            },
            series: [
                {
                    name: 'Series1',
                    data: []
                }, {
                    name: 'Series2',
                    data: []
                }, {
                    name: 'Series3',
                    data: []
                }
            ]
        });

        this.routeStorageService.getSession().then(x => {
            this.session = x;

        });

        this.loading = this.loadingCtrl.create({
            content: 'Getting Datapoints...'
        });

        this.loading.present();

    }

    ionViewDidEnter() {
        this.routeStorageService.getChartDataSet().then(x => {

            let i = 0;
            let length = x.length;
            // console.log('AMOUNT OF ROWS: ', length);
            // let timestamp = new Date().getTime();
            let item;
            let redraw: boolean = false;
            for (i; i < length; i++) {
                i >= length - 1 ? redraw = true : redraw = false;
                item = x.item(i);
                this.chart.addPoint([item.time, item.something1], 0, false, false);
                this.chart.addPoint([item.time, item.something2], 1, false, false);
                this.chart.addPoint([item.time, item.something3], 2, redraw, false);
                // console.log('Redraw: ',redraw,' Time To Add Point: ' + ((new Date().getTime() - timestamp) / 1000) + 's')
            }

            // console.log('Time to render points on chart : ' + ((new Date().getTime() - timestamp) / 1000) + 's');
            this.loading.dismiss().then(() => {
            }).catch(err => console.log('Loader doesnt exist'));
        }).catch(err => {
            console.log('Could not load chart data points from SQLite: ', err);
            this.loading.dismiss().then(() => {
            }).catch(err => console.log('Loader doesnt exist'));
        });
    }

The whole redraw bool thing is because i dont want the chart to trigger when adding every data point until the very last on, hope this helps.

9

Thank you for the response!