angularjs - for - google charts

¿Cómo integrar las cartas de Google como una directiva AngularJs?

Question

Hay algunos ejemplos de integración de Google charts como una directiva de AngularJs.

Como este: http://plnkr.co/edit/YzwjuU?p=preview

Actualización : quiero evitar esperar en google charts para estar listos antes de arrancar toda la aplicación (como se muestra en el ejemplo anterior):

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

¿Hay alguna manera de hacer esto en un solo módulo y no en toda la aplicación?

Actualización 2: he creado mi plunker y funciona sin esperar la devolución de llamada, pero no estoy seguro de si funcionará en todos los casos.

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

Answer 1

Como ya te has dado cuenta, puedes inicializar angular en la etiqueta html o body, sin esperar a que aparezca Google Chart.

Para asegurarse de que no intente representar un gráfico antes de que esté listo el código JavaScript de Google Chart, tendría la directiva $ ver una nueva propiedad / indicador de $ alcance del controlador que estableció dentro de la función de devolución de llamada para google.setOnLoadCallback. Dentro de la devolución de llamada $ watch, verifique que la bandera esté activada, luego realice su inicialización.

Answer 2

Este es un buen ejemplo de una directiva de AngularJs Google Chart Tools en acción.

• Ejemplo plunker .

Instrucciones

Estas mismas instrucciones están en el plunker en sí.

1. Descargue ng-google-chart.js desde github y agregue una etiqueta de script a su html.

2. Crea un div como:

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

3. Agrega ''googlechart'' a tu módulo de esta manera:

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

4. $scope.chart el $scope.chart así:

{
  "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

Hay un proyecto Github que envuelve los gráficos de Google en la directiva AngularJS

https://github.com/angular-google-chart/angular-google-chart

http://angular-google-chart.github.io/angular-google-chart/

Answer 4

Tenía problemas periódicos en Angular con la API de Google Chart que no se cargaba a tiempo para recibir los datos de un $ http fetch. Los datos vinieron primero a veces (no siempre), y luego su uso en la devolución de llamada fallaría con "google.visualization.DataTable no es una función"

Dentro de los datos de retorno de devolución de llamada:

var dataTable = new google.visualization.DataTable(data);

Para resolverlo, encontré en ng-google-chart.js que había una promesa llamada "googleChartApiPromise", así que la inyecté y envolví la llamada de actualización en ella:

googleChartApiPromise.then(function() {
    refreshCharts();
});

Esto parece resolver el problema.