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.