\n \n\n\n
\n
\n\n","\nAdd a toolbar to your page by calling the ","google.visualization.drawToolbar()","\nmethod, populating it with the types of export allowed, and the data required for\neach. ","To use a toolbar, your visualization must get its data from a URL; you cannot\n pass in hand-populated DataTable or DataView objects. You will pass the URL of\n the data used to populate your visualization into the ","drawToolbar()"," method.","If you want to provide an iGoogle component or an embeddable iFrame that holds\n the gadget, you must have a URL for a gadgetized version of the visualization.","The toolbar can offer the user the choice of one or more of the following output\n types, depending on how you configure your toolbar in the "," method:","A simple CSV version of the data (which your browser will either render or\n offer to download and save, depending on your browser configuration, and/or","An HTML table holding the data, opened in a new browser window, and/or"," HTML 
<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>

Usage

Add a toolbar to your page by calling the google.visualization.drawToolbar() method, populating it with the types of export allowed, and the data required for each.

To use a toolbar, your visualization must get its data from a URL; you cannot pass in hand-populated DataTable or DataView objects. You will pass the URL of the data used to populate your visualization into the drawToolbar() method.

If you want to provide an iGoogle component or an embeddable iFrame that holds the gadget, you must have a URL for a gadgetized version of the visualization.

Output Types

The toolbar can offer the user the choice of one or more of the following output types, depending on how you configure your toolbar in the drawToolbar() method:

Syntax

google.visualization.drawToolbar(container, components)

Parameters

container
A handle to a DOM element on the page. The API will draw the toolbar into this element. This is similar to the container parameter for a standard visualization. You should put the toolbar adjacent to the visualization that uses it.
components
An array of objects, each describing a format that the data, or the visualization, can be exported to. The toolbar will expose the options to the user in the order added to the array. Each object has a type property describing the format, and one or more additional properties, depending on the type:

Example

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);
};

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server. For some components, the data is taken from the respective data source given to the toolbar.

Localization

The toolbar currently only supports US English.