Htykuut

I'm trying to retrieve some data from Firebase RealTime Database, I'm being able to plot the data that I'm retrieving, but I don't know how to parse this data received as an Observable, to a list that I could plot on Chart.js or any other chart framework.

Here is my datastored.ts module 



<pre>

    import { Component } from '@angular/core';

    import { IonicPage, NavParams, DateTime } from 'ionic-angular';

    import { NavController, Item } from 'ionic-angular';

    import { Observable } from 'rxjs-compat';

    import { AngularFireDatabase } from '@angular/fire/database';



    @IonicPage({

      name: 'DatastoredPage'

    })

    @Component({

      selector: 'page-datastored',

      templateUrl: 'datastored.html',

    })



    export class DatastoredPage {

      myDateStart:string = "2018-10-04"

      myDateEnd:string = "2018-10-30"

      incubator30: Observable<any>;  



      constructor(public navCtrl: NavController, public navParams: NavParams, private db:AngularFireDatabase) {



        this.incubator30 = db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();    

      }



      ionViewDidLoad() {

        console.log('ionViewDidLoad DatastoredPage');

        console.log(this.incubator30);

      }  

      getstartByDate() {

        console.log(this.myDateStart);

        console.log("Before the Startdate filter");

        this.incubator30 = this.db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();

        console.log("After the Startdate filter");

        this.incubator30.forEach(element => {

          element.forEach(co => {

            console.log(co.d)        

          })

        });

      }



      getendByDate() {

        console.log(this.myDateEnd);

        console.log("Before the Enddate filter");

        this.incubator30 = this.db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();

        console.log("After the Enddate filter");

        this.incubator30.forEach(element => {

          element.forEach(co => {

            console.log(co.d)

          })

        });

      }  

    }

    </pre>

And here is my HTML code where I'm being able to display that data retrieved.

    class="bgstyle" *ngFor="let StoredData of incubator30 | async">

    {{StoredData.d | json}} - {{StoredData.t | json}} {{StoredData.f | json}}dBA

How on the datastored.ts module I'll be able to read the information I want (date(d) and measurement(f) into a variable that I can plot on chart.js or highchart, or any other chart platform.

I was able to solve it, subscribing to the variable I'll would like to plot. Which as 'd' and 'f'.

this.incubator30.subscribe((res) => {

        this.date = res.map((value) => { return value.d });

        this.list = res.map((value) => { return value.f      



      })

Thanks.