Adicionar um gráfico (tipo Excel) no Site (ou Blog)

Por | Atualizado em 2013-12-02
O Google Charts é um serviço gratuito que permite adicionar gráficos (tipo Excel), diretamente no seu Site ou blog. Os gráficos são carregados diretamente dos servidores Google, configurar apenas os dados iniciais que o gráfico deve apresentar.

Google Charts – Criar gráfico


Comece por aceder ao Google Charts. Clique no botão “Get Started”. No menu esquerdo, clique em “Chart Gallery” para escolher o gráfico que mais gosta (e se adequa as suas necessidades).

Na página que surge, você irá visualizar um exemplo do gráfico e as opções de configuração “Configuration Options”, que nos indicam o significado de cada parâmetro (essencial para editar o gráfico).

Exemplo prático:

Neste exxemplo selecionamos o gráfico “Pie Chart”. Para iniciar a edição, clicamos no link “Visualization Playground” – “Edit HTML”. Agora, vamos editar os parâmetros do gráfico, como é explicado nas instruções fornecidas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Trabalho', 11],
          ['Comer', 2],
          ['Ginásio', 2],
          ['Ver TV', 2],
          ['Dormir', 7]
        ]);
      
        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('visualization')).
             draw(data, {title:"Como é o seu dia?"});
      }
      

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 200px;"></div>
  </body>
</html>

Resultado:


Por fim, basta copiar o código do gráfico e adicionar nas suas páginas.

Caso tenha dificuldades, poderá experimentar hospedar o arquivo usando o Google Drive.

Para mais detalhes, consulte o nosso tutorial: Hospedar código externo no Google Drive.

Deixe uma resposta

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