Se usó la API de Cloud Translation para traducir esta página.

Cronograma con anotaciones

Overview
Ejemplo
Cargando
Formato de los datos
Opciones de configuración
Métodos
Eventos
Política de Datos
Notes

Descripción general

Es un gráfico de líneas de serie temporal interactivo con anotaciones opcionales.

El cronograma con anotaciones ahora usa automáticamente gráficos de anotaciones en su lugar.

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 de forma explícita 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 datos

Puedes mostrar una o más líneas en tu gráfico. Cada fila representa una posición X en el gráfico, es decir, un tiempo específico; cada línea se describe mediante 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 menor resolución de tiempo 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 aquí:
- Valor Y: [obligatorio, número] La primera columna de cada conjunto describe el valor de la línea en el momento correspondiente de la primera columna. La etiqueta de columna se muestra en el gráfico como el título de esa línea.
- Título de la anotación - [Opcional, String] Si una columna de cadena sigue a la columna de valor y la opción displayAnnotations es verdadera, esta columna contiene 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 "Día más caluroso de registro".
- Texto de anotación: [Cadena opcional] Si existe una segunda columna de cadena para esta serie, el valor de la celda se usará 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 como true. Básicamente, no hay límite de tamaño, pero ten en cuenta que las entradas demasiado largas pueden 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 la columna. Por ejemplo, si este fuese el día más caluroso en un punto récord, podrías decir algo como “El siguiente día más cercano fue 10 grados más frío”.

Opciones de configuración

Nombre	Tipo	Predeterminado	Descripción
allowHtml	boolean	false	Si se configura como verdadera, cualquier texto de anotación que incluya etiquetas HTML se procesará como HTML.
allowRedraw	boolean	false	Habilita una técnica de rediseño más eficiente para la segunda llamada y las posteriores a `draw()` en esta visualización. Solo vuelve a dibujar el área del gráfico. Para usar esta opción, debes cumplir con los siguientes requisitos: allowRedraw debe ser verdadero displayAnnotations debe ser falso (es decir, no puedes mostrar anotaciones) debes pasar las mismas opciones y valores (excepto para allowRedraw y displayAnnotations) que en tu primera llamada a `draw()`.
allValuesSuffix	cadena	ninguno	Un sufijo que se agregará a todos los valores en las escalas y en la leyenda.
annotationsWidth	número	25	El ancho (en porcentaje) del área de las anotaciones, de toda el área del gráfico. Debe ser un número comprendido 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 array de cadenas. Cada elemento es una cadena en un formato de color HTML válido. Por ejemplo, "rojo" o "#00cc00".
dateFormat	cadena	Puede ser “MMMM dd, yyyy” o “HH:mm MMMM dd, yyyy”, según el tipo de la primera columna (fecha o fecha y hora, respectivamente).	El formato que se usa para mostrar la información de la fecha en la esquina superior derecha. El formato de este campo es el que especifica la clase SimpleDateFormat de java.
displayAnnotations	boolean	false	Si se establece como verdadera, el gráfico mostrará anotaciones sobre los valores seleccionados. Cuando esta opción se establece como verdadera, después de cada columna numérica, se pueden agregar dos columnas opcionales de string de anotación: una para el título de la anotación y otra para el texto de la anotación.
displayAnnotationsFilter	boolean	false	Si la estableces como verdadera, el gráfico mostrará un control de filtro para filtrar anotaciones. Usa esta opción cuando haya muchas anotaciones.
displayDateBarSeparator	boolean	verdadero	Indica si se debe mostrar un pequeño separador de barra ( \| ) entre los valores de la serie y la fecha en la leyenda, donde verdadero significa sí.
displayExactValues	boolean	false	Establece si se debe mostrar una versión abreviada y redondeada de los valores en la parte superior del gráfico para ahorrar espacio; "false" indica que sí. Por ejemplo, si se configura como falso, 56123.45 podría mostrarse como 56.12k.
displayLegendDots	boolean	verdadero	Indica si se deben mostrar puntos junto a los valores en el texto de la leyenda, donde verdadero significa sí.
displayLegendValues	boolean	verdadero	Indica si se deben mostrar los valores destacados en la leyenda, donde verdadero significa sí.
displayRangeSelector	boolean	verdadero	Indica si se muestra el área de selección del rango de zoom (el área en la parte inferior del gráfico), donde "falso" significa que no. El contorno del selector de zoom es una versión a escala logarítmica de la última serie del gráfico, ajustada para adaptarse a la altura del selector de zoom.
displayZoomButtons	boolean	verdadero	Indica si se deben mostrar los vínculos de zoom ("1d 5d 1m", etc.), donde "falso" significa que no.
relleno	número	0	Es un número de 0 a 100 (inclusive) que especifica el alfa del relleno debajo de cada línea en el gráfico de líneas. 100 significa un 100% de relleno opaco, 0 significa que no hay ningún relleno. El color de relleno es del mismo que la línea superior.
highlightDot	cadena	"más cercano"	Qué punto de la serie se destacará y los valores correspondientes que se mostrarán en la leyenda. Selecciona uno de estos valores: "cercano": los valores más próximos al eje X respecto del mouse. 'último': el siguiente conjunto de valores a la izquierda del mouse.
legendPosition	cadena	“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").
max	número	automático	El valor máximo que se muestra en el eje Y. Si el dato máximo supera este valor, se ignorará esta configuración y el gráfico se ajustará para mostrar la siguiente marca de verificación principal por encima del dato máximo. Esto tendrá prioridad sobre el máximo del eje Y determinado por `scaleType`.
min	número	automático	El valor mínimo que se muestra en el eje Y. Si el dato mínimo es menor que este valor, se ignorará esta configuración y el gráfico se ajustará para mostrar la siguiente marca de verificación principal debajo del dato mínimo. Esto tendrá prioridad sobre el mínimo del eje Y determinado por `scaleType`.
numberFormats	Cadena o un mapa de pares de número:String	automático	Especifica los patrones de formato de número que se usarán para dar formato a los valores de la parte superior del gráfico. Los patrones deben tener el formato que especifica la clase DecimalFormat de java. Si no se especifica, se usa el patrón de formato predeterminado. Si se especifica un solo patrón de cadena, se utiliza para todos los valores. Si se especifica un mapa, las claves son índices de series (basados en cero), y los valores son los patrones que se usarán para dar formato a la serie especificada. No es necesario 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`.
scaleColumns	Array de números	Automática	Especifica qué valores mostrar en las marcas del eje Y del gráfico. La configuración predeterminada es tener una sola escala en el lado derecho, que se aplica a ambas series, pero puedes tener diferentes lados del grafo escalados a valores de series diferentes. Esta opción toma un array de cero a tres números que especifican el índice (basado en cero) de la serie que se usará como valor de escala. El lugar en el que se muestran estos valores depende de la cantidad de valores que incluyas en el array: Si especificas un array vacío, en el gráfico no se mostrarán los valores Y junto a las marcas. Si especificas un valor, la escala de la serie indicada se mostrará solo 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 en el medio del gráfico. Se ignorará cualquier valor posterior al tercero en la matriz. Cuando se muestra más de una escala, es recomendable configurar la opción `scaleType` como “allfixed” o “allmaximized”.
scaleType	cadena	'corregido'	Establece los valores máximo y mínimo que se muestran en el eje Y. Están disponibles las siguientes opciones: "maximized": el eje Y abarcará desde el mínimo hasta los valores máximos de la serie. Si tienes más de una serie, usa la maximizació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á desde cero hasta el valor máximo de datos. Si todos los valores son <=0, el eje Y abarcará desde cero hasta el valor de datos mínimo. Si los valores son positivos y negativos, el eje Y variará del máximo de la serie al mínimo de la serie. En el caso de varias series, usa "allfixed". “allmaximized”: lo mismo 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 tergiversará respecto del eje Y, pero si colocas el cursor sobre cada serie, se mostrará su valor verdadero. "allfixed": Es igual que "fixed", pero se usa cuando se muestran varias escalas. Esta configuración ajusta cada escala según la serie a la que se aplica (úsala junto con `scaleColumns`). Si especificas las opciones mínima o máxima, estas tendrán prioridad sobre los valores mínimo y máximo determinados por tu tipo de escala.
Grosor	número	0	Un número de 0 a 10 (inclusive) que especifica el grosor de las líneas, donde 0 es el valor más delgado.
wmode	cadena	"ventana"	El parámetro Modo de ventana (wmode) para el gráfico Flash. Los valores disponibles son "opaco", "window" o "transparent".
zoomEndTime	Fecha	ninguno	Establece la fecha y hora de finalización del intervalo de zoom seleccionado.
zoomStartTime	Fecha	ninguno	Establece la fecha y hora de inicio del rango 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 a `draw()` y las posteriores mediante la propiedad allowRedraw.
`getSelection()`	Array 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 propiedades `start` y `end`	Muestra un objeto con propiedades `start` y `end`, y cada una de ellas 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 array 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 seleccionado que deseas. Configura start como nulo para incluir todo desde la fecha más temprana hasta end; establece end como nulo para incluir todo desde start hasta la última fecha.
`showDataColumns(columnIndexes)`	ninguno	Muestra las series de datos especificadas del gráfico, después de que se ocultaron con el método `hideDataColumns`. Acepta un parámetro que puede ser un número o un array 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	Se 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 llamar al método `getVisibleChartRange` para obtenerlas.	`start`: Fecha. Indica la hora de inicio del rango de zoom. `end`: Fecha. Indica la hora de finalización del intervalo de zoom.
lista	El gráfico está listo para llamadas de método externas. 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` e llamarlos solo después de que se haya activado el evento.	Ninguno
select	Cuando el usuario hace clic en una marca de anotación (marcador), se selecciona la celda correspondiente de la tabla de datos. Luego, la visualización activa este evento.	Ninguno

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

Política de Datos

Todo el código y los datos se procesan y renderizan 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 esta (y todas las visualizaciones basadas en Flash) no funcione correctamente cuando se acceda a ella desde una ubicación de archivo en el navegador (por ejemplo, file:///c:/webhost/myhost/myviz.html) en lugar de una URL de servidor web (por ejemplo, http://www.myhost.com/myviz.html). Por lo general, este es solo un problema de prueba. Puedes solucionar este problema como se describe en el sitio web de Macromedia.