Cuadros de información

  1. Sugerencias: introducción
  2. Especifica el tipo de información
  3. Información sobre la herramienta estándar
  4. Cómo personalizar el contenido de la información sobre la herramienta
  5. Cómo usar los cuadros de información HTML
  6. Personaliza el contenido HTML
  7. Cuadro de información rotativo
  8. Coloca gráficos en la información sobre la herramienta
  9. Acciones de información sobre la herramienta
  10. Anota datos
  11. Gráficos compatibles

Sugerencias: introducción

La información sobre la herramienta son los pequeños cuadros que aparecen cuando colocas el cursor sobre algo. (Las tarjetas emergentes 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 cómo crear y personalizar la información sobre la herramienta en Gráficos de Google.

Cómo especificar el tipo de información

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

Información sobre la herramienta estándar

Ante la ausencia de contenido personalizado, el contenido de la información sobre la herramienta se genera automáticamente en función de los datos subyacentes. Puedes ver la información si colocas el cursor sobre cualquiera de las barras del gráfico.

Coloca el cursor sobre las barras para ver 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. Para ello, agregamos una columna nueva a DataTable y la marcamos con la función de información sobre la herramienta.

Nota: Esto no es compatible con la visualización del diagrama 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 los cuadros de información HTML

Este ejemplo se basa en el anterior, ya que habilita los cuadros de información HTML. Ten en cuenta que tooltip.isHtml: true se agregó 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);
      }

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

Personaliza el contenido HTML

En los ejemplos anteriores, se usaron herramientas con contenido de texto sin formato, pero el verdadero poder de la información sobre la herramienta HTML se ve cuando puedes personalizarlas con lenguaje de marcado HTML. Para habilitar esta función, debes hacer dos cosas:

  1. Especifica tooltip.isHtml: true en las opciones del gráfico. Esto le indica al gráfico que debe dibujar la información sobre la herramienta en HTML (en lugar de SVG).
  2. Marca una columna completa o una celda específica de la tabla de datos con la propiedad personalizada html. Una columna de tabla de datos con el rol 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 diagrama de burbujas. No se puede personalizar el contenido de la información sobre la herramienta HTML del diagrama de burbujas.

Importante: Asegúrate de que el código HTML de la información sobre la herramienta provenga de una fuente confiable. Si el contenido HTML personalizado incluye contenido generado por el usuario, es esencial escapar ese contenido. De lo contrario, tus visualizaciones atractivas podrían estar expuestas a ataques de XSS.

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

El contenido HTML personalizado también puede incluir contenido generado de forma dinámica. Aquí, agregamos un cuadro de información 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 la fila, si te desplazas sobre cualquiera de las barras, se mostrará la información sobre la herramienta HTML.

En este ejemplo, se muestra cómo se puede adjuntar un cuadro de información HTML personalizado a una columna de dominio. En los ejemplos anteriores, se adjuntaba a una columna de datos. Para activar la información sobre el eje de dominio, establece 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>';
}

Cuadro de información rotativo

La información sobre la herramienta de 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 el sentido de las manecillas del reloj con este CSS intercalado justo antes del elemento div del gráfico:

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

Ten en cuenta que esto solo funcionará para los cuadros de información HTML, es decir, aquellos que tengan 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 casi todo el contenido HTML que quieras, incluso un gráfico de Google. Los gráficos que se encuentran dentro de los cuadros de información permiten que los usuarios obtengan información adicional cuando se colocan sobre un elemento de datos. Esta es una buena manera de brindar detalles de alto nivel a primera vista y, al mismo tiempo, permitir que los usuarios exploren más detalles cuando quieran.

En el gráfico de columnas que aparece a continuación, se muestra un gráfico de los usuarios recientes más altos de varios eventos deportivos importantes, y los cuadros de información para cada uno muestran un gráfico de líneas de la audiencia promedio en los últimos diez años.

Algunos aspectos que deben tenerse en cuenta. En primer lugar, se debe 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 imprimible.

IMPORTANTE: Todos los gráficos con información sobre la herramienta deben dibujarse antes del gráfico principal. Esto es necesario para tomar las imágenes que se agregarán a la DataTable 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 de información sobre la herramienta

La información sobre la herramienta también puede incluir acciones definidas por JavaScript. A modo de ejemplo, a continuación se incluye información sobre la herramienta con una acción que muestra un cuadro de diálogo emergente 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 renderiza un gráfico de Google, solo se muestra una acción de información sobre la herramienta si está visible y solo se puede hacer clic si está habilitada. (Inhabilitada, pero las acciones 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 de las acciones y la posibilidad de hacer clics.

La información sobre la herramienta puede activarse en focus y en selection. Sin embargo, para 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 con mayor facilidad.

Por supuesto, las acciones no necesitan ser alertas. Puedes hacer lo que se puede hacer desde JavaScript con una acción. Aquí, agregaremos dos acciones: una para ampliar una cuña de nuestro 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);
      }

Anota datos

Puedes superponer texto directamente en un gráfico de Google si usas annotationText en lugar de tooltip como la función de columna. (Para ver la información sobre la herramienta, coloca el cursor sobre la anotación).

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

Por el momento, los cuadros de información HTML son compatibles con los siguientes tipos de gráficos:

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