Cronograma con anotaciones

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Descripción general

Un gráfico de líneas interactivo de series temporales con anotaciones opcionales.

En su lugar, el cronograma anotado ahora usa automáticamente gráficos de anotación.

Ejemplo

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

Importante: Para usar esta visualización, debes especificar la altura y el ancho del elemento contenedor explícitamente en tu página. Por ejemplo: <div id="chart_div" style="width:400; height:250"></div>.

Cargando

El nombre del paquete google.charts.load es "annotatedtimeline"

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

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

  var visualization = new google.visualization.AnnotatedTimeLine(container);

Formato de los datos

Puedes mostrar una o más líneas en el gráfico. Cada fila representa una posición X en el gráfico, es decir, una hora específica. Cada línea se describe con un conjunto de una a tres columnas.

  • La primera columna es de tipo date o datetime y especifica el valor X del punto en el gráfico. Si esta columna es del tipo date (y no datetime), la resolución de tiempo más pequeña en el eje X será de un día.
  • Luego, cada línea de datos se describe con un conjunto de una a tres columnas adicionales, como se describe a continuación:
    • Valor Y: [Obligatorio, número] La primera columna de cada conjunto describe el valor de la línea en el tiempo correspondiente de la primera columna. La etiqueta de la columna se muestra en el gráfico como el título de esa línea.
    • Título de anotación: [opcional, string] Si una columna de string sigue la columna de valor y la opción displayAnnotations es verdadera, esta columna tiene un título corto que describe este punto. Por ejemplo, si esta línea representa la temperatura en Brasil y este punto es un número muy alto, el título podría ser "El día más caluroso de todos".
    • Texto de anotación: [String opcional] Si existe una segunda columna de strings para esta serie, se usará el valor de la celda como texto descriptivo adicional para este punto. Debes configurar la opción displayAnnotations como verdadera para usar esta columna. Puedes usar etiquetas HTML si configuras allowHtml en true. Básicamente, no hay límite de tamaño, pero ten en cuenta que las entradas demasiado largas podrían desbordar la sección de visualización. No es necesario que tengas esta columna, incluso si tienes una columna de título de anotación para este punto. El gráfico no usa la etiqueta de columna. Por ejemplo, si este fue el día más caluroso en un punto récord, puedes decir algo como "El día más cercano fue 10 grados más fresco".

Opciones de configuración

Nombre Tipo Predeterminado Descripción
allowHtml boolean falso Si se configura como verdadero, cualquier texto de anotación que incluya etiquetas HTML se procesará como HTML.
allowRedraw boolean falso

Habilita una técnica de rediseño más eficiente para las segundas y posteriores llamadas a draw() en esta visualización. Solo vuelve a dibujar el área del gráfico. Para usar esta opción, debes cumplir los siguientes requisitos:

  • allowRedraw debe ser verdadero
  • DisplayAnnotations debe ser falsa (es decir, no puedes mostrar anotaciones)
  • debes pasar las mismas opciones y valores (excepto para allowRedraw y displayAnnotations) que tenías en tu primera llamada a draw().
suplemento suplementario string ninguno Un sufijo que se agrega a todos los valores en las escalas y la leyenda.
Ancho de anotaciones número 25 El ancho (en porcentaje) del área de las anotaciones, del área del gráfico completa. Debe ser un número entre 5 y 80.
colores Arreglo de strings Colores predeterminados Los colores que se usarán para las líneas y etiquetas del gráfico. Un arreglo de strings. Cada elemento es una string en un formato de color HTML válido. Por ejemplo, “rojo” o “#00cc00”.
Formato de fecha string "MMMM dd, yyyy" o "HH:mm MMMM dd, yyyy", según el tipo de la primera columna (fecha o fecha, respectivamente). Formato que se utiliza para mostrar la información sobre la fecha en la esquina superior derecha. El formato de este campo es el que especifica la clase java SimpleDateFormat.
Anotación de pantalla boolean falso Si se establece como verdadera, el gráfico mostrará anotaciones sobre los valores seleccionados. Cuando esta opción se configura como verdadera, después de cada columna numérica, se pueden agregar dos columnas de string de anotación opcionales, una para el título de la anotación y otra para el texto de la anotación.
DisplayAnnotationsFilter boolean falso Si se establece como verdadera, el gráfico mostrará un control de filtro para filtrar las anotaciones. Usa esta opción cuando haya muchas anotaciones.
Separador de barra de fecha de visualización boolean true Indica si se muestra un separador de barra pequeño ( | ) entre los valores de serie y la fecha en la leyenda, cuando verdadero significa sí.
Valor exacto de la Red de Display boolean falso Indica si se debe mostrar una versión acortada y redondeada de los valores en la parte superior del gráfico para ahorrar espacio. El valor falso indica que puede ser. Por ejemplo, si se establece en false, 56123.45 se muestra como 56.12k.
displayLegendDots boolean true Indica si se deben mostrar puntos junto a los valores en el texto de la leyenda, cuando verdadero significa sí.
valores de leyenda de la pantalla boolean true Indica si se deben mostrar los valores destacados en la leyenda, cuando verdadero significa sí.
Selector de rango de visualización boolean true

Indica si se debe mostrar el área de selección de rango de zoom (el área en la parte inferior del gráfico), donde "falso" significa "no".

El contorno del selector de zoom es una versión de escala de registro de la última serie del gráfico, ajustada para ajustarse a la altura del selector de zoom.

Botones de zoom de la pantalla boolean true Indica si se deben mostrar los vínculos de zoom ("1d 5d 1m", etc.), en los que "false" significa "no".
relleno número 0 Un número del 0 al 100 (inclusive) que especifica el alfa del relleno debajo de cada línea en el gráfico de líneas. 100 significa 100% de relleno opaco, 0 significa que no hay relleno en absoluto. El color de relleno es el mismo que el de la línea que aparece arriba.
Punto destacado string "más cercano"

Qué punto de la serie se debe destacar y los valores correspondientes que se muestran en la leyenda. Selecciona uno de estos valores:

  • "más cercano": los valores más cercanos al eje X al mouse.
  • 'último': el siguiente conjunto de valores a la izquierda del mouse.
leyendadeposición string "sameRow" Indica si se debe colocar la leyenda de color en la misma fila con los botones de zoom y la fecha ("sameRow") o en una fila nueva ("newRow").
máx. número automático El valor máximo que se muestra en el eje Y. Si el punto máximo de datos excede este valor, esta configuración se ignorará y el gráfico se ajustará para mostrar la siguiente marca de verificación principal por encima del punto de datos máximo. Esto tendrá prioridad sobre el máximo del eje Y determinado por scaleType.
min número automático El valor mínimo para mostrar en el eje Y. Si el punto de datos mínimo es menor que este valor, esta configuración se ignorará y el gráfico se ajustará para mostrar la siguiente marca de verificación principal debajo del punto de datos mínimo. Esta tendrá prioridad sobre el eje Y, que se determina por scaleType.
Formatos de número String o un mapa de pares number:string automático

Especifica los patrones de formato de número que se usarán para dar formato a los valores en la parte superior del grafo.

Los patrones deben tener el formato que especifica la clase java DecimalFormat.

  • Si no se especifica, se usa el patrón de formato predeterminado.
  • Si se especifica un solo patrón de string, se usa para todos los valores.
  • Si se especifica un mapa, las claves son índices (se base en cero) de la serie y los valores son los patrones que se usarán para darle formato a la serie especificada.
    No es obligatorio que incluyas un formato para cada serie del gráfico; las series no especificadas usarán el formato predeterminado.

Si se especifica esta opción, se ignora la opción displayExactValues.

Columnas a escala Arreglo de números Automática

Especifica qué valores se muestran en las marcas del eje Y en el gráfico. La opción predeterminada es tener una sola escala en el lado derecho, que se aplica a ambas series; pero puedes tener diferentes lados del grafo ajustado a diferentes valores de serie.

Esta opción toma un arreglo de cero a tres números que especifica el índice (basado en cero) de la serie para usar como valor de escala. La ubicación de estos valores depende de la cantidad de valores que incluyas en tu arreglo:

  • Si especificas un arreglo vacío, el gráfico no mostrará valores Y junto a las marcas.
  • Si especificas un valor, solo se mostrará la escala de la serie indicada en el lado derecho del gráfico.
  • Si especificas dos valores, se agregará una escala para la segunda serie a la derecha del gráfico.
  • Si especificas tres valores, se agregará una escala para la tercera serie al centro del gráfico.
  • Se ignorará cualquier valor posterior al tercero en el arreglo.

Cuando se muestra más de una escala, se recomienda configurar la opción scaleType como "allfixed" o "allmaximized".

Tipo de escala string 'corregido' [fixed]

Establece los valores máximos y mínimos que se muestran en el eje Y. Las siguientes opciones están disponibles:

  • “maximized”: el eje Y abarcará el mínimo con los valores máximos de la serie. Si tienes más de una serie, usa la opción
  • “Fijo” [default]: El eje Y varía, según los valores de los datos:
    • Si todos los valores son >=0, el eje Y abarcará de cero al valor de datos máximo.
    • Si todos los valores son <= 0, el eje Y abarcará de cero al valor mínimo de datos.
    • Si los valores son positivos y negativos, el eje Y va desde el máximo de la serie hasta el mínimo.

      Para varias series, use “allfixed”.
  • "allmaximized": al igual que "maximized", pero se usa cuando se muestran varias escalas. Ambos gráficos se maximizarán dentro de la misma escala, lo que significa que uno se representará de manera incorrecta en el eje Y, pero el desplazamiento del cursor sobre cada serie mostrará su verdadero valor.
  • "allFix": Es lo mismo que "fixed", pero se usa cuando se muestran varias escalas. Esta configuración ajusta cada escala a la serie a la que se aplica (usa esto junto con scaleColumns).

Si especificas las opciones mínimas o máximas, tendrán prioridad sobre los valores mínimos y máximos determinados por tu tipo de escala.

Grosor número 0 Un número del 0 al 10 (inclusive) que especifica el grosor de las líneas, donde 0 es el delgado.
wmode string "window" El parámetro Modo de ventana (wmode) para el gráfico Flash. Los valores disponibles son "opaco", "window" o "transparent".
Hora de finalización de zoom Fecha ninguno Establece la fecha y la hora de finalización del intervalo de zoom seleccionado.
Hora de inicio del zoom Fecha ninguno Establece la fecha y la hora de inicio del intervalo de zoom seleccionado.

Métodos

Método Tipo de datos que se muestra Descripción
draw(data, options) ninguno Dibuja el gráfico. Puedes acelerar el tiempo de respuesta de la segunda llamada y las llamadas posteriores a draw() con la propiedad allowRedraw.
getSelection() Arreglo de elementos de selección Implementación estándar de getSelection(). Los elementos seleccionados son elementos de celda. El usuario solo puede seleccionar una celda a la vez.
getVisibleChartRange() Un objeto con las propiedades start y end Muestra un objeto con las propiedades start y end, cada una de las cuales es un objeto Date, que representa la selección de la hora actual.
hideDataColumns(columnIndexes) ninguno Oculta la serie de datos especificada del gráfico. Acepta un parámetro que puede ser un número o un arreglo de números, en el que 0 se refiere a la primera serie de datos, y así sucesivamente.
setVisibleChartRange(start, end) ninguno Establece el rango visible (zoom) en el rango especificado. Acepta dos parámetros de tipo Date que representan la primera y la última vez del rango visible deseado. Configura start como nulo para incluir todo desde la primera fecha hasta end; establece end como nulo para incluir todo desde start hasta la última fecha.
showDataColumns(columnIndexes) ninguno Muestra la serie de datos especificada del gráfico después de que se ocultaron mediante el método hideDataColumns. Acepta un parámetro que puede ser un número o un arreglo de números, en el que 0 se refiere a la primera serie de datos, y así sucesivamente.

Eventos

Nombre Descripción Propiedades
cambio de rango Cambió el rango de zoom. Se activa después de que el usuario modifica el intervalo de tiempo visible, pero no después de una llamada al método setVisibleChartRange.
Nota: Se recomienda no usar las propiedades del evento, sino llamarlas al método getVisibleChartRange para obtenerlas.
  • start: Fecha. Hora de inicio del rango de zoom.
  • end: Fecha. Es la hora de finalización del intervalo de zoom.
lista El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw y llamarlo solo después de que se active el evento. Ninguno
select Cuando el usuario hace clic en una marca de anotación (marcador), se selecciona la celda correspondiente en la tabla de datos. Luego, la visualización activa este evento. Ninguno

Nota: Debido a ciertas limitaciones, es posible que no se muestren los eventos si accedes a la página como un archivo en tu navegador (p.ej., "file://") en lugar de hacerlo desde un servidor (p.ej., “http://www”).

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.

Notas

Debido a la configuración de seguridad de Flash, es posible que esto (y todas las visualizaciones basadas en Flash) no funcione correctamente cuando se acceda a él desde una ubicación de archivo en el navegador (p.ej., file:///c:/webhost/myhost/myviz.html) en lugar de hacerlo desde una URL de servidor web (p.ej., http://www.myhost.com/myviz.html). Por lo general, este problema es solo de prueba. Puedes solucionar este problema como se describe en el sitio web de Macromedia.