You can add a toolbar element to any visualization to enable the user to export
the underlying data into a CSV file or an HTML table, or
to provide code to embed the visualization into an arbitrary web page
or gadget.
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:
A simple CSV version of the data (which your browser will either render or
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 <iframe> code to embed this visualization in a web page,
and/or
A link to page enabling the user to embed this gadget in their iGoogle page.
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:
type: 'csv' - This option exports the data to a comma-separated
value file. A 'save as' dialog will open in the browser.
datasource: 'string' - The data source url.
type: html' - This option exports the data to an HTML table.
The page with the data table will open in a new window in the browser.
datasource: The data source url string.
type: igoogle - This option enables the user to add the visualization
to their iGoogle page. An 'add to iGoogle' page will open in the browser. Use
this only if the visualization is available in a gadgetized version.
datasource: The data source url string.
gadget: The gadgetized version's xml url string. Note
that the visualization that the toolbar is associated with does
not have to be the gadgetized version.
userprefs: An optional preferences object appropriate
for this visualization, specifying the visualization preferences.
type: htmlcode - This option creates a block of HTML code
that the user can embed in a web page to display the visualization inside
an iframe. A popup window with the exact html element of the gadget will
open in the browser.Use this only if the visualization is available in
a gadgetized version.
datasource: The data source url string.
gadget: The gadget xml url string.
userprefs: An optional preferences object appropriate
for this visualization, specifying the visualization preferences.
style: An optional string for the style of the iframe.
For example: 'width: 300px; height: 500px;'.
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.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-10 UTC."],[],[],null,["1. [Overview](#Overview)\n2. [Example](#Example)\n3. [Usage](#usage)\n 1. [Output Types](#outputtypes)\n 2. [Syntax](#syntax)\n4. [Data Policy](#data_policy)\n\nOverview\n\n\nYou can add a toolbar element to any visualization to enable the user to export\nthe underlying data into a CSV file or an HTML table, or\nto provide code to embed the visualization into an arbitrary web page\nor gadget.\n\n\nBy: Google\n\nExample\n\nSelect one of the options in the toolbar. \n\n```gdscript\n\u003chtml\u003e\n\u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load('current', {packages: ['corechart']});\n var visualization;\n\n function draw() {\n drawVisualization();\n drawToolbar();\n }\n\n function drawVisualization() {\n var container = document.getElementById('visualization_div');\n visualization = new google.visualization.PieChart(container);\n new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').\n send(queryCallback);\n }\n\n function queryCallback(response) {\n visualization.draw(response.getDataTable(), {is3D: true});\n }\n\n function drawToolbar() {\n var components = [\n {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',\n gadget: 'https://www.google.com/ig/modules/pie-chart.xml',\n userprefs: {'3d': 1}},\n {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},\n {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},\n {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',\n gadget: 'https://www.google.com/ig/modules/pie-chart.xml',\n userprefs: {'3d': 1},\n style: 'width: 800px; height: 700px; border: 3px solid purple;'}\n ];\n\n var container = document.getElementById('toolbar_div');\n google.visualization.drawToolbar(container, components);\n };\n\n google.charts.setOnLoadCallback(draw);\n \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003cdiv id=\"visualization_div\" style=\"width: 270px; height: 200px;\"\u003e\u003c/div\u003e\n \u003cdiv id=\"toolbar_div\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nUsage\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.\n\nTo use a toolbar, your visualization must get its data from a URL; you cannot\npass in hand-populated DataTable or DataView objects. You will pass the URL of\nthe data used to populate your visualization into the `drawToolbar()` method.\n\nIf you want to provide an iGoogle component or an embeddable iFrame that holds\nthe gadget, you must have a URL for a gadgetized version of the visualization.\n\nOutput Types\n\nThe toolbar can offer the user the choice of one or more of the following output\ntypes, depending on how you configure your toolbar in the `drawToolbar()` method:\n\n- A simple CSV version of the data (which your browser will either render or offer to download and save, depending on your browser configuration, and/or\n- An HTML table holding the data, opened in a new browser window, and/or\n- HTML \\\u003ciframe\\\u003e code to embed this visualization in a web page, and/or\n- A link to page enabling the user to embed this gadget in their iGoogle page.\n\nSyntax \n\n```\ngoogle.visualization.drawToolbar(container, components)\n```\n\nParameters\n\n*container*\n: A handle to a DOM element on the page. The API will draw the toolbar into this\n element. This is similar to the container parameter for a standard visualization.\n You should put the toolbar adjacent to the visualization that uses it.\n\n*components*\n: An array of objects, each describing a format that the data, or the visualization,\n can be exported to. The toolbar will expose the options to the user in the order\n added to the array. Each object has a type property describing the format, and\n one or more additional properties, depending on the type:\n\n - `type: 'csv'` - This option exports the data to a comma-separated value file. A 'save as' dialog will open in the browser.\n - **datasource** : '*string*' - The data source url.\n - `type: html'` - This option exports the data to an HTML table. The page with the data table will open in a new window in the browser.\n - **datasource**: The data source url string.\n - `type: igoogle` - This option enables the user to add the visualization to their iGoogle page. An 'add to iGoogle' page will open in the browser. *Use\n this only if the visualization is available in a gadgetized version.*\n - **datasource**: The data source url string.\n - **gadget**: The gadgetized version's xml url string. Note that the visualization that the toolbar is associated with does not have to be the gadgetized version.\n - **userprefs**: An optional preferences object appropriate for this visualization, specifying the visualization preferences.\n - `type: htmlcode` - This option creates a block of HTML code that the user can embed in a web page to display the visualization inside an iframe. A popup window with the exact html element of the gadget will open in the browser.*Use this only if the visualization is available in\n a gadgetized version.*\n - **datasource**: The data source url string.\n - **gadget**: The gadget xml url string.\n - **userprefs**: An optional preferences object appropriate for this visualization, specifying the visualization preferences.\n - **style**: An optional string for the style of the iframe. For example: 'width: 300px; height: 500px;'.\n\nExample \n\n```gdscript\nfunction drawToolbar() {\n var components = [\n {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',\n gadget: 'https://www.google.com/ig/modules/pie-chart.xml',\n userprefs: {'3d': 1}},\n {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},\n {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},\n {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',\n gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}\n ];\n\n var container = document.getElementById('toolbar_div');\n google.visualization.drawToolbar(container, components);\n};\n```\n\nData Policy\n\n\nAll code and data are processed and rendered in the browser. No data is sent to any server.\nFor some components, the data is taken from the respective data source given to the toolbar.\n\nLocalization\n\nThe toolbar currently only supports US English."]]