CODEWITHSUNDEEP
javascriptangularjsgoogle-visualization
Miguel Xoel Garcia
Miguel Xoel Garcia

Reputation: 307

Can't show Google Charts in Angular

So here is what I've done so far:

1) Installed angular-google-charts through bower install 2) Create a controller with this header:

angular.module("sbAdminApp", ["googlechart", "googlechart-docs"])
.controller("GenericChartCtrl",['$scope', '$timeout', function ($scope) {

3) Add this script to the index:

<script src="bower_components/angular-google-chart/src/googleChart.js"></script>

and

 <div ng-app="sbAdminApp">

        <div ui-view></div>

    </div>

4) To finally show the Chart, I call:

  <div class="col-lg-6 col-sm-12" ng-controller="GenericChartCtrl">
    <div google-chart chart="chartObject" class="chart-container"> </div>
    </div>

5) In App.js. I declare this:

    .state('dashboard.table', {
        templateUrl: 'views/table.html',
        url: '/table', 
    controller: "GenericChartCtrl",
      resolve: {
            loadMyFile: function ($ocLazyLoad) {
                return $ocLazyLoad.load({
                        name: 'googlechart',
                        files: [
        'bower_components/angular-google-chart/dist/ng-google-chart.min.js'
      ]
                    }),
                    $ocLazyLoad.load({
                        name: 'sbAdminApp',
                        files: ['scripts/controllers/GoogleChartContoller.js']
                    })
            }
        }

    })

Am I missing something? For some reason, I can't access to localhost:9000/#/dashboard/table, it just doesn't load.

Any ideas?

EDIT: This is wht the web console shows: enter image description here

Upvotes: 1

Views: 1394

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

Most likely you are getting this error since the referenced googleChart.js file does not contain module implementation.

Replace the line:

<script src="bower_components/angular-google-chart/src/googleChart.js"></script>

with:

<script src="bower_components/angular-google-chart/ng-google-chart.js"></script>

Upvotes: 2

Related Questions