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 w

Answer 1

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 2

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
}

Answer 3

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 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.