Barra de ferramentas

  1. Visão geral
  2. Exemplo
  3. Uso
    1. Tipos de saída
    2. Sintaxe
  4. Política de dados

Visão geral

Adicione um elemento da barra de ferramentas a qualquer visualização para permitir que o usuário exporte os dados para um arquivo CSV ou uma tabela HTML ou forneça o código para incorporar a visualização em uma página da Web ou um gadget arbitrário.

Autor: Google

Exemplo

Selecione uma das opções na barra de ferramentas.

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

Uso

Adicione uma barra de ferramentas à página chamando o método google.visualization.drawToolbar(), preenchendo-o com os tipos de exportação permitidos e os dados necessários para cada um.

Para usar uma barra de ferramentas, sua visualização precisa receber os dados de um URL. Não é possível transmitir objetos preenchidos manualmente ou DataView. Você transmitirá o URL dos dados usados para preencher sua visualização no método drawToolbar().

Se quiser fornecer um componente do iGoogle ou um iframe incorporável que contenha o gadget, você precisará ter um URL para uma versão de gadget da visualização.

Tipos de saída

A barra de ferramentas pode oferecer ao usuário a escolha de um ou mais dos tipos de saída abaixo, dependendo de como você a configura no método drawToolbar():

  • Uma versão simples dos dados em CSV, que o navegador pode renderizar ou oferecer para download e salvar, dependendo da configuração do navegador e/ou
  • Uma tabela HTML com os dados, aberta em uma nova janela do navegador, e/ou
  • Código HTML <iframe> para incorporar essa visualização em uma página da Web e/ou
  • Um link para a página que permite que o usuário incorpore este gadget em sua página do iGoogle.

Sintaxe

google.visualization.drawToolbar(container, components)

Parâmetros

container
Um identificador para um elemento DOM na página. A API desenhará a barra de ferramentas nesse elemento. É semelhante ao parâmetro de contêiner para uma visualização padrão. Você deve colocar a barra de ferramentas ao lado da visualização que a utiliza.
componentes
Uma matriz de objetos, cada um descrevendo um formato para o qual os dados ou a visualização podem ser exportados. A barra de ferramentas vai expor as opções ao usuário na ordem adicionada à matriz. Cada objeto tem uma propriedade de tipo que descreve o formato e uma ou mais propriedades adicionais, dependendo do tipo:
  • type: 'csv': esta opção exporta os dados para um arquivo de valores separados por vírgula. Uma caixa de diálogo "Salvar como" será aberta no navegador.
    • datasource: string – o URL da origem de dados.
  • type: html': essa opção exporta os dados para uma tabela HTML. A página com a tabela de dados será aberta em uma nova janela no navegador.
    • datasource: a string do URL da fonte de dados.
  • type: igoogle: com essa opção, o usuário pode adicionar a visualização à página do iTunes. Uma página "Adicionar ao Blogger" será aberta no navegador. Use esta opção apenas se a visualização estiver disponível em uma versão de gadget.
    • datasource: a string do URL da fonte de dados.
    • gadget: a string do URL XML da versão com gadget. A visualização a que a barra de ferramentas está associada não precisa ser a versão com gadget.
    • userprefs: um objeto de preferências opcional apropriado para essa visualização, que especifica as preferências de visualização.
  • type: htmlcode: essa opção cria um bloco de código HTML que o usuário pode incorporar em uma página da Web para exibir a visualização dentro de um iframe. Uma janela pop-up com o elemento html exato do gadget será aberta no navegador.Use esta opção somente se a visualização estiver disponível em uma versão com gadget.
    • datasource: a string do URL da fonte de dados.
    • gadget: a string do URL XML do gadget.
    • userprefs: um objeto de preferências opcional apropriado para essa visualização, que especifica as preferências de visualização.
    • style: uma string opcional para o estilo do iframe. Por exemplo: "width: 300px; height: 500px;".

Exemplo

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor. Para alguns componentes, os dados são retirados das respectivas fontes de dados fornecidas para a barra de ferramentas.

Localização

No momento, a barra de ferramentas só está disponível em inglês americano.