- Overview
- Un ejemplo sencillo
- Etiqueta 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
- Cómo personalizar la información sobre la herramienta
- Cargando
- Formato de los datos
- Opciones de configuración
- Métodos
- Eventos
- Política de datos
Descripción general
Un cronograma es un gráfico en el que se muestra cómo se usa un conjunto de recursos a lo largo del tiempo. Si administras un proyecto de software y deseas 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 de visualización razonable. Un tipo popular de cronograma es el diagrama de Gantt.
Nota: En los objetos de fecha de JavaScript, los meses se indexan desde cero y aumentan hasta once, enero es el mes 0 y diciembre el mes 11. Si tu cronograma parece estar fuera de un mes, el más probable es el motivo. Para obtener más información, consulta la página Fechas y horarios.
Un ejemplo simple
Digamos que quieres trazar cuándo los presidentes estadounidenses cumplieron sus mandatos. Aquí, los "recursos" son los presidentes, y podemos representar el término de cada presidente como una barra:
Si colocas el cursor sobre una barra, aparecerá un cuadro de información con información más detallada.
Después de cargar el paquete timeline y definir una devolución de llamada para 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 dataTable con una fila para cada presidente.
Dentro de dataTable, la primera columna es el nombre del presidente, y la segunda y tercera columna indican las horas de inicio y finalización. Estos tienen el tipo Date de JavaScript, pero también pueden 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 el aspecto de tus cronogramas.
Cómo etiquetar las barras
Además de las etiquetas de fila ("Washington", "Adams", "Jefferson" anterior), 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 contener 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 fila, la segunda como la etiqueta de barra y la tercera y cuarta como la etiqueta de inicio y fin.
<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 etiquetas de filas nuevas anteriores no son muy informativas, así que las quitemos con la opción showRowLabels de cronograma.
De forma predeterminada, el valor de 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 nuestro cronograma sea más complejo, agreguemos vicepresidentes y secretarios de estado a nuestro estatuto. John Adams fue vicepresidente antes de asumir el rol de presidente, Thomas Jefferson fue secretario de Estado, luego vicepresidente y, por último, presidente.
En los cronogramas, un recurso tendrá el mismo color, incluso cuando aparezca en varias filas, por lo que, en el siguiente gráfico, cada persona se representa con un color coherente.
Algunos secretarios de estado actuaron durante períodos muy breves, por lo que este gráfico es una buena prueba de 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 colocar el cursor sobre la barra para obtener información sobre la herramienta.
En el cronograma se organizarán las filas (de presidente, de vicepresidente y de secretario de Estado), ya que ese es el orden en el que aparecen en el código que aparece a continuación. Sin embargo, el diseño de las barras está determinado solo por las horas de inicio y finalización, por lo que intercambiar dos secretarios de estado o dos presidentes en dataTable no tiene ningún 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 de EE.UU. a la vez, por lo que, si etiquetamos todas nuestras filas como “Presidentes”, el cronograma combinará las tres filas de nuestro primer gráfico en una fila para lograr una presentación más limpia. Puedes controlar este comportamiento con la opción groupByRowLabel.
Este es el comportamiento predeterminado:
Ahora, establezcamos groupByRowLabel en false y dividamos la fila en tres:
Este es 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, Gráficos de Google 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. Esta puede ser una buena opción cuando hay espacios entre las barras.
colorByRowLabel se establece de forma predeterminada en false, por lo que aquí 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, independientemente de la fila en la que 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 alternado o no alternativo por índice de 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 array 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 de los que se indican, se comportará como si singleColor se hubiera establecido en el primer color de la lista. (Esto se aplica a todos los gráficos de Google, no solo a 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 para las etiquetas de cada barra con barLabelStyle. Ambos se muestran a continuación.
Nota: Asegúrate de elegir los tipos de letra que podrán renderizar 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 puedes establecer el color del texto en barLabel.
Líneas de cuadrícula superpuestas
Gráficos de Google realiza pequeños ajustes a los extremos de las barras 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.
Este es el código que se superpone con 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 colocan el cursor 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 sobre la herramienta no predeterminada, cada fila de la tabla de datos debe tener las cinco columnas (etiqueta de fila, etiqueta de barra, información sobre la herramienta, inicio y fin):
Cuando colocas el cursor sobre una barra, aparece un cuadro de información con el texto definido en la tercera columna. En este gráfico, debemos establecer la segunda columna en valores ficticios (aquí, null) para que la información sobre la herramienta pueda 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 | |
|---|---|---|---|---|---|
| Objetivo: | Etiqueta de fila | Etiqueta de barra (opcional) | Información (opcional) | Iniciar | Finalizar |
| Tipo de datos: | cadena | cadena | cadena | número o fecha | número o fecha |
| Role: | datos | datos | información sobre la herramienta | datos | datos |
Opciones de configuración
| Nombre | |
|---|---|
| alternatingRowStyle |
Indica si el gráfico debe alternar el color de fondo según el índice de fila (es decir, cambiar el tono del color de fondo de las filas con índices uniformes a un tono más oscuro). Si es falso, el fondo del gráfico tendrá un color uniforme. Si es verdadero, el fondo del gráfico alternará el tono por índice de fila. (Nota: v51 y versiones posteriores activas) Tipo: booleano
Predeterminado: verdadero
|
| avoidOverlappingGridLines |
Indica si los elementos de visualización (p.ej., las barras de un cronograma) deben oscurecer las líneas de cuadrícula. Si es falso, las líneas de la cuadrícula pueden estar cubiertas por completo con elementos de pantalla. Si es verdadero, los elementos de visualización se pueden alterar para mantener visibles las líneas de cuadrícula. Tipo: booleano
Predeterminado: verdadero
|
| backgroundColor |
El color de fondo del área principal del gráfico. Puede ser una cadena simple de color HTML, por ejemplo: Tipo: objeto o cadena
Predeterminado: “white”
|
| colores |
Los colores que se usarán para los elementos del gráfico. Un array de cadenas, en el que cada elemento es una cadena de color HTML, por ejemplo: Tipo: Arreglo de cadenas
Predeterminado: Colores predeterminados
|
| enableInteractivity |
Si el gráfico arroja eventos basados en el usuario o reacciona a la interacción del usuario. Si es falso, el gráfico no arrojará "seleccionar" ni otros eventos basados en interacciones (pero sí arrojará eventos listos o de error), ni mostrará texto flotante ni cambiará según la entrada del usuario. Tipo: booleano
Predeterminado: verdadero
|
| fontName |
Es el tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico. Tipo: string
Predeterminado: "Arial"
|
| fontSize |
El tamaño de fuente predeterminado, en píxeles, de todo el texto en el gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico. Tipo: Número
Predeterminada: automática
|
| 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 iframes). Tipo: booleano
Predeterminado: falso
|
| height |
Altura del gráfico en píxeles. Tipo: Número
Predeterminado: la altura del elemento contenedor
|
| timeline.barLabelStyle |
Un objeto que especifica el estilo de texto de la etiqueta de barra. Tiene el siguiente formato: {fontName: <string>, fontSize: <string>}
Consulta también Tipo: objeto
Valor predeterminado: nulo
|
| timeline.colorByRowLabel |
Si se configura como verdadero, se aplica el mismo color a todas las barras de la fila. La opción predeterminada es usar un color por etiqueta de barra. Tipo: booleano
Predeterminado: falso
|
| timeline.groupByRowLabel |
Si se configura como falso, crea una fila por cada entrada Tipo: booleano
Predeterminado: verdadero
|
| timeline.rowLabelStyle |
Un objeto que especifica el estilo de texto de la etiqueta de fila. Tiene el siguiente formato: {color: <string>, fontName: <string>, fontSize: <string>}
Tipo: objeto
Valor predeterminado: nulo
|
| timeline.showBarLabels |
Si se configura como falsa, se omiten las etiquetas de barra. La configuración predeterminada es mostrarlos. Tipo: booleano
Predeterminado: verdadero
|
| timeline.showRowLabels |
Si se configura como falsa, se omiten las etiquetas de fila. La configuración predeterminada es mostrarlos. Tipo: booleano
Predeterminado: verdadero
|
| timeline.singleColor |
Aplica los mismos colores a todas las barras. Se especifica como un valor hexadecimal (p.ej., “#8d8”). Tipo: string
Valor predeterminado: nulo
|
| tooltip.isHtml |
Configúralo en Nota: La personalización del contenido HTML de la información sobre la herramienta mediante el rol de datos de la columna de información no es compatible con la visualización del diagrama de burbujas. Tipo: booleano
Predeterminado: verdadero
|
| tooltip.trigger |
La interacción del usuario que hace que se muestre el cuadro de información:
Tipo: string
Predeterminado: "foco"
|
| width |
Es el ancho del gráfico (en píxeles). Tipo: Número
Predeterminado: Ancho del elemento contenedor
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
getSelection() |
Muestra un array de las entidades del gráfico seleccionadas.
Las entidades seleccionables son barras, entradas de leyenda y categorías.
Para este gráfico, solo se puede seleccionar una entidad en un momento determinado.
Tipo de datos que se muestra: Es el array de elementos de selección.
|
Eventos
| Nombre | |
|---|---|
error |
Se activa cuando se produce un error cuando se intenta renderizar 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 columna del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda de la tabla de datos, una leyenda en una columna (el índice de fila es nulo) y una categoría con una fila (el índice de la columna es nulo). Propiedades:fila, columna
|
onmouseout |
Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve los índices de filas y columnas del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda de la tabla de datos, una leyenda en una columna (el índice de fila es nulo) y una categoría con una fila (el índice de la columna es nulo). Propiedades:fila, columna
|
ready |
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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a Propiedades: ninguna
|
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.