title: Display Dynamic Data in Angular6 with GoogleChart
body: <p>I use Angular Cli6, angularfire2 and firebase. I want to create a timeline with GoogleChart.</p>
  
  <p>//GoogleChart.service </p>
  
  <pre><code>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) =&gt; 
          {
          var datatable = google.visualization.arrayToDataTable(data);
          chartFunc().draw(datatable, options); 
          };   
     var callback = () =&gt; func(chartFunc, options);
     google.charts.setOnLoadCallback(callback);
     }
  }
  </code></pre>
  
  <p>TimelineChart.service</p>
  
  <pre><code>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 = () =&gt; { return new google.visualization.Timeline(document.getElementById(elementId)); };
      var options = {
              traitement: config.traitement,
                    datedebut: config.datedebut,
              datefin: config.datefin,
  
        };
  
      this.buildChart(data, chartFunc, options);
    }
  }
  </code></pre>
  
  <p>Timeline.html</p>
  
  <pre><code>&lt;div id="{{elementId}}" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>Timeline.ts</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>And the component to display the graph :</p>
  
  <p>Component.html</p>
  
  <pre><code> &lt;div class="full"&gt;&lt;app-gantt [data]="data1" [config]="config1" [elementId]="elementId1"&gt;&lt;/app-gantt&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Component.ts</p>
  
  <pre><code>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) =&gt; {
     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';
  </code></pre>
  
  <p>Now i can display my graph easily with data write in my component</p>
  
  <p><a href="https://i.stack.imgur.com/3d5Ag.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3d5Ag.jpg" alt="enter image description here"></a></p>
  
  <p>but my data are stocked in firebase like that :</p>
  
  <p><a href="https://i.stack.imgur.com/Gwcl4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gwcl4.png" alt="enter image description here"></a></p>
  
  <p>I display the data with an observable from angularfire2</p>
  
  <p>DATA.Service.TS </p>
  
  <pre><code>getPPSByPatientid(Patientid: string){
  return this.database.list('/ppss', ref =&gt; ref.orderByChild("Patientid").equalTo(Patientid)).valueChanges();
  }
  </code></pre>
  
  <p>I try this in my component .ts in order to have the good array for this.data1 but witout succes
  <code>Console.log(this.data1)</code> send an array of undefined</p>
  
  <pre><code>let interestingFields = [ 'treatement','dateA', 'dateB'];
      this.ppssToDisplay.subscribe(obj =&gt; {
        this.data1 = [
          interestingFields,
          interestingFields.map(field =&gt; obj[field]),
        ];
      console.log(this.data1);
      });
  
  
  Error:
  
      core.js:1598 ERROR Error: Uncaught (in promise): Error: Not an array Error: Not an array
  </code></pre>
  
  <p>I wanted to put all of my code so you could have complete visualization of what I want to do.</p>
  
  <p>My question is: Have I chosen the right solution or should I use a loop in my template to populate the chart?</p>
  
  <p>And could someone show me the voice so I can sleep again (5 days lol)</p>