How to auto-update geochart chart (from angular2 google charts) when the data value changes?

Question

I am using geochart from angular2-google-charts to display some data collected from a public API.

I also have a form input, on the event of which I send a different query to updated the chart data but this doesn't get reflected in the geochart.

<h2>
  <form >
    <mat-form-field>
      <mat-select [(ngModel)]="selectedWeek" name="food" (selectionChange)="displayData($event.value)">
        <mat-option *ngFor="let week of weeks" [value]="week.value">
          {{week.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </form>
</h2>
<div class = "map" >
  <h2>Covid confirmed Cases!</h2>
  <google-chart  [data]="cases" *ngIf=mapReady></google-chart>
</div>

Here is my component:

import {Component} from '@angular/core';
import { DataService } from "./data.service";
import { GoogleChartInterface } from 'ng2-google-charts';


interface Weeks {
  value: number;
  viewValue: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']  
})
export class AppComponent {
  
  weeks: Weeks[] = [
    {value: 27, viewValue: 'Latest'},
    {value: 20, viewValue: '1 Week back'},
    {value: 13, viewValue: '2 Weeks back'},
    {value: 7, viewValue: '3 Weeks back'},
    {value: 1, viewValue: '4 Weeks back'}
  ];

  options: string[] = ["cases", "deaths", "recovered"];
  selectedWeek: number = 27;

  states_cases = [['State','COVID-Confirmed Cases: ']];
  response: any[]=[];
  mapReady=false;
  public cases: GoogleChartInterface = {
    chartType: 'GeoChart',
    dataTable: this.states_cases,
    options: {
      region: 'DE',
      colorAxis: {colors: ['#00F919', '#0FFFE4', '#1FA20F','#156930','#033E3B']},
      resolution: 'provinces',
      backgroundColor: '#00000',
      datalessRegionColor: '#00000',
      defaultColor: '#00000',
      'height': 600,
    }
  };
 constructor(public serv: DataService){}
  ngOnInit(){
    this.displayData(27);
  }
  displayData(week:number) {
    console.log(week)    
   
    this.serv.getStatesCases().subscribe((res)=>{
      this.pushCaseData(res, week);
      },
      (err)=>{
        console.log(err)
      }
    );
  }
  
  pushCaseData(res, week: number) {
    console.log(week);
    console.log(res.data.BY.history[week].cases)
    this.states_cases.push(
      [res.data.BB.name, this.states_cases[0][1] + String(res.data.BB.history[week].cases)],
      [res.data.BE.name, this.states_cases[0][1] + String(res.data.BE.history[week].cases)],
      [res.data.BW.name, this.states_cases[0][1] + String(res.data.BW.history[week].cases)],
      [res.data.BY.name, this.states_cases[0][1] + String(res.data.BY.history[week].cases)],
      [res.data.HB.name, this.states_cases[0][1] + String(res.data.HB.history[week].cases)],
      [res.data.HE.name, this.states_cases[0][1] + String(res.data.HE.history[week].cases)],
      [res.data.HH.name, this.states_cases[0][1] + String(res.data.HH.history[week].cases)],
      [res.data.MV.name, this.states_cases[0][1] + String(res.data.MV.history[week].cases)],
      [res.data.NI.name, this.states_cases[0][1] + String(res.data.NI.history[week].cases)],
      [res.data.NW.name, this.states_cases[0][1] + String(res.data.NW.history[week].cases)],
      [res.data.RP.name, this.states_cases[0][1] + String(res.data.RP.history[week].cases)],
      [res.data.SH.name, this.states_cases[0][1] + String(res.data.SH.history[week].cases)],
      [res.data.SL.name, this.states_cases[0][1] + String(res.data.SL.history[week].cases)],
      [res.data.SN.name, this.states_cases[0][1] + String(res.data.SN.history[week].cases)],
      [res.data.ST.name, this.states_cases[0][1] + String(res.data.ST.history[week].cases)],
      [res.data.TH.name, this.states_cases[0][1] + String(res.data.TH.history[week].cases)],
      );
    this.mapReady=true
  }

 

The correct data is displayed once, but when I change something in the form input, a new query is made successfully and pushed to states_cases which is assigned to the respective dataTable. Even though the value of states_cases is updated but the chart doesn't.

Answer 1

https://www.devrandom.it/software/ng2-google-charts/additional-documentation/advanced-usage.html

calling draw() method on the chart component (in my case: this.cases.component) did the trick