AngularJS/ Javascript

Usando o Google Charts com AngularJS

angular_header

Se você já tentou usar o Google Charts junto com uma aplicação Angular, você acaba de esbarrar no primeiro problema relacionado à compatibilidade do AngularJS.

Geralmente quando você injeta o escopo do Angular no html, você faz dessa maneira.

<html class="no-js" lang="pt-BR" ng-app="SeuApp">

O problema que a Biblioteca do Google Charts ou melhor, Google Visualization Library carrega um pouco atrasada ao comparada com a introspecção do DOM com o AngularJS, por que ela além de ser carregada dinamicamente de outro domínio, você ainda tem que esperar ele criar o objeto e assim fazer o parse dentro de um controller.

Acaba dando o seguinte erro.

 
Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element '<body>'
http://errors.angularjs.org/1.2.16/ng/btstrpd?p0=%3Cbody%3E

Resumindo bem a história, você tem que esperar fazer o download da lib para máquina do cliente, e então só assim você pode usa-lá. Ah! Nem adianta você tentar baixar a biblioteca e rodar de forma off-line como lib em seu domínio, isso vai contra as regras de distribuição do Google e você(sua empresa) pode acabar se dando mal. Já que é contra os termos de uso.

Como fazer então?

Primeiro passo é remover o tag ng-app que define o escopo da sua aplicação no html principal.

Segundo passo, adicione o script do Google Charts em sua aplicação antes da inclusão do script do angularjs ou jquery, por exemplo.

<script src="https://www.google.com/jsapi" type="text/javascript"></script>

Terceiro passo, inclua a declaração da sua aplicação no loadCallBack(), que é o método usado pelo Google Charts para avisar que está pronto para ser utilizado.

/*global google*/
 
'use strict';
var app;
 
google.setOnLoadCallback(function() {
    angular.bootstrap(document.body, ['seuApp']);
  });
 
google.load('visualization', '1', {packages: ['corechart']});
 
var app = angular.module('seuApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngAnimate',
  'ngCollection',
  'ngGrid',
  'seuApp.services'
]);

Você fica acaba de ficar livre de um pequeno problema que facilmente você verá soluções utilizando directivas do Angular, ao invés de utilizar a própria lib em si.

Google Charts, não é uma preferência pessoal, é uma necessidade, já que imita muito as famosas Flex Charts, que tanto utilizei em diferentes BI por ai, a única forma que seria chata é justamente essa de esperar carregar.

Só que se me perguntarem qual solução de fato você usaria para documentos com gráficos, eu diria que a D3js.org seria minha preferência de imediato, já que me deixa totalmente livre do eixo x,y e explorar formas mais diversificada dados.

One thought on “Usando o Google Charts com AngularJS

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *