Hello Daniel,
I tried to move load from ngOninit() to ngAfterViewInit() but still getting
same error, "google is not defined"
ngOnInit() {
}
ngAfterViewInit() {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(this.drawChart);
}
I found a document (
https://anthonygiretti.com/2017/10/12/using-google-charts-in-angular-4-project-part-1/
) that suggest to create first a class for a generic GoogleChartsBaseService
then instantiate a *PieChartConfig* model where data can be passed along
the different components.
While I'm sure that is the best way to approach this.... its logic is a bit
too deep for me (for the time beeing at least)... so I'm really looking for
a simple working snippet that I can load then adapt to my project....
Should you have any available.... :)
Thx,
Andrea
On Wednesday, 30 September 2020 at 16:58:29 UTC+2 Daniel LaLiberte wrote:
> Hi Andrea,
>
> That kind of error, "google is not defined", means that at the time you
> use the google symbol, the loader has not finished loading. I suspect the
> problem might be that ngOnInit is called before the component html has been
> defined and/or used, so the loader has not necessarily finished loading.
>
> Since your app-component html really looks more like a full page,
> including html head and body, maybe you should separate out the chart
> drawing parts into a chart-component.
>
> On Wed, Sep 30, 2020 at 9:36 AM Andrea Buzzi <abuzzi...@gmail.com> wrote:
>
>>
>> Hello,
>> due to some missing feature on "FERNman / angular-google-charts" wrapper
>> (like: role "style"/"annotation") I'm trying to feed the classic "google.
>> charts.load" into a fresh test-ui angular project (v10).
>>
>> So far I've put in app.component.html:
>>
>> <html>
>> <head>
>> <script type="text/javascript" src="
>> https://www.gstatic.com/charts/loader.js";></script>
>> </head>
>>
>> <body>
>> <div id="donutchart" style="width: 900px; height: 500px; border:solid
>> 1px black"></div>
>> </body>
>> </html>
>>
>> while app.component.ts I've the following:
>>
>> import { Component } from '@angular/core';
>>
>> declare var google: any;
>>
>> @Component({
>> selector: 'app-root',
>> templateUrl: './app.component.html',
>> styleUrls: ['./app.component.css']
>> })
>>
>> export class AppComponent {
>> title = 'test-ui';
>>
>> drawChart=function() {
>> var data = google.visualization.arrayToDataTable([['Task', 'Hours per
>> Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], [
>> 'Sleep', 7] ]);
>> var options = { title: 'My Daily Activities', pieHole: 0.4 };
>> var chart = new google.visualization.PieChart(document.getElementById
>> ('donutchart'));
>> chart.draw(data, options);
>> }
>>
>> ngOnInit() {
>> google.charts.load('current', {'packages':['corechart']});
>> google.charts.setOnLoadCallback(this.drawChart);
>> }
>>
>> }
>>
>>
>> Unfortunately this generate a "ERROR ReferenceError: google is not
>> defined"...
>>
>> Any tip to make this sample graph working in a angular environment ?
>>
>> Thx in advance for any suggestion/hint/example!
>>
>> Andrea
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Visualization API" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to google-visualizati...@googlegroups.com.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/google-visualization-api/435f4d45-d323-476c-8821-fc7c8c57dda5n%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/google-visualization-api/435f4d45-d323-476c-8821-fc7c8c57dda5n%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>>
>
>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> dlalibe...@google.com Cambridge MA
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/83c32bac-f46c-4267-99f7-c2666325d1can%40googlegroups.com.
