What is the process of integrating a Google chart in an Angular 4 application?
After reading the answer to a question on Stack Overflow here, I realized that there were some missing details. Following a similar approach as mentioned in the previous answer, I encountered two errors. The first error was the absence of a call to super() for the child component and the second error occurred due to the use of "new" in this code snippet:
createBarChart(element: any): any {
return new google.visualization.BarChart(element);
}
The error message displayed was "google.visualization.BarChart is not a constructor".
I also noticed a comment suggesting the use of <ng-content> for data projection but it wasn't clearly explained.
In an effort to formulate a detailed question, here is my GoogleChartComponent:
export class GoogleChartComponent implements OnInit {
private static googleLoaded: any;
constructor() {
console.log('Here is GoogleChartComponent');
}
getGoogle() {
return google;
}
ngOnInit() {
console.log('ngOnInit');
if (!GoogleChartComponent.googleLoaded) {
GoogleChartComponent.googleLoaded = true;
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(() => this.drawGraph());
}
}
drawGraph() {
console.log('DrawGraph base class!!!! ');
}
createBarChart(element: any): any {
return new google.visualization.BarChart(element);
}
createDataTable(array: any[]): any {
return google.visualization.arrayToDataTable(array);
}
}
And here is the child component that extends it:
@Component({
selector: 'app-bitcoin-chart',
template: `
<div id="barchart_material" style="width: 700px; height: 500px;"></div>
`,
styles: []
})
export class BitcoinChartComponent extends GoogleChartComponent {
private options;
private data;
private chart;
drawGraph() {
console.log('Drawing Bitcoin Graph');
this.data = this.createDataTable([
['Price', 'Coinbase', 'Bitfinex', 'Poloniex', 'Kraken'],
['*', 1000, 400, 200, 500]
]);
this.options = {
chart: {
title: 'Bitcoin Price',
subtitle: 'Real time price data across exchanges',
},
bars: 'vertical' // Required for Material Bar Charts.
};
this.chart = this.createBarChart(document.getElementById('barchart_material'));
this.chart.draw(this.data, this.options);
}
}