Información sobre la herramienta

  1. Información sobre la herramienta: introducción
  2. Cómo especificar el tipo de información sobre la herramienta
  3. Información sobre la herramienta estándar
  4. Personalización del contenido de la información sobre la herramienta
  5. Cómo utilizar información sobre la herramienta HTML
  6. Personalización del contenido HTML
  7. Información sobre la rotación
  8. Cómo colocar gráficos en la información sobre la herramienta
  9. Acciones de la información sobre la herramienta
  10. Anota datos
  11. Gráficos compatibles

Información sobre la herramienta: introducción

La información sobre la herramienta es los cuadros pequeños que aparecen cuando te desplazas sobre algo. (Las tarjetas flotantes son más generales y pueden aparecer en cualquier lugar de la pantalla. La información sobre la herramienta siempre se adjunta a algo, como un punto en un gráfico de dispersión o una barra en un gráfico de barras).

En esta documentación, aprenderás a crear y personalizar información sobre herramientas en los gráficos de Google.

Cómo especificar el tipo de información sobre la herramienta

Google Charts crea información sobre herramientas automáticamente para todos los gráficos principales. Se mostrarán como SVG de forma predeterminada, excepto en IE 8, donde se procesarán como VML. Puedes crear información sobre la herramienta de HTML en los gráficos principales si especificas tooltip.isHtml: true en las opciones de gráficos que se pasan a la llamada draw(), que también te permitirá crear acciones de información sobre la herramienta.

Información sobre la herramienta estándar

Ante la ausencia de contenido personalizado, el contenido de la información sobre la herramienta se genera de forma automática en función de los datos subyacentes. Para ver la información sobre la herramienta, coloca el cursor del mouse sobre cualquiera de las barras del gráfico.

Coloque el cursor sobre las barras para ver la información sobre la herramienta estándar.

Cómo personalizar el contenido de la información sobre la herramienta

En este ejemplo, agregamos contenido personalizado a la información sobre la herramienta mediante la adición de una columna nueva a la DataTable y su marcado con la función de información sobre la herramienta.

Nota: Esto no es compatible con la visualización del cuadro de burbujas. 

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
        chart.draw(dataTable, options);
      }

Cómo usar información sobre la herramienta HTML

Este ejemplo se basa en el anterior porque habilita la información sobre la herramienta de HTML. Observa la adición de tooltip.isHtml: true a las opciones del gráfico. 

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = {
          tooltip: {isHtml: true},
          legend: 'none'
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(dataTable, options);
      }

No se ve muy diferente, pero ahora podemos personalizar el HTML.

Cómo personalizar el contenido HTML

Todos los ejemplos anteriores tienen información sobre la herramienta usada con contenido de texto sin formato, pero el verdadero poder de la información sobre la herramienta HTML aparece cuando puedes personalizarla con lenguaje de marcado HTML. Para habilitar esto, debes hacer dos cosas:

  1. Especifica tooltip.isHtml: true en las opciones del gráfico. Esto le indica al gráfico que dibuje la información sobre la herramienta en HTML (en lugar de SVG).
  2. Marca una columna completa o una celda específica en la tabla de datos con la propiedad personalizada html. Una columna de tabla de datos con la función de información sobre la herramienta y la propiedad HTML sería la siguiente:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Nota: Esto no funciona con la visualización del Gráfico de burbujas. El contenido de la información sobre la herramienta de HTML de Bubble Chart no se puede personalizar.

Importante: Asegúrate de que el código HTML en la información sobre la herramienta provenga de una fuente de confianza. Si el contenido HTML personalizado incluye contenido generado por el usuario, es fundamental escapar ese contenido. De lo contrario, tus bellas visualizaciones estarán abiertas a los ataques de XSS.

El contenido HTML personalizado puede ser tan simple como agregar una etiqueta <img> o poner en negrita algún texto:

El contenido HTML personalizado también puede incluir contenido generado de forma dinámica. Aquí, agregamos información sobre la herramienta que contiene una tabla generada de forma dinámica para cada valor de categoría. Dado que la información sobre la herramienta se adjunta al valor de fila, si desplazas el cursor sobre cualquiera de las barras, se mostrará la información sobre la herramienta HTML.

En este ejemplo, se muestra cómo una información sobre la herramienta de HTML personalizada se puede adjuntar a una columna de dominio. (En los ejemplos anteriores, se adjuntaba a una columna de datos). Para activar la información sobre la herramienta del eje de dominio, configura la opción focusTarget: 'category'. 

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    // This line makes the entire category's tooltip active.
    focusTarget: 'category',
    // Use an HTML tooltip.
    tooltip: { isHtml: true }
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}

function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
      '<table class="medals_layout">' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

Información sobre la rotación

La información sobre la herramienta en los gráficos de Google se puede rotar con CSS. En el siguiente gráfico, la información sobre la herramienta se rota 30° en sentido horario usando este CSS intercalado justo antes del div del gráfico:

<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>

Ten en cuenta que esta opción solo funcionará para la información sobre la herramienta de HTML, es decir, aquellas con la opción isHtml: true.

<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']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);

        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
    <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
  </body>
</html>

Cómo colocar gráficos en la información sobre la herramienta

La información sobre la herramienta de HTML puede incluir la mayoría del contenido HTML que quieras, incluso un gráfico de Google. Con gráficos dentro de la información sobre la herramienta, los usuarios pueden obtener información adicional cuando se desplazan sobre un elemento de datos: una buena manera de proporcionar detalles de alto nivel a primera vista y permitir que las personas exploren la información cuando quieran.

En el siguiente gráfico de columnas, se muestra un gráfico de las vistas más recientes de varios eventos deportivos importantes, con la información sobre la herramienta para cada uno de ellos mostrando un gráfico de líneas de los espectadores promedio durante los últimos diez años.

Debes tener en cuenta lo siguiente. Primero, debes dibujar un gráfico imprimible para cada conjunto de datos que se muestre en la información sobre la herramienta. En segundo lugar, cada gráfico de información sobre la herramienta necesita un controlador de eventos "listo", al que llamamos mediante addListener para crear un gráfico para imprimir.

IMPORTANTE: Todos los gráficos de información sobre la herramienta deben dibujarse antes del gráfico principal. Esto es necesario para obtener las imágenes que se agregarán a la tabla de datos del gráfico principal.

Partes importantes
      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
Página web completa
<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']});
      google.charts.setOnLoadCallback(drawTooltipCharts);

      // Set up data for visible chart.
      var primaryData = [
        ['NBA Finals', 22.4],
        ['NFL Super Bowl', 111.3],
        ['MLB World Series', 19.2],
        ['UEFA Champions League Final', 1.9],
        ['NHL Stanley Cup Finals', 6.4],
        ['Wimbledon Men\'s Championship', 2.4]
      ];

      // Set up data for your tooltips.
      var tooltipData = [
        ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
        'UEFA Champions League Final', 'NHL Stanley Cup Finals',
        'Wimbledon Men\'s Championship'],
        ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
        ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
        ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
        ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
        ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
        ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
        ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
        ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
        ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
        ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
      ];

      var primaryOptions = {
        title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
        legend: 'none',
        tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
      };

      var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      };

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
    </script>
  </head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>

Acciones en la información sobre la herramienta

La información sobre la herramienta también puede incluir acciones definidas por JavaScript. A modo de ejemplo, aquí se incluye información sobre la herramienta con una acción que abre un cuadro de diálogo cuando el usuario hace clic en "Ver libro de muestra":

La opción tooltip se activa cuando el usuario selecciona una cuña del pastel, lo que hace que se ejecute el código definido en setAction:

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics/Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          action: function() {
            selection = chart.getSelection();
            switch (selection[0].row) {
              case 0: alert('Ender\'s Game'); break;
              case 1: alert('Feynman Lectures on Physics'); break;
              case 2: alert('Numerical Recipes in JavaScript'); break;
              case 3: alert('Truman'); break;
              case 4: alert('Freakonomics'); break;
              case 5: alert('The Mezzanine'); break;
              case 6: alert('The Color of Magic'); break;
              case 7: alert('The Law of Superheroes'); break;
            }
          }
        });

        chart.draw(data, options);
      }

Las acciones pueden ser visible, enabled, ambas o ninguna. Cuando se procesa un gráfico de Google, solo se muestra una acción de información sobre la herramienta si es visible, y solo se puede hacer clic si está habilitada. (Las acciones inhabilitadas, pero visibles, están inhabilitadas).

visible y enabled deben ser funciones que muestren valores verdaderos o falsos. Esas funciones pueden depender del ID del elemento y de la selección del usuario, lo que te permite ajustar la visibilidad y la posibilidad de hacer clics de la acción.

La información sobre la herramienta puede activarse en focus y en selection. Sin embargo, con las acciones de información sobre la herramienta, se prefiere selection. Eso hace que la información sobre la herramienta persista, lo que le permite al usuario seleccionar la acción más fácilmente.

Las acciones no deben ser alertas; por supuesto, todo lo que puedes hacer desde JavaScript, puedes hacerlo desde una acción. Aquí, agregaremos dos acciones: una para agrandar una parte del gráfico circular y otra para reducirla.

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics & Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }

Cómo anotar datos

Puedes superponer texto directamente en un gráfico de Google mediante annotationText en lugar de tooltip como la función de la columna. (Puedes ver la información sobre la herramienta si te desplazas sobre la anotación con el mouse).

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'USA');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
  dataTable.addColumn('number', 'China');
  dataTable.addColumn('number', 'UK');
  dataTable.addRows([
    ['2000',  94, '',  '', 58, 28],
    ['2004', 101, '',  '', 63, 30],
    ['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
    ['2012', 104, '',  '', 88, 65]
  ]);

  var options = { tooltip: {isHtml: true}};
  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);
}

Gráficos compatibles

Actualmente, se admite la información sobre la herramienta de HTML para los siguientes tipos de gráficos:

Si usas las funciones annotationText o tooltip, consulta la documentación sobre funciones para leer sobre cambios futuros y cómo evitar problemas futuros.