Ubuntu Para Iniciantes

CRIE GRÁFICOS COM O GOOGLE CHART INCREMENTE SUAS PÁGINAS

Os gráficos são excelentes representações visuais para se apresentar os mais variados tipos de resultados ou pesquisas.

Seja em um relatório ou trabalhos acadêmicos, qualquer tipo de imagem é inserida dentro de um contexto para exemplificar um determinado conteúdo. Uma excelente forma de representar uma informação por meio de uma imagem é criar um gráfico.

Com o avanço da web várias ferramentas passaram a serem criadas para deixar a páginas e os resultados que elas apresentam mais elegante.

Uma ferramenta muito interessante é o Google Chart Tool, que permite ao desenvolvedor criar gráficos sofisticados e atraentes para o usuário. 

O que você verá neste post:
  • O que é e como usar o Google Chart Tool
  • Exemplo de gráfico de barras e pizza

COMO USAR O GOOGLE CHART TOOL PARA CRIAR GRÁFICOS NA WEB

Esta ferramenta desenvolvida e ofertada pelo Google é uma forma prática, rápida e leve de desenvolver gráficos.

O que torna o Google Chart Tool é que sua estrutura de aplicação é aplicada em HTML5 e SVG. Sendo assim o carregamento de um gráfico é basicamente instantâneo. A base da biblioteca é o JavaScript.

SVG se você não sabe é o acrônimo de Scalable Vector Graphics, traduzindo, o termo que dizer algo como: imagens vetoriais escaláveis. Este padrão de imagens é usando no editor de imagens Inkscape. É também um dos formatos mais leves, pois é editado em XML, sendo interpretado pelos navegadores. 

COMO USAR ESTA FERRAMENTA

É muito simples a aplicação desta biblioteca, seu uso lhe causará até orgasmos cognitivos.

Para usar esta biblioteca basta você incorporar o código de chamada em seu website como se usa qualquer chamada de JavaScript, pois esta é estrutura básica da ferramenta. E você deverá se acostumar com arrays, muitas virgulas, colchetes e parênteses.

Logo abaixo será apresentada algumas funções básicas para que possamo gerar um gráfico de barras.

Como dito anteriormente você irá precisar fazer a chamada da biblioteca diretamente do Google Chart Tools:

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

Como é uma chamada JavaScript e também para manter seu código organizado, você deve colocar dentro da tag head do código html.

Agora deverá ser carregado o pacote de exibição ou visualização de gráficos atuais:

google.charts.load('current', {'packages':['corechart']});

Agora vamos criar a função drawChart() estã função será responsável por criar o gráfico, ou seja valores, tamanho, cores etc.

function drawChart() {};

Dentro da função drawChart() irá conter as propriedades do gráfico. A função a abaixo será responsável em conter os dados do gráfico, os parâmetros de entrada de valores ou uma base de dados que será em forma de um array.

google.visualization.arrayToDataTable;

As opções de legenda, cores, fontes e outras configurações deverão ser setadas no parâmetro options:


options = {};

Os gráficos são excelentes representações visuais para se apresentar os mais variados tipos de resultados ou pesquisas.

Seja em um relatório ou trabalhos acadêmicos, qualquer tipo de imagem é inserida dentro de um contexto para exemplificar um determinado conteúdo. Uma excelente forma de representar uma informação por meio de uma imagem é criar um gráfico.

Com o avanço da web várias ferramentas passaram a serem criadas para deixar a páginas e os resultados que elas apresentam mais elegante.

Uma ferramenta muito interessante é o Google Chart Tool, que permite ao desenvolvedor criar gráficos sofisticados e atraentes para o usuário. 

O que você verá neste post:
O que é e como usar o Google Chart Tool
Exemplo de gráfico de barras e pizza

COMO USAR O GOOGLE CHART TOOL PARA CRIAR GRÁFICOS NA WEB

Esta ferramenta desenvolvida e ofertada pelo Google é uma forma prática, rápida e leve de desenvolver gráficos.

O que torna o Google Chart Tool é que sua estrutura de aplicação é aplicada em HTML5 e SVG. Sendo assim o carregamento de um gráfico é basicamente instantâneo. A base da biblioteca é o JavaScript.

SVG se você não sabe é o acrônimo de Scalable Vector Graphics, traduzindo, o termo que dizer algo como: imagens vetoriais escaláveis. Este padrão de imagens é usando no editor de imagens Inkscape. É também um dos formatos mais leves, pois é editado em XML, sendo interpretado pelos navegadores. 

COMO USAR ESTA FERRAMENTA

É muito simples a aplicação desta biblioteca, seu uso lhe causará até orgasmos cognitivos.

Para usar esta biblioteca basta você incorporar o código de chamada em seu website como se usa qualquer chamada de JavaScript, pois esta é estrutura básica da ferramenta. E você deverá se acostumar com arrays, muitas virgulas, colchetes e parênteses.

Logo abaixo será apresentada algumas funções básicas para que possamo gerar um gráfico de barras.

Como dito anteriormente você irá precisar fazer a chamada da biblioteca diretamente do Google Chart Tools:

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

Como é uma chamada JavaScript e também para manter seu código organizado, você deve colocar dentro da tag head do código html.

Agora deverá ser carregado o pacote de exibição ou visualização de gráficos atuais:

google.charts.load('current', {'packages':['corechart']});

Agora vamos criar a função drawChart() estã função será responsável por criar o gráfico, ou seja valores, tamanho, cores etc.

function drawChart() {};

Dentro da função drawChart() irá conter as propriedades do gráfico. A função a abaixo será responsável em conter os dados do gráfico, os parâmetros de entrada de valores ou uma base de dados que será em forma de um array.

google.visualization.arrayToDataTable;

As opções de legenda, cores, fontes e outras configurações deverão ser setadas no parâmetro options:

options = {};

Agora uma das principais funções, nela você especifica por exemplo, qual é o tipo de gráfico que você deseja criar e onde ele irá ser "impresso", no caso um elemento HTML, como uma div, por exemplo.

google.visualization.ColumnChart();


A função chart.draw() tem por parâmetro os dados contido na função google.visualization.arrayToDataTable e as opções em options para assim, desenhar o gráfico.

chart.draw();

E por fim, agora já fora da função que drawChart() que foi criada para conter a estrutura de criação do gráfico, deverá ser chamado a função que será responsável por carregar o gráfico desenhado na página html:

google.setOnLoadCallback();

Vamos aos exemplos práticos usando a biblioteca para criarmos nossos gráficos.

EXEMPLO CIRANDO UM GRÁFICO DE BARRAS COM O GOOGLE CHART TOOLS

Neste primeiro exemplo iremos criar um gráfico de barras que apresentará quais as pizzas mais consumidas de uma determinada pizzaria. Suponha então para esta situação 5 sabores de pizzas vendidas em uma semana:

Sabores                       Qtd
Moda da Casa..............: 30 
Mussarela....................: 12
Palmito.........................: 23
4 Queijos......................: 45
Portuguesa...................: 34

Você irá perceber na codificação que os dados serão passados em um Array.

Ótimo, já temos nossa base de dados para criarmos nosso gráfico de barras, o código irá ficar da seguinte forma:


<html>
  <head>
 <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
    <script type="text/javascript">
      //carrega o pacote dos gráficos   
      google.charts.load('current', {'packages':['corechart']});
     
      //define a função para criar o gráfico
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Pizzas', 'Sabores de Pizzas'],
          ['Moda da Casa',     30],
          ['Mussarela',     12],
          ['Palmito',      23],
          ['4 Queijos',  45],
          ['Portuguesa', 34]

        ]);
        // criar a variavel options para definir as opções do gráfico
        var options = {
          title: 'Pizzas Mais Consumidas'
        };
        //aloca o tipo de gráfico na div GraficoColunas
    var chart = new google.visualization.ColumnChart(document.getElementById('GraficoColunas'));

        chart.draw(data, options);
      }
     
      //carrega o grafico na página
      google.charts.setOnLoadCallback(drawChart);
     
    </script>
  </head>
  <body>
    <!-- conteiner para armazenar o gráfico de colunas --> 
    <div id="GraficoColunas" style="height: 500px; width: 900px;">
</div>
</body>
</html>


O código acima irá gerar um gráfico de barras contendo as informações das pizzas mais consumidas. Veja o resultado na imagem abaixo:

grafico de colunas com o google chart tools


Agora iremos gerar um gráfico de pizza em 3D e com uma legenda, as especificações estarão no parâmetro options. A função google.visualization ao invés de conter ColumnChart terá o método PieChar, para gerar o gráfico de pizza.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      //carrega o pacote dos gráficos  
      google.charts.load('current', {'packages':['corechart']});
    
      //define a função para criar o gráfico
      function drawChart() {
        <!-- as cores do gráfico serão geradas automaticamente-->
        var data = google.visualization.arrayToDataTable([
          ['Pizzas', 'Qtd'],
          ['Moda da Casa',     30,],
          ['Mussarela',     12, ],
          ['Palmito',      23, ],
          ['4 Queijos',  45, ],
          ['Portuguesa', 34,]
        ]);
        // criar a variavel options para definir as opções do gráfico
        var options = {
          title: 'Pizzas Mais Consumidas',
          is3D:true, // define que o gráfico em 3d estando setado como true
    
        };
        //aloca o tipo de gráfico na div GraficoColunas
var chart = new google.visualization.PieChart(document.getElementById('GraficoPizza'));
        chart.draw(data, options);
      }
    
      //carrega o grafico na página
      google.charts.setOnLoadCallback(drawChart);
    
    </script>
  </head>
  <body>
     <!-- conteiner para armazenar o gráfico de pizza-->
     <!-- a área de impressão do gráfico está definida no atributo style-->
    <div id="GraficoPizza" style="width: 900px; height: 500px;"></div>
  </body>
</html>


O código acima irá gerar um gráfico 3D contendo as informações dos dados referente aos sabores de pizzas que mais saem em nosso exemplo:

grafico de pizza com google chart tools
Existem várias outras configurações e tipos de gráficos na documentação do Google Chart Tools. O próximo passo é buscar informações em um banco de dados e ai sim gerar o gráfico.


Você também poderá gostar destas outras postagens:
Gerando gráfico com o PHPlot e o PHP
Postgres e subconsulta na clausula from

Espero que tenham gostado. Deixe seu comentário logo abaixo e assine a lista de e-mails do Ubuntu Para Iniciantes e receba as atualizações em sua caixa de entrada. Um grande abraço.

CRIE GRÁFICOS COM O GOOGLE CHART INCREMENTE SUAS PÁGINAS Reviewed by Ubuntu para Iniciantes Marcelo Weihmayr on 08:30:00 Rating: 5

Um comentário :

  1. no grafico de pizza3d como eu coloco a legenda abaixo do grafico?

    ResponderExcluir

Olá, faça seu comentário com sugestões, dicas ou críticas

Powered By Blogger , Designed by Sweetheme

Formulário de contato

Nome

E-mail *

Mensagem *

Marcelo Weihmayr. Tecnologia do Blogger.