How to integrate Google charts as an AngularJs directive? - angularjs

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.
Download ng-google-chart.js from github and add a script tag to your html.
Create a div like:
<div google-chart chart="chart" style="{{chart.cssStyle}}">
</div>
Add 'googlechart' to your module like this:
angular.module('myApp',[ 'googlechart', ...
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
}

Answer 2

As you already figured out, you can initialize angular in the html or body tag, without waiting for google charts.
To ensure you don't try to render a chart before the google chart JavaScript code is ready,
I would have the directive $watch a new controller $scope property/flag that you set inside the callback function for google.setOnLoadCallback. Inside the $watch callback, check to ensure the flag is set, then do your initialization.

Answer 3

There is Github project that wraps Google Charts into AngularJS directive
https://github.com/angular-google-chart/angular-google-chart
http://angular-google-chart.github.io/angular-google-chart/

Answer 4

I was having periodic trouble in Angular with the google chart API not being loaded on time to receive the data from a $http fetch. The data came first sometimes (not always), and then the usage of it in the callback would fail with "google.visualization.DataTable is not a function"
Inside the callback returning data:
var dataTable = new google.visualization.DataTable(data);
To solve it, I found in ng-google-chart.js that there was a promise called "googleChartApiPromise", so I injected it, and wrapped the refresh call in it:
googleChartApiPromise.then(function() {
refreshCharts();
});
This seems to solve the problem.