Eu uso Angular Cli6, angularfire2 e firebase. Quero criar uma linha do tempo com o GoogleChart.

//GoogleChart.service

declare var google: any;

export class GoogleChartsBaseService 
{
  constructor() { google.charts.load('current', {'packages':["timeline"]}); }

   protected buildChart(data: any[], chartFunc: any, options: any) : void {
   var func = (chartFunc, options) => 
        {
        var datatable = google.visualization.arrayToDataTable(data);
        chartFunc().draw(datatable, options); 
        };   
   var callback = () => func(chartFunc, options);
   google.charts.setOnLoadCallback(callback);
   }
}

TimelineChart.service

import { GoogleChartsBaseService } from './google-charts-base.service';
import { Injectable } from '@angular/core';
import { GanttChartConfig } from './../models/GanttChartConfig.model';

declare var google: any;

@Injectable()
export class GoogleGanttChartService extends GoogleChartsBaseService {

  constructor() { super(); }

  public BuildPieChart(elementId: string, data: any[], config: GanttChartConfig) : void {  
    var chartFunc = () => { return new google.visualization.Timeline(document.getElementById(elementId)); };
    var options = {
            traitement: config.traitement,
                  datedebut: config.datedebut,
            datefin: config.datefin,

      };

    this.buildChart(data, chartFunc, options);
  }
}

Timeline.html

<div id="{{elementId}}" ></div>

Timeline.ts

import { Component, Input, OnInit } from '@angular/core';
import { GoogleGanttChartService } from './../../services/google-gantt-chart.service';
import { GanttChartConfig } from './../../models/GanttChartConfig.model';
declare var google: any;

@Component({
  selector: 'app-gantt',
  templateUrl: './gantt.component.html',
  styleUrls: ['./gantt.component.scss']
})
export class GanttComponent implements OnInit {

    @Input() data: any[];
    @Input() config: GanttChartConfig;
    @Input() elementId: string;

 constructor(private _ganttChartService: GoogleGanttChartService) {}

    ngOnInit(): void {
        this._ganttChartService.BuildPieChart(this.elementId, this.data, this.config);
    }
}

E o componente para exibir o gráfico:

Component.html

 <div class="full"><app-gantt [data]="data1" [config]="config1" [elementId]="elementId1"></app-gantt></div>

Component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Patient } from '../models/patient.model';
import { Diagnostic } from '../models/diagnostic.model';
import { ActivatedRoute, Router } from '@angular/router';
import { PatientsService } from '../services/patients.service';
import { DiagnosticsService } from '../services/diagnostics.service';
import { PPSsService } from '../services/ppss.service';
import { AngularFireDatabase, AngularFireList, AngularFireObject, AngularFireAction } from 'angularfire2/database';
import { Location } from '@angular/common';
import { Observable } from 'rxjs/Observable';
import { GanttChartConfig } from './../models/GanttChartConfig.model';
import { PPS } from '../models/pps.model';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA,MatDatepickerModule, MatFormFieldModule,} from '@angular/material';
import { FormControl, FormControlName, FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { startWith } from 'rxjs/operators/startWith';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

  @Component({
  selector: 'app-pps',
  templateUrl: './pps.component.html',
  styleUrls: ['./pps.component.scss']
})
export class PpsComponent implements OnInit {
 patientid: string;
 patientToDisplay;
 ppssToDisplay;
 data1: any[];
 config1: GanttChartConfig;
 elementId1: string;

constructor( 
    private route: ActivatedRoute, 
    private location: Location,
    private patientsService: PatientsService,
    private diagnosticsService: DiagnosticsService,
    private ppssService: PPSsService,
    private router: Router, 
    public dialog: MatDialog, 
    ){ }
  ngOnInit() {

   this.route.params.forEach((urlParameters) => {
   this.patientid = urlParameters['id'];});
   this.patientToDisplay = 
   this.patientsService.getSinglePatient(this.patientid);
   this.ppssToDisplay = this.ppssService.getPPSByPatientid(this.patientid);


   this.data1 = [[ 'traitement','start', 'end'],
   [ 'Chirurgie',  new Date(2017, 3, 29), new Date(2017, 3, 30)],
   [ 'Chimiothérapie', new Date(2017, 2, 4),  new Date(2018, 2, 4)],
   [ 'Radiothérapie',   new Date(2017, 2, 4),  new Date(2018, 2, 4)]]; 

   this.config1 = new GanttChartConfig( '',new Date (),new Date ());
   this.elementId1 = 'myGanttChart';

Agora eu posso exibir meu gráfico facilmente com dados gravados no meu componente

mas meus dados são armazenados em firebase assim:

Eu exibo os dados com um observável do angularfire2

DATA.Service.TS

getPPSByPatientid(Patientid: string){
return this.database.list('/ppss', ref => ref.orderByChild("Patientid").equalTo(Patientid)).valueChanges();
}

Eu tento isso no meu componente .ts para ter uma boa matriz para this.data1, mas sem sucessoConsole.log(this.data1) envie uma matriz de indefinida

let interestingFields = [ 'treatement','dateA', 'dateB'];
    this.ppssToDisplay.subscribe(obj => {
      this.data1 = [
        interestingFields,
        interestingFields.map(field => obj[field]),
      ];
    console.log(this.data1);
    });


Error:

    core.js:1598 ERROR Error: Uncaught (in promise): Error: Not an array Error: Not an array

Eu queria colocar todo o meu código para que você pudesse ter uma visualização completa do que eu quero fazer.

Minha pergunta é: Escolhi a solução certa ou devo usar um loop no meu modelo para preencher o gráfico?

E alguém poderia me mostrar a voz para que eu possa dormir novamente (5 dias lol)