How to integrate Google charts as an AngularJs directive?

Question

There are some examples of integrating Google charts as an AngularJs directive.

Like this one: http://plnkr.co/edit/YzwjuU?p=preview

Update: I want to avoid waiting on google charts to be ready before bootstrapping the whole application (as shown in the example above):

 google.setOnLoadCallback(function() {         angular.bootstrap(document.body, ['myApp']);     }); 

Is there a way to do this in a single module and not on the whole app?

Update 2: I have created my plunker and it works without waiting for the callback but I'm not sure if it will work in all cases.

http://plnkr.co/edit/7UUfcq4dD7nd4MylB4ni

Answer 1

Here is a good example of a AngularJs Google Chart Tools directive in action.

• Example plunker.

Instructions

These same instructions are in the plunker itself.

1. Download ng-google-chart.js from github and add a script tag to your html.

2. Create a div like:

   <div google-chart chart="chart" style="{{chart.cssStyle}}"> </div>

3. Add 'googlechart' to your module like this:

   angular.module('myApp',[ 'googlechart', ...

4. Populate the $scope.chart like this:

{   "type": "ColumnChart",   "cssStyle": "height:200px; width:300px;",   "data": {     "cols": [       {         "id": "month",         "label": "Month",         "type": "string",         "p": {}       },       {         "id": "laptop-id",         "label": "Laptop",         "type": "number",         "p": {}       },       {         "id": "desktop-id",         "label": "Desktop",         "type": "number",         "p": {}       },       {         "id": "server-id",         "label": "Server",         "type": "number",         "p": {}       },       {         "id": "cost-id",         "label": "Shipping",         "type": "number"       }     ],     "rows": [       {         "c": [           {             "v": "January"           },           {             "v": 19,             "f": "42 items"           },           {             "v": 12,             "f": "Ony 12 items"           },           {             "v": 7,             "f": "7 servers"           },           {             "v": 4           }         ]       },       {         "c": [           {             "v": "February"           },           {             "v": 13           },           {             "v": 1,             "f": "1 unit (Out of stock this month)"           },           {             "v": 12           },           {             "v": 2           }         ]       },       {         "c": [           {             "v": "March"           },           {             "v": 24           },           {             "v": 0           },           {             "v": 11           },           {             "v": 6           }         ]       }     ]   },   "options": {     "title": "Sales per month",     "isStacked": "true",     "fill": 20,     "displayExactValues": true,     "vAxis": {       "title": "Sales unit",       "gridlines": {         "count": 6       }     },     "hAxis": {       "title": "Date"     }   },   "formatters": {},   "displayed": true }