CODEWITHSUNDEEP
angulartypescriptgoogle-visualization
curiousMinded
curiousMinded

Reputation: 336

Angular, typescript, google charts - Type (Date|number)[][] is not assignable to type Array<Array<string|number>>

I use angular 8 with google charts module.

I tried to create a Google Calendar Chart to add it to some other already working google charts.

However, in my component.html when I pass on the data, I get an error (warning by the IDE) that Type (Date|number)[][] is not assignable to type Array<Array<string|number>>. I am at a loss because to me it seems that I pass on the 2D array of Dates and Values as required.

Although my front-end does compile, when I go to the page with the google calendar, the page crashes/gets stuck.

My something.component.html:

<google-chart
            [type]="Calendar"
            [data]="calendarChartData"  <----------------------- HERE IS THE ERROR
            [columnNames]="calendarChartColumnNames"
            [options]="calendarChartOptions">
</google-chart>

My something.component.ts:

calendarChartOptions = {
    title: 'Some title',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      cellSize: 10,
    }
  };
  calendarChartColumnNames = ['Date', 'someNumber'];
  calendarChartData = [
    [new Date(2019, 3, 13), 333],
    [new Date(2019, 9, 16), 372],
    [new Date(2019, 9, 17), 5333],
    [new Date(2019, 9, 18), 3702],
    [new Date(2019, 9, 19), 3103],
    [new Date(2019, 9, 20), 2244],
    [new Date(2019, 9, 21), 9531],
    [new Date(2019, 9, 22), 5503]
  ];

My something.module.ts:

...
import { GoogleChartsModule } from 'angular-google-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

Upvotes: 1

Views: 720

Answers (1)

Zze
Zze

Reputation: 18805

I've not used Google Charts before...

From the error it sounds like all you need to do is convert your dates to strings..

...
calendarChartData = [
    [new Date(2019, 3, 13).toISOString(), 333],
    [new Date(2019, 3, 13).toDateString(), 333], // not sure exactly which format the module requires.
    ...
  ];

Upvotes: 2

Related Questions