Sequenze temporali

  1. Panoramica
  2. Un semplice esempio
  3. Etichettare le barre
  4. Un esempio avanzato
  5. Aggiungere barre su una riga
  6. Modificare i caratteri
  7. Controllo dei colori
  8. Righe della griglia sovrapposte
  9. Personalizzare le 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 come viene utilizzato un insieme di risorse nel tempo. Se stai gestendo un progetto software e vuoi spiegare chi fa cosa e quando, oppure se organizzi una conferenza e hai bisogno di pianificare sale riunioni, una sequenza temporale è spesso una scelta di visualizzazione ragionevole. Un tipo di sequenza temporale popolare è il grafico di Gantt.

Nota: negli oggetti Data JavaScript, i mesi vengono indicizzati a partire da zero e aumentano fino a undici, mentre gennaio è il mese 0 e il mese 11 dicembre. Se la tua cronologia non sembra essere completa 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 annunciare quando i presidenti americani hanno servito i loro termini. Qui, le "risorse" sono i presidenti e possiamo rappresentare il termine di ogni presidente come un bar:

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

Dopo aver caricato il pacchetto timeline e definito un callback per disegnare il grafico quando la pagina viene visualizzata, il metodo drawChart() crea un'istanza google.visualization.Timeline() e quindi riempie 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 gli orari di inizio e di fine. Questi sono del tipo JavaScript Date, ma potrebbero anche essere numeri normali.

Infine, chiamiamo il metodo draw() del grafico, che lo visualizza in div con lo stesso identificatore (timeline) utilizzato quando è stato dichiarato container 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 di Google registrare sono personalizzabili e nei seguenti esempi ti mostreremo alcuni modi comuni per personalizzare l'aspetto delle sequenze temporali.

Etichettatura delle barre

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

In questo codice abbiamo inserito una nuova colonna nei dati per contenere le etichette della barra: il nome completo di ogni presidente. Se ci sono quattro colonne nella sequenza temporale dataTable, la prima viene interpretata come l'etichetta della riga, la seconda come l'etichetta della barra 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 nostre nuove etichette riga sopra non sono molto informative, quindi rimuovile con l'opzione della sequenza temporale showRowLabels.

Per impostazione predefinita, showRowLabels è true. Se imposti false, le etichette di riga 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 più complessa la nostra sequenza temporale, aggiungiamo al vicepresidente e ai segretari di stato. John Adams è stato vicepresidente prima di diventare presidente, e Thomas Jefferson è stato segretario di stato, poi vicepresidente e infine presidente.

Nelle sequenze temporali, una risorsa avrà lo stesso colore anche se appare su più righe, quindi nel grafico seguente ogni persona è rappresentata con un colore coerente.

Alcuni segretari di stato hanno prestato servizio per brevi periodi, quindi questo grafico è una buona prova dell'etichettatura. Un'etichetta troppo grande per la barra viene abbreviata o eliminata a seconda delle dimensioni della barra. Gli utenti possono passare il mouse sopra la barra per ottenere informazioni sul suggerimento.

La sequenza temporale definirà le righe in ordine, presidente in cima al vicepresidente in cima alla segreteria 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, pertanto lo scambio di due segretari di stato o di 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>

Inserire le barre in una riga

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

Ecco il comportamento predefinito:

Ora impostiamo groupByRowLabel su false e dividiamo 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>

Controllare i colori

Per impostazione predefinita, Google Tables sceglie i 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 tutte le barre sulla stessa riga. Questa opzione può essere utile quando sono presenti intervalli vuoti tra le barre.

Il valore predefinito di colorByRowLabel è false, perciò sostituiamo questo valore 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 colore 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:

backgroundColor è specificato come valore esadecimale. Ne accoppiamo qui 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 su alternato o non alternato in base all'indice della riga, utilizza l'opzione alternatingRowStyle (attiva 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>

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 tuo grafico richiede più colori rispetto a quelli elencati, l'opzione singleColor sarà impostata 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 consiste nell'utilizzare una colonna con il ruolo di stile.

Il codice da aggiungere e completare 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 tipo di carattere e il carattere per le etichette di ogni riga con rowLabelStyle e per le etichette in ogni barra con barLabelStyle. Di seguito sono riportate entrambe le funzionalità.

Nota: assicurati di scegliere caratteri tipografici che i browser degli utenti saranno 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 di barLabel.

Righe della griglia sovrapposte

Google grafici apporta piccoli aggiustamenti agli endpoint a barre per evitare di oscurare le linee della griglia della sequenza temporale. Per evitare questo comportamento, imposta l'opzione avoidOverlappingGridLines su false.

Per illustrare l'effetto, ecco due esempi, il primo con una griglia a sovrapposizione 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>

Personalizzare le descrizioni comando

Puoi personalizzare i dati visualizzati dagli utenti quando passano il mouse sopra le barre di una sequenza temporale aggiungendo una colonna della descrizione comando a una tabella di dati di cinque colonne. Per fornire descrizioni comando non predefinite, ogni riga della tua tabella di dati deve avere tutte e cinque le colonne (etichetta riga, etichetta barra, 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

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 sequenza temporale.

Colonne:

  Colonna 0 Colonna 1 Colonna 2 Colonna 3 Colonna 4
Finalità: Etichetta riga Etichetta a barre (facoltativa) Descrizione comando (facoltativa) Inizia Fine
Tipo di dati: string string string numero o data numero o data
Ruolo: dati dati descrizione comando dati dati

 

Opzioni di configurazione

Nome
stile rigaalternata

Consente di stabilire se il colore di sfondo del grafico deve essere alternato in base all'indice della riga (ad esempio, se il colore di sfondo delle righe indicizzate è uniforme e di colore più scuro). Se il valore è false, lo sfondo del grafico sarà un colore uniforme. Se true, lo sfondo del grafico alterna la tinta in base all'indice della riga. (Nota: versione 51+ attiva)

Tipo: booleano
Predefinito: true
evitaOverlayGridLines

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 possono essere coperte completamente dagli elementi di visualizzazione. Se true, gli elementi di visualizzazione potrebbero essere modificati per mantenere visibili le linee della griglia.

Tipo: booleano
Predefinito: true
coloredisfondo

Il colore dello sfondo dell'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, dove ogni elemento è una stringa di colore HTML, ad esempio colors:['red','#004411'].

Tipo: matrice di stringhe
Predefinito: colori predefiniti
EnableInteractivity

Indica se il grafico genera eventi basati sugli utenti o reagisce alle interazioni degli utenti. Se il valore è false, il grafico non mostrerà "seleziona" o altri eventi basati sulle interazioni (ma verrà generato eventi di errore o pronti) e non mostrerà il testo al passaggio del mouse o non cambierà in base all'input dell'utente.

Tipo: booleano
Predefinito: true
Nome carattere

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

Tipo: stringa
Predefinito: "iframe"
Dimensione carattere

Le dimensioni predefinite dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override utilizzando le proprietà per specifici elementi del grafico.

Tipo: numero
Predefinito: automatica
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che su IE8, questa opzione viene ignorata, mentre tutti i grafici IE8 vengono disegnati negli i-frame.

Tipo: booleano
Predefinito: falso
height

Altezza del grafico in pixel.

Tipo: numero
Predefinito: altezza dell'elemento contenitore
timestamp.barLabelStyle

Un oggetto che specifica lo stile di testo dell'etichetta della barra. Il formato è il seguente:

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

Vedi anche fontName e fontSize in questa tabella.

Tipo: oggetto
Predefinito: null
timestamp.colorByRowLabel

Se è impostato su true, i colori di ogni barra della riga vengono uguali. L'impostazione predefinita prevede l'utilizzo di un colore per etichetta della barra.

Tipo: booleano
Predefinito: falso
timestamp.groupByRowLabel

Se è impostato su false, viene creata una riga per ogni voce di dataTable. L'impostazione predefinita prevede la raccolta di barre con la stessa etichetta di riga in una riga.

Tipo: booleano
Predefinito: true
cronologia.Riga etichetta stile

Un oggetto che specifica lo stile di testo dell'etichetta di riga. Il formato è il seguente:

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

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

Tipo: oggetto
Predefinito: null
timestamp.showBarLabel

Se impostato su false, le etichette a barre vengono omesse. L'impostazione predefinita prevede la loro visualizzazione.

Tipo: booleano
Predefinito: true
timestamp.showRowLabel

Se impostato su false, le etichette di riga vengono omesse. L'impostazione predefinita prevede la loro visualizzazione.

Tipo: booleano
Predefinito: true
cronologia.ColoreColore

Colora tutte le barre nello stesso modo. Specificato come valore esadecimale (ad es. "#8d8").

Tipo: stringa
Predefinito: null
descrizione comando.isHTML

Imposta questo criterio su false per usare le descrizioni comando visualizzate con SVG (anziché l'HTML). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando .

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

Tipo: booleano
Predefinito: true
descrizione comando.trigger

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

  • " stato attivo": la descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
  • "none": la descrizione comando non viene visualizzata.
Tipo: stringa
Predefinito: "concentrazione"
width

La larghezza del grafico in pixel.

Tipo: numero
Predefinito: larghezza dell'elemento che la contiene

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate ai metodi solo dopo l'attivazione dell'evento ready. Extended description.

Tipo di reso: nessuno
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno
getSelection()

Restituisce una matrice delle entità del grafico selezionate. Le entità selezionabili sono barre, legende e categorie. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description.

Tipo di reso: 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. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. Una barra è correlata a una cella della tabella dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null).

Proprietà: riga, colonna
onmouseout

Attivato quando l'utente allontana il puntatore del mouse da un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. Una barra è correlata a una cella della tabella dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null).

Proprietà: riga, colonna
ready

Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo draw e di chiamarlo solo dopo che è stato attivato l'evento.

Proprietà: nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero getSelection().

Proprietà: nessuna

Norme sui dati

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