Google Chart Tools AngularJS Directive Module

Question

I am trying to get Angular working with Google Charts via the Google Charts Angular Directive Module but can't seem to get it to work. I get this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Angular Code:

var myApp = angular.module("myApp", ['googlechart']);

myApp.factory("DataService", ["$http", function ($http){
    var getData = function(callback){
        var url = 'api-url-returns-json';
        $http.get(url).success( function(response) {
            callback(response);
        });
    }
    return {
            getDashboardData: getData
        }
}]);

myApp.controller("dashboardController", ["$scope", "DataService", "ClockProvider", function ($scope, DataService, ClockProvider){
    DataService.getDashboardData(function(data){
        $scope.dashboard = data;
    });
    var intervals = ["0", "30"];
    ClockProvider.run(intervals, function(){
        DataService.getDashboardData(function(data){
            $scope.dashboard = data;
        });
    });
}]);


angular.module("myApp", ["googlechart", "googlechart-docs"]).controller("GenericChartCtrl", function ($scope) {
    $scope.chartObject = {};

    $scope.chartObject.type = "BarChart";

    $scope.onions = [
        {v: "Onions"},
        {v: 3},
    ];

    $scope.chartObject.data = {"cols": [
        {id: "t", label: "Topping", type: "string"},
        {id: "s", label: "Slices", type: "number"}
    ], "rows": [
        {c: [
            {v: "Mushrooms"},
            {v: 3},
        ]},
        {c: $scope.onions}
        {c: [
            {v: "Olives"},
            {v: 31}
        ]},
        {c: [
            {v: "Zucchini"},
            {v: 1},
        ]},
        {c: [
            {v: "Pepperoni"},
            {v: 2},
        ]}
    ]};

    $scope.chartObject.options = {
        'title': 'How Much Pizza I Ate Last Night'
    };
});

HTML:

    <html ng-app="myApp">
        <head>
            <script src="ng-google-chart.js"></script>
            <script src="app.js"></script>
        </head>
        <body>
            <div class="side front" ng-controller="GenericChartCtrl">
                <div google-chart chart="chartObject"">
                </div>
            </div>
        </body>
   </html>

I think you forgot to load your JS code in <script> tag :) — Triet Doan
– Triet Doan, Commented Feb 12, 2016 at 13:45
Seems kind of similar to this question, you have not instantiated and used angular module correctly, OR you are missed to add script reference on page. — Pankaj Parkar
– Pankaj Parkar, Commented Feb 12, 2016 at 13:45

Triet Doan · Accepted Answer · 2016-02-12 13:52:36Z

1

First, you are mistaking between declaring and calling the AngularJS module.

To declare a module, you use:

var myApp = angular.module("<Your app name>", [<Your dependencies>]);

However, to call the module (to create a controller, for example) just use:

//Notice that you don't put the [] in .module()
angular.module("myApp").controller

After fixing it, if the problem is still there, please check the reference. Remember to load all your necessary JS code, and in the correct order (load your dependencies before loading your app). For example:

<script src="Your dependencies path"></script>
<script src="Your Angular app path"></script>

answered Feb 12, 2016 at 13:52

Triet Doan

12.2k9 gold badges42 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ajgisme Over a year ago

I've done that but still didn't work :/ Is there any other info you want to know that could help?

Triet Doan Over a year ago

When creating the GenericChartCtrl, try using myApp.controller instead of angular.module().controller. Remember to move the googlechart-docs dependency to the module declaration, so it should be var myApp = angular.module("myApp", ['googlechart', 'googlechart-docs']);

ajgisme Over a year ago

I found out what it was! It was an error with the Google Chart example's data array, it was missing a comma after here: {c: $scope.onions}

Triet Doan Over a year ago

LOL! Congratulations :D

Stepan Suvorov · Accepted Answer · 2016-02-12 13:44:14Z

0

it looks like you are trying to define myApp 2 times:

var myApp = angular.module("myApp", ['googlechart']);

...
angular.module("myApp", ["googlechart", "googlechart-docs"]).

if you want just to call the module then you should use:

var myApp = angular.module("myApp", ['googlechart', 'googlechart-docs']);

...
angular.module("myApp").

answered Feb 12, 2016 at 13:44

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

Comments

Jim Aho · Accepted Answer · 2016-02-12 13:52:26Z

0

You cannot define a module twice with different dependencies.

At the top you have var myApp = angular.module("myApp", ['googlechart']);

and a bit down you have angular.module("myApp", ["googlechart", "googlechart-docs"])....

You can however call angular.module("myApp") multiple times just fine, this will just give you a reference to your actual module.

answered Feb 12, 2016 at 13:52

Jim Aho

12.3k19 gold badges62 silver badges96 bronze badges

Collectives™ on Stack Overflow

Google Chart Tools AngularJS Directive Module

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related