Barra de herramientas

  1. Descripción general
  2. Ejemplo
  3. Uso
    1. Tipos de resultados
    2. Sintaxis
  4. Política de Datos

Descripción general

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

Por: Google

Ejemplo

Selecciona una de las opciones de 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(), propágalo con los tipos de exportaciones permitidos y los datos que se requieren 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 a mano. Pasarás la URL de los datos que se usaron para propagar tu visualización en el método drawToolbar().

Si deseas proporcionar un componente de iGoogle o un iFrame integrable que contenga el gadget, debes tener una URL para la versión de la visualización de un gadget.

Tipos de resultados

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

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

Sintaxis

google.visualization.drawToolbar(container, components)

Parámetros

container
Controlador de un elemento DOM en la página. La API generará la barra de herramientas en este elemento. Esto es similar al parámetro del contenedor para una visualización estándar. Deberías colocar la barra de herramientas junto a la visualización que la usa.
componentes
Un arreglo 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 agregó al arreglo. 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. En el navegador, se abrirá el diálogo "Guardar como".
    • fuente de datos: '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.
    • datasource: la string 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. En el navegador, se abrirá la página "Agregar a iGoogle". Utiliza esto solo si la visualización está disponible en una versión de gadget.
    • datasource: la string de URL de la fuente de datos.
    • gadget: Es la cadena de URL xml de la versión del gadget. Ten en cuenta que la visualización con la que está asociada la barra de herramientas no tiene que ser la versión de gadget.
    • userprefs: 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á en el navegador una ventana emergente con el elemento HTML exacto del gadget.Utiliza esto solo si la visualización está disponible en una versión de gadget.
    • datasource: la string de URL de la fuente de datos.
    • gadget: la cadena de URL XML del gadget.
    • userprefs: Un objeto de preferencias opcional apropiado para esta visualización que especifica las preferencias de visualización.
    • style: 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

El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor. Para algunos componentes, los datos se obtienen de la respectiva fuente de datos proporcionada a la barra de herramientas.

Localización

Por el momento, la barra de herramientas solo está disponible en inglés de EE.UU.