Visualización: Gráfico genérico de imagen

Importante: La sección de gráficos de imágenes de las herramientas de Google Chart dejó de estar disponible oficialmente a partir del 20 de abril de 2012. Continuará funcionando de acuerdo con nuestra política de baja.

Descripción general

El gráfico genérico de imagen es un wrapper genérico para todos los gráficos producidos por la API de Google Chart. Lee la documentación de la API de Chart antes de intentar usar esta visualización. Ten en cuenta que puedes enviar hasta 16,000 datos de esta visualización, a diferencia del límite de 2,000 en llamadas directas a la API de Chart.

Todos los datos se pasan a los gráficos mediante una DataTable o DataView. Además, algunas etiquetas se pasan como columnas en la tabla de datos.

Todos los demás parámetros de URL de la API de gráficos (excepto chd) se pasan como opciones.

Por: Google

Ejemplos

Estos son ejemplos de varios tipos de gráficos.

Gráfico de líneas

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

Gráfico de barras verticales

Ten en cuenta que, en los gráficos de barras unidos, no necesitas especificar chxt='x' como lo harías si llamaras al gráfico tú mismo. Si no especificas un eje, el gráfico genérico intenta configurar el gráfico de forma predeterminada.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

Gráfico circular

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

Gráfico radial

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

Gráfico del mapa

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

Cargando

El nombre del paquete google.charts.load es 'imagechart'

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

El nombre de clase de la visualización es google.visualization.ImageChart.

  var visualization = new google.visualization.ImageChart(container_div);

Formato de los datos

Existen dos formatos de datos generalizados: uno para los gráficos de mapas y otro para los demás gráficos. Ten en cuenta que el único formato numérico admitido para datos es el tipo de número de JavaScript.

Nota No debes codificar en formato URL los valores de string que se pasen como datos u opciones.

Gráficos de mapas

Un gráfico de mapa toma una tabla de datos con dos columnas obligatorias:

Consulta la documentación del gráfico de mapas para obtener más información.

Gráficos que no son de mapa

Los gráficos que no son de mapa toman una tabla de datos con dos columnas opcionales (una al principio y otra al final) y una o más columnas de datos en el medio:

  • Primera columna: [opcional, string] Cada entrada representa una etiqueta que se usa en el eje X (equivalente al parámetro chl o chxl) para los gráficos que lo admiten.
  • Columnas siguientes: cualquier cantidad de columnas numéricas, cada una de las cuales representa una serie de datos.
  • Últimas columnas: [opcional, string] Cualquier cantidad de columnas de strings después de las columnas de datos, en las que cada entrada representa una etiqueta de datos para los gráficos que la admiten. Si deseas usar esta columna, debes especificar la opción annotationColumns.

Los datos se mostrarán de diferentes maneras, según el tipo de gráfico. Consulta la documentación de tu gráfico.

Nota sobre los índices de columna: La visualización del gráfico genérico de imagen quita las columnas de string de la tabla de datos antes de enviarla al servicio de la API de Charts. Por lo tanto, los índices de columna en las opciones, los métodos y los eventos definidos en esta página incluyen las columnas de string en el recuento de índices; sin embargo, los índices de columna en cualquier opción controlada por el servicio de la API de Charts (por ejemplo, la opción chm) ignoran las columnas de string en el recuento de índices.

Opciones de configuración

Las siguientes opciones están definidas para esta visualización. Defínelo en el objeto de opciones que se pasa al método draw() de la visualización. No todas las opciones siguientes son compatibles con todos los tipos de gráfico. Consulta la documentación de tu tipo de gráfico de imagen estática. Puedes pasar cualquier parámetro de URL de la API de gráficos como opción. Por ejemplo, el parámetro de URL chg=50,50 de una visualización de gráfico se especificaría de la siguiente manera: options['chg'] = '50,50'.

Nota sobre los colores: Las opciones de color, como colors, color y backgroundColor, se especifican en el formato de color de la API de gráficos. Este formato es similar al formato #RRGGBB, excepto que incluye un cuarto número hexadecimal opcional para indicar la transparencia. No se admiten los colores legibles, como "rojo", "verde", "azul", etcétera. El formato de color de la API de gráficos no incluye el símbolo # inicial, pero las opciones genéricas de visualización del gráfico de imágenes aceptarán códigos de color con o sin #.

Nombre Tipo Predeterminado Descripción
anotacionesColumnas Arreglo<object> ninguno

Etiquetas de datos para varios tipos de gráficos. Este es un arreglo de objetos que asigna una etiqueta con formato a un dato en el gráfico. Esta opción solo está disponible para gráficos que admiten datos (consulta el tema vinculado para obtener información sobre cuáles) y la tabla de datos debe tener al menos una de las columnas de etiquetas de string.

Cada objeto del arreglo tiene las siguientes propiedades:

  • column [número]: Índice basado en cero de la columna que contiene el texto usado en la anotación. No necesitas un valor en cada fila de esta columna.
  • positionColumn [número]: Índice basado en cero de la columna que contiene el dato que se etiqueta. El valor predeterminado es la primera columna de datos.
  • color [string]: Color del texto de la anotación en el formato de color de la API de gráfico. El valor predeterminado es "#000000" (negro).
  • size [number]: El tamaño de la fuente de la anotación, en píxeles.
  • priority [string]: Es "Bajo", "Medio" o "Alto", y especifica la capa en la que se debe dibujar la etiqueta. El valor predeterminado es “medium”, que especifica que la etiqueta se dibuja después de barras y líneas, pero antes de otras etiquetas.
  • type [string]: "text" o "flag". “text” crea una anotación de texto sin formato, y “flag” crea una anotación de globo de diálogo.

Ejemplo: Este fragmento de código define una etiqueta de texto negra de 12 píxeles, con texto tomado de la columna 0 y asignado al dato en la columna 2 de la misma fila: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];

Color de fondo string "#FFFFFF" (blanco) El color de fondo para el gráfico en el formato de color de la API de gráficos
color string Automático Especifica un color base para usar en todas las series. Cada serie será una graduación del color especificado. Los colores se especifican en el formato de color de la API de gráficos. Se ignora si se especifica colors.
colores Arreglo<string> Automático Úsalo para asignar colores específicos a cada serie de datos. Los colores se especifican en el formato de color de la API de gráficos. El color i se usa para la columna de datos i y se une al principio si hay más columnas de datos que colores. Si se aceptan variaciones de un solo color para todas las series, usa la opción color en su lugar.
habilitarEventos boolean falso Causa que los gráficos generen eventos activados por el usuario, como hacer clic o desplazar el mouse. Solo se admite para tipos de gráficos específicos. Consulta la sección Eventos a continuación.
relleno boolean falso Si es verdadero, completa el área debajo de cada línea. Disponible solo para gráficos de líneas.
primeraColumnaEscondida número ninguno

Un índice de columnas de datos. Las columnas enumeradas, así como las siguientes, no se usarán para dibujar los elementos de la serie principal del gráfico (como las líneas en un gráfico de líneas o las barras en un gráfico de barras), sino que se usarán como datos para marcadores y otras anotaciones. Ten en cuenta que las columnas de string se incluyen en este recuento de índice.

alto número 200 Altura del gráfico, en píxeles. Si falta o no se encuentra en un rango aceptable, se usa la altura del elemento contenedor. Si también se encuentra fuera del rango aceptable, se utilizará la altura predeterminada.
etiquetas string "none"

[Solo gráfico circular] Qué etiqueta mostrar en cada sector. Elige uno de los siguientes valores:

  • "none": no hay etiquetas.
  • 'value': Muestra el valor del segmento como una etiqueta.
  • “name”: Muestra el nombre del fragmento (el nombre de la columna) como etiqueta.
leyenda string 'derecha' Dónde mostrar una leyenda del gráfico, en relación con el gráfico Especifica una de las siguientes opciones: "top", "bottom", "left", "right", "none". Se ignora en los gráficos que no incluyen leyendas (como los gráficos de mapas).
máx. número Valor máximo de datos El valor máximo que se muestra en la escala. Se ignora para los gráficos circulares. El valor predeterminado es el valor de datos máximo, excepto para los gráficos de barras, en los que el valor predeterminado es el valor de datos máximo. Esto se ignora para los gráficos de barras cuando la tabla tiene más de una columna de datos.
min número Valor de datos mínimo El valor mínimo que se muestra en la escala. Se ignora para los gráficos circulares. El valor predeterminado es el valor mínimo de datos, excepto para los gráficos de barras, en los que el valor predeterminado es cero. Esto se ignora para los gráficos de barras cuando la tabla tiene más de una columna de datos.
showCategoryLabels. boolean true Indica si las etiquetas deben aparecer en el eje de categoría (es decir, en la fila). Disponible solo para gráficos de líneas y barras.
showValueLabels boolean true Verdadero muestra una etiqueta en el eje de valor. Disponible solo para gráficos de líneas y barras.
Pantalla individual número ninguno Renderiza solo la columna de datos especificada. Este número es un índice basado en cero en la tabla, en el que cero es la primera columna de datos. El color asignado a la columna única es el mismo que cuando se renderizan todas las columnas. No se puede usar con gráficos circulares ni de mapa.
title string String vacío El título del gráfico. Si no se especifica, no se mostrará ningún título. El parámetro de gráfico equivalente es chtt.
Intervalo de etiquetas de valor número Automático El intervalo en el que se muestran las etiquetas del eje de valor. Por ejemplo, si min es 0, max es 100, y valueLabelsInterval es 20, el gráfico mostrará las etiquetas de eje en (0, 20, 40, 60, 80 100).
ancho número 400 Ancho del gráfico en píxeles. Si falta o no se encuentra en un rango aceptable, se usa el ancho del elemento contenedor. Si también está fuera del rango aceptable, se usará el ancho predeterminado.

Métodos

Método Tipo de datos que se muestra Descripción
draw(data, options) Ninguno Dibuja el mapa.
getImageUrl() String Muestra la URL de la API de Google Chart que se usa para solicitar el gráfico. Ten en cuenta que este puede tener más de 2,000 caracteres. Consulta la API de Google Chart para obtener más detalles.

Eventos

Si configuras la propiedad enableEvents como verdadera, la compatibilidad con los gráficos generará eventos para los eventos de los usuarios que se indican en la siguiente tabla. Todos estos eventos muestran un objeto event con las siguientes propiedades:

  • type: Es una string que representa el tipo de evento.
  • region: Es un ID de la región afectada. Agrega el parámetro chof=json al tipo de gráfico sin procesar para ver una lista de nombres disponibles. Consulta chof=json para obtener más información.
Nombre Descripción valor de tipo
error Se activa cuando se produce un error cuando se intenta procesar el gráfico. id, mensaje
onmouseover Se activa cuando el usuario desplaza el mouse sobre un elemento del gráfico. "mouseover"
onmouseout Se activa cuando el usuario aleja un elemento del gráfico. "mouseout"
onclick Se activa cuando un usuario hace clic en un elemento del gráfico.

"clic"

¿Qué gráficos admiten eventos?

Cualquier gráfico que admita el parámetro chof=json admite eventos de lanzamiento (es decir, todos los gráficos, excepto los gráficos especiales, por ejemplo los códigos QR).

Ejemplo de control de eventos

Este es un ejemplo que muestra una barra que registra los clics del mouse.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

Política de Datos

Los datos se envían al servicio API de Google Chart.

Localización

Esta visualización admite cualquier localización compatible con el servicio de Google Chart.