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
odatetime
y especifica el valor X del punto en el gráfico. Si esta columna es del tipodate
(y nodatetime
), 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 configurasallowHtml
entrue
. 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
|
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:
|
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 se especifica esta opción, se ignora la opción |
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:
Cuando se muestra más de una escala, se recomienda configurar la opción |
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:
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. |
|
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. |
Ninguna |
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. | Ninguna |
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.