vimalavinisha / angular2-google-chart

Angular 2 google chart
MIT License
59 stars 45 forks source link

'google' is not defined - Angular2 - RC6 #12

Open KrishnanSriram opened 8 years ago

KrishnanSriram commented 8 years ago
zone.js:484 Unhandled Promise rejection: Error in http://localhost:4200/app/home/dashboard/piechart.component.html:8:25 caused by: google is not defined ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in http://localhost:4200/app/home/dashboard/piechart.component.html:8:25 caused by: goo…, originalError: ReferenceError: google is not defined
    at GoogleChart.ngOnInit (http://localhost:4200/app/directi…, context: DebugContext} ReferenceError: google is not defined
    at GoogleChart.ngOnInit (http://localhost:4200/app/directives/angular2-google-chart.directive.js:21:13)
    at DebugAppView._View_PiechartComponent0.detectChangesInternal (PiechartComponent.ngfactory.js:111:80)
    at DebugAppView.AppView.detectChanges (http://localhost:4200/vendor/@angular/core/bundles/core.umd.js:12061:18)
    at DebugAppView.detectChanges (http://localhost:4200/vendor/@angular/core/bundles/core.umd.js:12166:48)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/vendor/@angular/core/bundles/core.umd.js:12087:23)
    at DebugAppView._View_DashboardComponent0.detectChangesInternal (DashboardComponent.ngfactory.js:270:8)
    at DebugAppView.AppView.detectChanges (http://localhost:4200/vendor/@angular/core/bundles/core.umd.js:12061:18)
    at DebugAppView.detectChanges (http://localhost:4200/vendor/@angular/core/bundles/core.umd.js:12166:48)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/vendor/@angular/core/bundles/core.umd.js:12087:23)
    at DebugAppView._View_DashboardComponent_Host0.detectChangesInternal (DashboardComponent_Host.ngfactory.js:31:8)

I have defined googleLoaded in my component's template HTML. Here's the sample code for the same

<!--Google charts-->
<!--Div that will hold the pie chart-->
<div>
    <div id="line_chart" [chartData]="line_ChartData" [chartOptions]= "line_ChartOptions" chartType="LineChart" GoogleChart>

    </div>
</div>
JosephSe commented 7 years ago

Please do Step 1 as mentioned

<script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    // !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
    var googleLoaded = false;
    // !important: Define which chart packages to preload.Because this package uses ChartWrappers you can use any chart type that Google supports, but if it // isn't loaded it will load it on demand. 
    var googleChartsPackagesToLoad = ['geochart'];

  </script>