Currently, I am utilizing Angular 8 along with the Google Charts module.
My latest endeavor involved creating a Google Calendar Chart to complement some existing Google charts within my project.
However, upon passing the data in my component.html file, I encountered an error indicated by my IDE, stating that
Type (Date|number)[][] is not assignable to type Array<Array<string|number>>Despite successfully compiling on the front-end, when navigating to the page containing the Google calendar, it crashes or becomes unresponsive.
The code snippet from my something.component.html:
<google-chart
[type]="Calendar"
[data]="calendarChartData" <----------------------- HERE IS THE ERROR
[columnNames]="calendarChartColumnNames"
[options]="calendarChartOptions">
</google-chart>
The corresponding section in 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]
];
Lastly, within my something.module.ts:
...
import { GoogleChartsModule } from 'angular-google-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...