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

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

De: 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 à sua página chamando o método google.visualization.drawToolbar(), preenchendo-a com os tipos de exportação permitidos e os dados necessários para cada uma.

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

Para fornecer um componente para o iGoogle ou um iframe incorporável que contenha o gadget, é necessário ter um URL de uma versão do layout da visualização de gadget.

Tipos de saída

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

  • Uma versão CSV simples dos dados (que seu navegador renderiza ou oferece para download e salvamento, 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 a uma página da Web e/ou
  • Um link para a página que permite que o usuário incorpore este gadget na 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 vai desenhar a barra de ferramentas nesse elemento. É semelhante ao parâmetro de contêiner para uma visualização padrão. Coloque a barra de ferramentas adjacente à visualização que a usa.
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 expõe 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': essa opção exporta os dados para um arquivo de valores separado por vírgulas. Uma caixa de diálogo "salvar como" será aberta no navegador.
    • datasource: string: o URL da fonte 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 do navegador.
    • datasource: a string do URL da fonte de dados.
  • type: igoogle: esta opção permite que o usuário adicione a visualização à página do iGoogle. Uma página "adicionar ao iGoogle" será aberta no navegador. Use isso apenas se a visualização estiver disponível em uma versão com gadgets.
    • datasource: a string do URL da fonte de dados.
    • gadget: a string do URL XML da versão do gadget. A visualização a que a barra de ferramentas está associada não precisa ser a versão gadgetada.
    • userprefs: um objeto de preferências opcional apropriado para esta visualização, especificando as preferências da visualização.
  • type: htmlcode: esta 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 em um iframe. Uma janela pop-up com o mesmo elemento HTML do gadget será aberta no navegador.Use essa opção apenas se a visualização estiver disponível em uma versão gadgetada.
    • 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 esta visualização, especificando as preferências da 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 coletados da respectiva fonte na barra de ferramentas.

Localização

No momento, a barra de ferramentas só é compatível com inglês (EUA).