Orden cronológico

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: 'red' o '#00cc00', o un objeto con las siguientes propiedades.

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: colors:['red','#004411'].

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 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 fontName y fontSize en esta tabla.

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 dataTable. La opción predeterminada es recopilar barras con la misma etiqueta de fila en una fila.

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>}

color puede ser cualquier string de color HTML, por ejemplo 'red' o '#00cc00'. Consulta fontName y fontSize en esta tabla.

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 false para usar la información sobre la herramienta procesada con SVG (en lugar de HTML). Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles.

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:

  • "focus": la información sobre la herramienta se mostrará cuando el usuario se desplace sobre el elemento.
  • "none": no se mostrará 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 ready. Extended description

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. Extended description.

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 draw y llamarlo solo después de que se active el evento.

Propiedades: ninguna
select

Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a getSelection().

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.