- Descripción general
- Un ejemplo simple
- Etiquetar las barras
- Ejemplo avanzado
- Colocar barras en una fila
- Cómo cambiar las fuentes
- Cómo controlar los colores
- Líneas de cuadrícula superpuestas
- Personalización de información sobre la herramienta
- Cargando
- Formato de datos
- Opciones de configuración
- Métodos
- Eventos
- Política de Datos
Descripción general
Un cronograma es un gráfico que muestra cómo se usa un conjunto de recursos en el tiempo. Si administras un proyecto de software y quieres ilustrar quién hace qué y cuándo, o si estás organizando una conferencia y necesitas programar salas de reuniones, un cronograma suele ser una opción razonable para la visualización. Un tipo popular de cronograma es el gráfico de Gantt.
Nota: En los objetos de fecha de JavaScript, los meses se indexan a partir de cero y suben once, y enero es el mes 0 y diciembre 11. Si tu cronograma parece estar desfasado por un mes, es probable que este sea el motivo. Para obtener más información, consulta la página Fechas y horas.
Un ejemplo simple
Supongamos que quieres trazar el momento en que los presidentes estadounidenses Aquí, los "recursos" son los presidentes, y podemos representar el término de cada presidente como una barra:
Al desplazarse sobre una barra, aparece información sobre la herramienta con información más detallada.
Después de cargar el paquete timeline
y definir una devolución de llamada a fin de dibujar el gráfico cuando se renderiza la página, el método drawChart()
crea una instancia de google.visualization.Timeline()
y, luego, llena un objeto dataTable
con una fila para cada presidente.
Dentro de dataTable
, la primera columna es el nombre del presidente, y la segunda y tercera columna son las horas de inicio y finalización. Estas tienen el tipo Date
de JavaScript, pero también podrían ser números sin formato.
Por último, invocamos el método draw()
del gráfico, que lo muestra dentro de un div
con el mismo identificador (timeline
) que se usó cuando se declaró container
en la primera línea de drawChart()
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline" style="height: 180px;"></div> </body> </html>
Los cronogramas de Google Charts son personalizables y, en los siguientes ejemplos, te mostraremos algunas formas comunes de adaptar la apariencia de tus cronogramas.
Etiquetado de barras
Además de las etiquetas de fila (“Washington”, “Adams”, “Jefferson” de arriba), puedes etiquetar barras individuales. Aquí, cambiamos las etiquetas de las filas a números simples y colocamos el nombre de cada presidente en la barra.
En este código, insertamos una columna nueva en nuestros datos para incluir las etiquetas de la barra: el nombre completo de cada presidente. Cuando hay cuatro columnas en un dataTable
de cronograma, la primera se interpreta como la etiqueta de la fila, la segunda como la etiqueta de la barra y la tercera y cuarta como el inicio y el final.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example2.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Term' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> <div id="example2.1" style="height: 200px;"></div>
Nuestras nuevas etiquetas de fila no son muy informativas, por lo que debes quitarlas con la opción de cronograma showRowLabels
.
De forma predeterminada, showRowLabels
es true
. Si se establece en false
, se quitan las etiquetas de fila:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example2.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Term' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { timeline: { showRowLabels: false } }; chart.draw(dataTable, options); } </script> <div id="example2.2" style="height: 180px;"></div>
Ejemplo avanzado
Para que la cronología se vuelva más compleja, agreguemos vicepresidentes y secretarios de estado a nuestro gráfico. John Adams era vicepresidente antes de convertirse en presidente, y Thomas Jefferson era secretario de estado, vicepresidente y finalmente presidente.
En los cronogramas, un recurso tendrá el mismo color, incluso cuando aparezca en varias filas. Por lo tanto, en el siguiente gráfico, cada persona está representada con un color coherente.
Algunas secretarias de estado se entregan durante períodos muy cortos, por lo que este gráfico es una buena prueba del etiquetado. Cuando una etiqueta es demasiado grande para la barra, se abrevia o se elimina según el tamaño de la barra. Los usuarios siempre pueden desplazarse sobre la barra para obtener información sobre la herramienta.
En el cronograma, se organizarán las filas en orden (presidente en la parte superior del vicepresidente y en la Secretaría de Estado) porque ese es el orden que aparecen en el código que aparece a continuación. Sin embargo, el diseño de las barras se determina solo por las horas de inicio y finalización, por lo que cambiar dos secretarios de estado o dos presidentes en dataTable
no tiene efecto en el gráfico.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example3.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Position' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ], [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)], [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)], [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)], [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)], [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)], [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)], [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)], [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)], [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)], [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)], [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)], [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)] ]); chart.draw(dataTable); } </script> <div id="example3.1" style="height: 200px;"></div>
Cómo colocar barras en una fila
A diferencia de los papas, solo puede haber un presidente estadounidense a la vez. Por lo tanto, si etiquetas todas nuestras filas como "Presidente", el cronograma combinará las tres filas de nuestro primer gráfico en una sola para obtener una presentación más limpia. Puedes controlar este comportamiento con la opción groupByRowLabel
.
Este es el comportamiento predeterminado:
Ahora, configuremos groupByRowLabel
en false
y dividamos la fila en tres:
El código para desactivar la agrupación:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example4.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { timeline: { groupByRowLabel: false } }; chart.draw(dataTable, options); } </script> <div id="example4.2" style="height: 200px;"></div>
Cómo controlar los colores
De forma predeterminada, Google Charts elige colores optimizados para la estética y la legibilidad (incluidos los usuarios con discapacidades visuales). Puedes adaptar el comportamiento predeterminado con las opciones colorByRowLabel
, singleColor
, backgroundColor
y colors
.
La opción colorByRowLabel
colorea todas las barras de la misma fila de la misma manera. Esta puede ser una buena opción cuando hay brechas entre las barras.
colorByRowLabel
se establece de forma predeterminada en false
, por lo que anulamos eso y lo configuramos como true
.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ], [ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ], [ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]); var options = { timeline: { colorByRowLabel: true } }; chart.draw(dataTable, options); } </script> <div id="example5.1" style="height: 100px;"></div>
Si deseas que todas las barras tengan el mismo color, sin importar en qué fila se encuentren, usa la opción singleColor
:
En el siguiente código, singleColor
se establece en un valor hexadecimal para colorear todas las barras de color verde claro:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { singleColor: '#8d8' }, }; chart.draw(dataTable, options); } </script> <div id="example5.2" style="height: 150px;"></div>
Puedes controlar el color de fondo de las filas con la opción backgroundColor
:
backgroundColor
se especifica como un valor hexadecimal. Aquí lo vinculamos con colorByRowLabel
para mostrar pistas en una conferencia:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.3'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { colorByRowLabel: true }, backgroundColor: '#ffd' }; chart.draw(dataTable, options); } </script> <div id="example5.3" style="height: 150px;"></div>
Luego, para establecer el color de fondo en alternativo o no alterado por el índice de la fila, usa la opción alternatingRowStyle
(activa v51+):
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.4'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { colorByRowLabel: true }, alternatingRowStyle: false }; chart.draw(dataTable, options); } </script> <div id="example5.4" style="height: 150px;"></div>
Si deseas controlar los colores de barras individuales, usa la opción colors
:
colors
toma un arreglo de valores hexadecimales, que se aplican a las barras en orden:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.5'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { colors: ['#cbb69d', '#603913', '#c69c6e'], }; chart.draw(dataTable, options); } </script> <div id="example5.5" style="height: 150px;"></div>
Si tu gráfico requiere más colores que los enumerados, se comportará como si singleColor
estuviera establecido en el primer color de la lista. (Esto es válido para todos los gráficos de Google, no solo los cronogramas).
Otra forma de controlar los colores de barras individuales es usar una columna con la función de estilo.
El código para agregar y propagar una columna de estilo:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.6'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'string', id: 'style', role: 'style' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)], [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> <div id="example5.6" style="height: 150px;"></div>
Cómo cambiar las fuentes
Puedes elegir el tipo de letra y la fuente para las etiquetas de cada fila con rowLabelStyle
y las etiquetas en cada barra con barLabelStyle
. Ambos se muestran a continuación.
Nota: Asegúrate de elegir los tipos de letra que podrán procesar los navegadores de tus usuarios.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example6.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { colors: ['#cbb69d', '#603913', '#c69c6e'], timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' }, barLabelStyle: { fontName: 'Garamond', fontSize: 14 } } }; chart.draw(dataTable, options); } </script> <div id="example6.1" style="height: 200px;"></div>
No se puede establecer el color del texto de barLabel
.
Líneas de cuadrícula superpuestas
Google Charts realiza pequeños ajustes a los extremos de la barra para evitar ocultar las líneas de cuadrícula del cronograma. Para evitar este comportamiento, establece la opción avoidOverlappingGridLines
en false
.
Para ilustrar el efecto, aquí hay dos ejemplos: el primero con una línea de cuadrícula superpuesta y el segundo sin una.
El siguiente código se superpone a las líneas de cuadrícula:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example7.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)], [ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]); var options = { timeline: { showRowLabels: false }, avoidOverlappingGridLines: false }; chart.draw(dataTable, options); } </script> <div id="example7.1" style="height: 200px;"></div>
Cómo personalizar la información sobre la herramienta
Puedes personalizar lo que ven los usuarios cuando se desplazan sobre las barras de un cronograma si agregas una columna de información sobre la herramienta en una tabla de datos de cinco columnas. Para proporcionar información de la herramienta no predeterminada, cada fila de tu tabla de datos debe tener las cinco columnas (etiqueta de la fila, etiqueta de la barra, información sobre la herramienta, inicio y fin):
Si te desplazas sobre una barra, aparece información sobre la herramienta con el texto definido en la tercera columna. En este gráfico, debemos establecer la segunda columna en valores ficticios (aquí, null
) para que nuestras información sobre la herramienta puedan existir en la tercera columna.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline-tooltip'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'string', id: 'dummy bar label' }); dataTable.addColumn({ type: 'string', role: 'tooltip' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ], [ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ], [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline-tooltip" style="height: 180px;"></div> </body> </html>
Cargando
El nombre del paquete google.charts.load
es timeline
:
google.charts.load("current", {packages: ["timeline"]});
El nombre de clase de la visualización es google.visualization.Timeline
:
var visualization = new google.visualization.Timeline(container);
Formato de los datos
Filas: Cada fila de la tabla representa una barra de cronograma.
Columnas:
Columna 0 | Columna 1 | Columna 2 | Columna 3 | Columna 4 | |
---|---|---|---|---|---|
Propósito: | Etiqueta de fila | Etiqueta de la barra (opcional) | Información sobre la herramienta (opcional) | Inicio | Fin |
Tipo de datos: | string | string | string | número o fecha | número o fecha |
Rol: | datos | datos | información sobre la herramienta | datos | datos |
Opciones de configuración
Nombre | |
---|---|
AlternarFilaEstilo |
Si el gráfico debe cambiar el color de fondo por el índice de fila (es decir, el color de fondo del tono de las filas pares indexadas, un matiz más oscuro) Si es falso, el fondo del gráfico tendrá un color uniforme. Si es verdadero, el fondo del gráfico cambiará el tono del índice de fila. (Nota: versión 51 o posterior activa) Tipo: booleano
Predeterminado: verdadero
|
EvitaSuperposición |
Si los elementos de visualización (p.ej., las barras en un cronograma) deben ocultar las líneas de cuadrícula. Si es falso, los elementos de visualización pueden cubrir por completo las líneas de cuadrícula. Si es verdadero, los elementos de visualización pueden modificarse para mantener visibles las líneas de cuadrícula. Tipo: booleano
Predeterminado: verdadero
|
Color de fondo |
El color de fondo para el área principal del gráfico Puede ser una string de color HTML simple, por ejemplo: Type: string o objeto
Predeterminado: "white"
|
colores |
Los colores que se usarán para los elementos del gráfico. Un arreglo de strings, en la que cada elemento es una string de color HTML, por ejemplo: Tipo: Arreglo de strings
Predeterminado: colores predeterminados
|
enableInteractivity |
Si el gráfico muestra eventos basados en el usuario o reacciona a la interacción del usuario Si es falso, el gráfico no arrojará un evento de selección o de otro tipo basado en la interacción (pero sí arrojará eventos de error o listos) y no mostrará el texto emergente ni cambiará de alguna otra manera en función de la entrada del usuario. Tipo: booleano
Predeterminado: verdadero
|
Nombre de fuente |
El tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto con propiedades de elementos específicos del gráfico. Tipo: string
Predeterminado: "Arial"
|
fontSize |
El tamaño predeterminado de la fuente, en píxeles, de todo el texto del gráfico. Puedes anular esto con propiedades de elementos específicos del gráfico. Tipo: número
Predeterminado: automático
|
forceIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en i-frames). Tipo: booleano
Valor predeterminado: falso
|
alto |
Altura del gráfico, en píxeles. Tipo: número
Predeterminado: altura del elemento que lo contiene
|
cronograma.barLabelStyle |
Un objeto que especifica el estilo de texto de la etiqueta de la barra. Tiene el siguiente formato: {fontName: <string>, fontSize: <string>}
Consulta también Type:
Valor predeterminado: null
|
cronograma.colorByRowLabel |
Si se establece como verdadera, se pintan las barras de la fila de la misma manera. La opción predeterminada es usar un color por cada etiqueta de la barra. Tipo: booleano
Valor predeterminado: falso
|
cronograma.groupByRowLabel |
Si se configura como falso, crea una fila para cada entrada Tipo: booleano
Predeterminado: verdadero
|
cronograma.rowLabelStyle |
Un objeto que especifica el estilo de texto de la etiqueta de fila. Tiene el siguiente formato: {color: <string>, fontName: <string>, fontSize: <string>}
Type:
Valor predeterminado: null
|
cronograma.showBarLabels |
Si se configura como falso, omite las etiquetas de la barra. De forma predeterminada, se muestran. Tipo: booleano
Predeterminado: verdadero
|
cronograma.showRowLabels |
Si se configura como falso, omite las etiquetas de fila. De forma predeterminada, se muestran. Tipo: booleano
Predeterminado: verdadero
|
cronograma.singleColor |
Colorea todas las barras. Se especifica como un valor hexadecimal (p.ej., "#8d8"). Tipo: string
Valor predeterminado: null
|
tooltip.isHtml |
Configúralo en Nota: La personalización del contenido de la información sobre la herramienta de HTML a través de la función de datos de la columna de información sobre la herramienta no es compatible con la visualización del cuadro de burbujas. Tipo: booleano
Predeterminado: verdadero
|
Información sobre la herramienta |
La interacción del usuario que hace que se muestre la información sobre la herramienta:
Tipo: string
Predeterminado: "enfoque"
|
ancho |
Ancho del gráfico en píxeles. Tipo: número
Predeterminado: ancho del elemento que lo contiene
|
Métodos
Método | |
---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos los recursos asignados. Tipo de datos que se muestra: ninguno
|
getSelection() |
Muestra un arreglo de las entidades del gráfico seleccionadas.
Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías.
Para este gráfico, solo se puede seleccionar una entidad por momento.
Tipo de datos que se muestra: arreglo de elementos de selección
|
Eventos
Nombre | |
---|---|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. Propiedades: ID, mensaje
|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y de columna del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda en una columna (el índice de fila es nulo) y una categoría en una fila (el índice de la columna es nulo). Properties: Row, Column
|
onmouseout |
Se activa cuando el usuario se aleja del mouse de una entidad visual. Vuelve a pasar los índices de fila y columna del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda en una columna (el índice de fila es nulo) y una categoría en una fila (el índice de la columna es nulo). Properties: Row, Column
|
ready |
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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a Propiedades: ninguna
|
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.