Google Charts: ERROR TypeError: "c is undefined"

Question

I am using google charts to show Covid data from an API and even though the data is loaded in ngOnInit(), I am getting the error: ERROR TypeError: "c is undefined". Here is my code:

import {Component} from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'app-root',
  template: '<google-chart [data]="geoChart" *ngIf=mapReady></google-chart>',
  styleUrls: ['./app.component.css']  
})
export class AppComponent {
  states_data = [['State','COVID-Confirmed Cases']];
  response: any[]=[];
  mapReady=false;
  constructor(public serv: DataService){}

  ngOnInit(){
    this.serv.getData().subscribe((res)=>{
      console.log(res)
        this.response=res.statewise;
        this.response.splice(0,1);

        for(let state of this.response){
          let temp = [state.state,Number(state.confirmed)];
          if( state.state=="Odisha"){
            temp = ['IN-OR',Number(state.confirmed)];
          }
          this.states_data.push(temp);
        }
        this.mapReady=true
      },
      (err)=>{
        console.log(err)
      }
    );
  }
  
  public geoChart: any = {
    chartType: 'GeoChart',
    dataTable: this.states_data,
    options: {
      region: 'IN', // INDIA
      colorAxis: {colors: ['#00F919', '#0FFFE4', '#1FA20F','#156930','#033E3B']},
      resolution: 'provinces',
      backgroundColor: '#00000',
      datalessRegionColor: '#00000',
      defaultColor: '#00000',
      'height': 600,
    }
  };
}

I found some similar questions on Stack overflow but they were related to Data-tables, and I am using google-charts. Does anyone have any idea what could be it? If you need more information, I would be happy to provide it.

Thanks in advance!

Answer 1

Replace you component with the below code:

import {Component} from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'app-root',
  template: '<google-chart [data]="geoChart" *ngIf="geoChart"></google-chart>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  states_data = [['State','COVID-Confirmed Cases']];
  response: any[] = [];
  geoChart;
  constructor(public serv: DataService) {}

  ngOnInit() {
    this.serv.getData().subscribe( (res) => {
      if (res && res.statewise) {
          this.response = res.statewise;
          this.response.splice(0, 1);
          for (let state of this.response) {
            let temp = [state.state, Number(state.confirmed)];
            if ( state.state == "Odisha") {
                temp = ['IN-OR', Number(state.confirmed)];
            }
            this.states_data.push(temp);
          }
          this.geoChart = {
              chartType: 'GeoChart',
              dataTable: this.states_data,
              options: {
                region: 'IN', // INDIA
                colorAxis: {colors: ['#00F919', '#0FFFE4',
                        '#1FA20F','#156930','#033E3B']},
                resolution: 'provinces',
                backgroundColor: '#00000',
                datalessRegionColor: '#00000',
                defaultColor: '#00000',
              'height': 600,
              }
            };
        }
    },
    (err) => {
      console.log(err);
    });
  }
}

Answer 2

Adjust your template, put [type]="your_type"

@Component({
  selector: 'app-root',
  template: '<google-chart [type]="GeoChart" [data]="geoChart" *ngIf=mapReady></google-chart>',
  styleUrls: ['./app.component.css']  
})

In my case the 'type' was either invalid or null.