Sequenze temporali

  1. Panoramica
  2. Esempio semplice
  3. Etichettatura delle barre
  4. Esempio avanzato
  5. Mettere le barre su una riga
  6. Modificare i caratteri
  7. Controllo dei colori
  8. Linee della griglia sovrapposte
  9. Personalizzazione delle descrizioni comando
  10. Caricamento in corso…
  11. Formato dei dati
  12. Opzioni di configurazione
  13. Metodi
  14. Eventi
  15. Norme sui dati

Panoramica

Una sequenza temporale è un grafico che mostra il modo in cui un insieme di risorse viene utilizzato nel tempo. Se gestisci un progetto software e vuoi illustrare chi sta facendo cosa e quando oppure se stai organizzando una conferenza e devi pianificare le sale riunioni, una sequenza temporale è spesso una scelta di visualizzazione ragionevole. Un tipo molto diffuso di sequenze temporali è il grafico di Gantt.

Nota: negli oggetti Data JavaScript, i mesi vengono indicizzati da zero e fino a undici, dove gennaio è il mese 0 e dicembre è il mese 11. Se la sequenza temporale sembra sfasata di un mese, è molto probabile che questo sia il motivo. Per maggiori informazioni, consulta la pagina Date e ore.

Esempio semplice

Supponiamo che tu voglia tracciare una trama del momento in cui i presidenti americani hanno scontato il loro mandato. Qui, le "risorse" sono i presidenti e possiamo tracciare il mandato di ciascun presidente come barra:

Se passi il mouse sopra una barra, viene visualizzata una descrizione comando con informazioni più dettagliate.

Dopo aver caricato il pacchetto timeline e definito un callback per disegnare il grafico quando viene visualizzata la pagina, il metodo drawChart() crea un'istanza di google.visualization.Timeline() e poi compila un dataTable con una riga per ogni presidente.

All'interno di dataTable, la prima colonna contiene il nome del presidente, mentre la seconda e la terza colonna indicano l'ora di inizio e l'ora di fine. Questi hanno il tipo JavaScript Date, ma potrebbero essere anche numeri normali.

Infine, richiamiamo il metodo draw() del grafico, che lo visualizza all'interno di un elemento div con lo stesso identificatore (timeline) utilizzato quando container è stato dichiarato nella prima riga di 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>

Le sequenze temporali dei grafici Google sono personalizzabili. Negli esempi che seguono ti mostreremo alcuni dei modi più comuni per personalizzare l'aspetto delle sequenze temporali.

Etichettatura delle barre

Oltre alle etichette di riga ("Washington", "Adams", "Jefferson" sopra) puoi etichettare singole barre. Qui cambiamo le etichette delle righe in semplici numeri e inseriamo il nome di ciascun presidente sulla sua barra.

In questo codice, abbiamo inserito una nuova colonna nei nostri dati in cui inserire le etichette delle barre: il nome completo di ciascun presidente. Se in una sequenza temporale dataTable sono presenti quattro colonne, la prima viene interpretata come etichetta di riga, la seconda come etichetta a barre e la terza e la quarta come inizio e fine.

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

Le nuove etichette di riga riportate sopra non sono molto informative, quindi rimuoviamole con l'opzione showRowLabels della sequenza temporale.

Per impostazione predefinita, showRowLabels è true. Se viene impostato su false, le etichette delle righe vengono rimosse:

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

Esempio avanzato

Per rendere le tempistiche più complesse, aggiungiamo vicepresidenti e segretari di stato al grafico. John Adams era vicepresidente prima di diventare presidente e Thomas Jefferson era segretario di stato, poi vicepresidente e infine presidente.

Nelle sequenze temporali, una risorsa avrà lo stesso colore anche quando è presente su più righe, per cui nel grafico seguente ogni persona è rappresentata con un colore coerente.

Alcuni segretari di stato sono stati serviti per tempi molto brevi, quindi questo grafico è un buon test per l'etichettatura. Quando un'etichetta è troppo grande per la barra, viene abbreviata o eliminata a seconda delle sue dimensioni. Gli utenti possono sempre passare il mouse sopra la barra per visualizzare informazioni della descrizione comando.

La sequenza temporale mostrerà le righe in ordine (presidente sopra il vicepresidente e sopra il segretario di stato), perché questo è l'ordine in cui appaiono nel codice seguente. Tuttavia, il layout delle barre è determinato esclusivamente dall'ora di inizio e di fine, quindi lo scambio di due segretari di stato o due presidenti nel dataTable non ha alcun effetto sul grafico.

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

Mettere le barre su una riga

A differenza dei papi, può esserci un solo presidente degli Stati Uniti alla volta, quindi se etichettiamo tutte le nostre righe come "Presidente", la sequenza temporale unirà le tre righe del nostro primo grafico in un'unica riga per una presentazione più pulita. Puoi controllare questo comportamento con l'opzione groupByRowLabel.

Ecco il comportamento predefinito:

Ora impostiamo groupByRowLabel su false e suddiviso la riga in tre:

Il codice per disattivare il raggruppamento:

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

Controllo dei colori

Per impostazione predefinita, Google Grafici sceglie colori ottimizzati per estetica e leggibilità (inclusi gli utenti con disabilità visive). Puoi personalizzare il comportamento predefinito con le opzioni colorByRowLabel, singleColor, backgroundColor e colors.

L'opzione colorByRowLabel colora allo stesso modo tutte le barre sulla stessa riga. Può essere una buona scelta in caso di spazi vuoti tra le barre.

Il valore predefinito di colorByRowLabel è false, quindi qui lo sostituiamo e lo impostiamo su 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>

Se vuoi che tutte le barre siano dello stesso colore, indipendentemente dalla riga in cui si trovano, utilizza l'opzione singleColor:

Nel codice seguente, singleColor è impostato su un valore esadecimale per colorare tutte le barre di verde chiaro:

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

Puoi controllare il colore di sfondo delle righe con l'opzione backgroundColor:

Il valore backgroundColor è specificato come valore esadecimale. Qui, lo accoppiamo con colorByRowLabel per mostrare le tracce in una conferenza:

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

Quindi, per impostare il colore di sfondo alternato o non alternato in base all'indice di riga, utilizza l'opzione alternatingRowStyle (v51+ attivo):

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

Se vuoi controllare i colori delle singole barre, utilizza l'opzione colors:

colors accetta un array di valori esadecimali, che vengono applicati alle barre in ordine:

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

Se il grafico richiede più colori rispetto a quelli elencati, il grafico si comporterà come se singleColor fosse impostato sul primo colore dell'elenco. Questo vale per tutti i grafici di Google, non solo per le tempistiche.

Un altro modo per controllare i colori delle singole barre è utilizzare una colonna con il ruolo Stile.

Il codice da aggiungere e compilare una colonna di stile:

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

Modificare i caratteri

Puoi scegliere il carattere tipografico e il carattere per le etichette di ogni riga con rowLabelStyle e per le etichette in ogni barra con barLabelStyle. Entrambe sono mostrate di seguito.

Nota: assicurati di scegliere i caratteri tipografici che il browser degli utenti sarà in grado di visualizzare.

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

Non puoi impostare il colore del testo barLabel.

Linee della griglia sovrapposte

I grafici di Google apportano piccole modifiche agli endpoint delle barre per evitare di nascondere le linee della griglia della sequenza temporale. Per evitare questo comportamento, imposta l'opzione avoidOverlappingGridLines su false.

Per spiegare l'effetto, ecco due esempi, il primo con una griglia sovrapposta e il secondo senza.

Ecco il codice che si sovrappone alle linee della griglia:

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

Personalizzazione delle descrizioni comando

Puoi personalizzare ciò che gli utenti visualizzano quando passano il mouse sopra le barre di una cronologia aggiungendo una colonna per la descrizione comando in una tabella dati a cinque colonne. Per fornire descrizioni comando non predefinite, ogni riga della tabella dati deve avere tutte e cinque le colonne (etichetta riga, etichetta a barre, descrizione comando, inizio e fine):

Se passi il mouse sopra una barra, viene visualizzata una descrizione comando con il testo definito nella terza colonna. In questo grafico, dobbiamo impostare la seconda colonna su valori fittizi (qui, null) in modo che le nostre descrizioni comando possano esistere nella terza colonna.

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

Caricamento in corso...

Il nome del pacchetto google.charts.load è timeline: 

  google.charts.load("current", {packages: ["timeline"]});

Il nome della classe della visualizzazione è google.visualization.Timeline: 

  var visualization = new google.visualization.Timeline(container);

Formato dei dati

Righe:ogni riga della tabella rappresenta una barra della cronologia.

Colonne:

  Colonna 0 Colonna 1 Colonna 2 Colonna 3 Colonna 4
Scopo: Etichetta riga Etichetta a barre (facoltativa) Descrizione comando (facoltativa) Inizia Termina
Tipo di dati: stringa stringa stringa numero o data numero o data
Ruolo: dati dati descrizione comando dati dati

 

Opzioni di configurazione

Nome
alternatingRowStyle

Indica se il colore di sfondo del grafico deve essere alternato in base all'indice delle righe (ad esempio, colore di sfondo delle righe indicizzate uniformemente più scuro). Se il valore è false, lo sfondo del grafico sarà di un colore uniforme. Se impostato su true, lo sfondo del grafico verrà alternato in base all'indice di riga. (Nota: attiva v51 e versioni successive)

Tipo: booleano
Predefinito:true
avoidOverlappingGridLines

Indica se gli elementi di visualizzazione (ad es. le barre in una sequenza temporale) devono oscurare le linee della griglia. Se il valore è false, le linee della griglia potrebbero essere coperte completamente dagli elementi di visualizzazione. Se true, gli elementi di visualizzazione possono essere modificati per mantenere visibili le linee della griglia.

Tipo: booleano
Predefinito:true
backgroundColor

Il colore di sfondo per l'area principale del grafico. Può essere una semplice stringa di colore HTML, ad esempio 'red' o '#00cc00', oppure un oggetto con le seguenti proprietà.

Tipo: stringa o oggetto
Predefinito: "bianco"
colori

I colori da utilizzare per gli elementi del grafico. Un array di stringhe, in cui ogni elemento è una stringa di colore HTML, ad esempio: colors:['red','#004411'].

Tipo: array di stringhe
Predefinito:colori predefiniti
enableInteractivity

Indica se il grafico genera eventi basati sugli utenti o reagisce all'interazione dell'utente. Se il valore è false, il grafico non genera eventi di tipo "select" o altri eventi basati sull'interazione (ma genera eventi pronti o di errore) e non mostra il testo del passaggio del mouse o altri eventi basati sull'input dell'utente.

Tipo: booleano
Predefinito:true
fontName

Il tipo di carattere predefinito per tutto il testo del grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico.

Tipo:stringa
Predefinito: 'Arial'
fontSize

La dimensione predefinita dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico.

Tipo:numero
Predefinito:automatico
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame.

Tipo: booleano
Predefinito:false
altezza

Altezza del grafico, in pixel.

Tipo:numero
Predefinita: altezza dell'elemento contenitore
timeline.barLabelStyle

Un oggetto che specifica lo stile di testo dell'etichetta a barre. Ha questo formato:

{fontName: <string>, fontSize: <string>}

Vedi anche fontName e fontSize in questa tabella.

Tipo:oggetto
Predefinito:null
timeline.colorByRowLabel

Se impostato su true, applica lo stesso colore a ogni barra della riga. L'impostazione predefinita prevede l'utilizzo di un colore per etichetta a barre.

Tipo: booleano
Predefinito:false
timeline.groupByRowLabel

Se impostato su false, crea una riga per ogni voce dataTable. Per impostazione predefinita, vengono raccolte le barre con la stessa etichetta di riga in una singola riga.

Tipo: booleano
Predefinito:true
timeline.rowLabelStyle

Un oggetto che specifica lo stile di testo dell'etichetta della riga. Ha questo formato:

{color: <string>, fontName: <string>, fontSize: <string>}

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize in questa tabella.

Tipo:oggetto
Predefinito:null
timeline.showBarLabels

Se impostato su false, le etichette delle barre vengono omesse. Per impostazione predefinita, vengono mostrati.

Tipo: booleano
Predefinito:true
timeline.showRowLabels

Se impostato su false, vengono omesse le etichette di riga. Per impostazione predefinita, vengono mostrati.

Tipo: booleano
Predefinito:true
timeline.singleColor

Applica lo stesso colore a tutte le barre. Viene specificato come valore esadecimale (ad es. "#8d8").

Tipo:stringa
Predefinito:null
tooltip.isHtml

Imposta su false per utilizzare le descrizioni comando sottoposte a rendering SVG (anziché tramite HTML). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando .

Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dei dati della colonna della descrizione comando non è supportata dalla visualizzazione Grafico a bolle.

Tipo: booleano
Predefinito:true
tooltip.trigger

L'interazione dell'utente che determina la visualizzazione della descrizione comando:

  • "focus" - La descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
  • "nessuno" - La descrizione comando non verrà visualizzata.
Tipo:stringa
Predefinito: "focus"
larghezza

Larghezza del grafico, in pixel.

Tipo:numero
Predefinita: larghezza dell'elemento contenitore

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento ready. Extended description.

Tipo di reso: nessuno
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno
getSelection()

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono barre, voci di legenda e categorie. Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

Tipo restituito: array di elementi di selezione

Eventi

Nome
error

Attivato quando si verifica un errore durante il tentativo di rendering del grafico.

Proprietà: id, messaggio
onmouseover

Attivato quando l'utente passa il mouse sopra un'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).

Proprietà:riga, colonna
onmouseout

Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).

Proprietà:riga, colonna
ready

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamarli solo dopo l'attivazione dell'evento.

Proprietà:nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama getSelection().

Proprietà:nessuna

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.