Barra de herramientas

  1. Overview
  2. Ejemplo
  3. Uso
    1. Tipos de salida
    2. Sintaxis
  4. Política de Datos

Descripción general

Puedes agregar un elemento de la barra de herramientas a cualquier visualización para permitir que el usuario exporte los datos subyacentes en un archivo CSV o una tabla HTML, o bien para proporcionar un código que incorpore la visualización en un gadget o una página web arbitrario.

Por: Google

Ejemplo

Selecciona una de las opciones en la barra de herramientas.

<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

Para agregar una barra de herramientas a tu página, llama al método google.visualization.drawToolbar() y propágala con los tipos de exportación permitidos y los datos necesarios para cada uno.

Para usar una barra de herramientas, tu visualización debe obtener sus datos de una URL. No puedes pasar objetos DataTable o DataView propagados manualmente. Pasarás la URL de los datos que se usaron para propagar tu visualización al método drawToolbar().

Si deseas proporcionar un componente de JavaScript o un iframe que se puede insertar y que contiene el gadget, debes tener una URL para la versión de la visualización con gadgets.

Tipos de salida

La barra de herramientas puede ofrecer al usuario la opción de uno o más de los siguientes tipos de resultados, según cómo configures la barra de herramientas en el método drawToolbar():

  • Una versión CSV simple de los datos (que tu navegador procesará o ofrecerá descargar y guardar, según la configuración de tu navegador)
  • Una tabla HTML que contiene los datos, abierta en una nueva ventana del navegador
  • Código HTML <iframe> para incorporar esta visualización en una página web
  • Un vínculo a una página que permite al usuario insertar este gadget en su página de JavaScript.

Sintaxis

google.visualization.drawToolbar(container, components)

Parámetros

container
Es un controlador para un elemento del DOM en la página. La API dibujará la barra de herramientas en este elemento. Esto es similar al parámetro contenedor para una visualización estándar. Debes colocar la barra de herramientas junto a la visualización que la usa.
componentes
Es un array de objetos, cada uno de los cuales describe un formato al que se pueden exportar los datos o la visualización. La barra de herramientas mostrará las opciones al usuario en el orden en que se agreguen al array. Cada objeto tiene una propiedad de tipo que describe el formato y una o más propiedades adicionales, según el tipo:
  • type: 'csv': Esta opción exporta los datos a un archivo de valores separados por comas. Se abrirá el cuadro de diálogo "Guardar como" en el navegador.
    • metadata: “string”: Es la URL de la fuente de datos.
  • type: html': Esta opción exporta los datos a una tabla HTML. La página con la tabla de datos se abrirá en una nueva ventana del navegador.
    • fuente de datos: La cadena de URL de la fuente de datos
  • type: igoogle: Esta opción le permite al usuario agregar la visualización a su página de iGoogle. Se abrirá una página 'Agregar a iGoogle' en el navegador. Úsala solo si la visualización está disponible en una versión con gadgets.
    • fuente de datos: La cadena de URL de la fuente de datos
    • widget: Es la cadena de URL de XML de la versión con gadgets. Ten en cuenta que la visualización con la que está asociada la barra de herramientas no tiene que ser la versión con gadgets.
    • userprefs: Es un objeto de preferencias opcional apropiado para esta visualización que especifica las preferencias de visualización.
  • type: htmlcode: Esta opción crea un bloque de código HTML que el usuario puede incorporar en una página web para mostrar la visualización dentro de un iframe. Se abrirá una ventana emergente con el elemento HTML exacto del gadget en el navegador.Usa esta opción solo si la visualización está disponible en una versión con gadgets.
    • fuente de datos: La cadena de URL de la fuente de datos
    • widget: La cadena de la URL del archivo XML del gadget.
    • userprefs: Es un objeto de preferencias opcional apropiado para esta visualización que especifica las preferencias de visualización.
    • style: Es una string opcional para el estilo del iframe. Por ejemplo: “width: 300px;height: 500px;”.

Ejemplo

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 Datos

Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor. Para algunos componentes, los datos se toman de la respectiva fuente de datos que se proporciona a la barra de herramientas.

Localización

Actualmente, la barra de herramientas solo admite inglés de EE.UU.