Calendrier

  1. Overview
  2. Exemple simple
  3. Ajouter un libellé aux barres
  4. Exemple avancé
  5. Placer des barres sur une ligne
  6. Modifier les polices
  7. Contrôler les couleurs
  8. Chevauchement de lignes de quadrillage
  9. Personnaliser les info-bulles
  10. Loading
  11. Format des données
  12. Options de configuration
  13. Méthodes
  14. Événements
  15. Règles concernant les données

Présentation

Une chronologie est un graphique qui illustre comment un ensemble de ressources est utilisé au fil du temps. Si vous gérez un projet logiciel et que vous souhaitez illustrer qui fait quoi et quand, ou si vous organisez une conférence et que vous avez besoin de réserver des salles de réunion, une chronologie est souvent un choix judicieux en termes de visualisation. Le diagramme de Gantt est un type de chronologie populaire.

Remarque:Dans les objets Date JavaScript, les mois sont indexés à partir de zéro et progressent jusqu'à onze, sachant que janvier correspond au mois 0 et décembre au mois 11. Si votre chronologie vous semble décalée d'un mois, c'est probablement pour cette raison. Pour en savoir plus, consultez la page Dates et heures.

Exemple simple

Disons que vous voulez tracer la date à laquelle les présidents américains ont soumis leurs mandats. Ici, les "ressources" correspondent aux présidents, et nous pouvons représenter le mandat de chaque président sous forme de barre:

Lorsque vous passez la souris sur une barre, une info-bulle contenant des informations plus détaillées s'affiche.

Après avoir chargé le package timeline et défini un rappel pour dessiner le graphique lors du rendu de la page, la méthode drawChart() instancie un google.visualization.Timeline(), puis remplit un dataTable avec une ligne pour chaque président.

Dans dataTable, la première colonne correspond au nom du président, et les deuxième et troisième colonnes contiennent les heures de début et de fin. Il s'agit du type JavaScript Date, mais il peut également s'agir de nombres bruts.

Enfin, nous appelons la méthode draw() du graphique, qui l'affiche dans un élément div avec le même identifiant (timeline) que celui utilisé lorsque container a été déclaré sur la première ligne 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>

Les chronologies de Google Charts sont personnalisables. Dans les exemples suivants, nous allons vous montrer quelques méthodes courantes pour personnaliser l'apparence de vos chronologies.

Ajouter un libellé aux barres

En plus des libellés de ligne ("Washington", "Adams", "Jefferson" ci-dessus), vous pouvez ajouter des libellés à des barres individuelles. Ici, nous changeons les libellés de ligne en nombres simples et plaçons le nom de chaque président sur sa barre.

Dans ce code, nous avons inséré une nouvelle colonne dans nos données pour contenir les libellés des barres: le nom complet de chaque président. Lorsqu'il y a quatre colonnes dans une dataTable de chronologie, la première est interprétée comme le libellé de la ligne, la deuxième comme le libellé de la barre, et la troisième et la quatrième comme le début et la fin.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

Les nouveaux libellés de ligne ci-dessus ne sont pas très informatifs. Nous allons donc les supprimer avec l'option de chronologie showRowLabels.

Par défaut, showRowLabels est défini sur true. Le fait de définir cette valeur sur false a pour effet de supprimer les libellés de ligne:

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

Exemple avancé

Pour rendre notre chronologie plus complexe, ajoutons des vice-présidents et des secrétaires d'État à notre graphique. John Adams a été vice-président avant de devenir président, et Thomas Jefferson était secrétaire d'État, puis vice-président et enfin président.

Dans les chronologies, une ressource a la même couleur même lorsqu'elle apparaît sur plusieurs lignes. Dans le graphique suivant, chaque personne est donc représentée avec une couleur cohérente.

Certains secrétaires d'état diffusés pendant de très courtes périodes, ce graphique constitue donc un bon test d'étiquetage. Lorsqu'un libellé est trop grand pour la barre, il est abrégé ou supprimé, en fonction de la taille de la barre. Les utilisateurs peuvent toujours pointer sur la barre pour obtenir des informations sous forme d'info-bulle.

La chronologie disposera les lignes dans l'ordre (président au-dessus du vice-président et secrétaire d'État), car c'est l'ordre dans lequel elles apparaissent dans le code ci-dessous. Cependant, la disposition des barres est déterminée uniquement par les heures de début et de fin. Par conséquent, le remplacement de deux secrétaires d'État ou de deux présidents dans le dataTable n'a aucun effet sur le graphique.

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

Placer des barres sur une ligne

Contrairement aux papes, il ne peut y avoir qu'un seul président américain à la fois. Par conséquent, si nous ajoutons le libellé "President" à toutes nos lignes, la chronologie combinera les trois lignes de notre premier graphique en une seule ligne pour une présentation plus claire. Vous pouvez contrôler ce comportement à l'aide de l'option groupByRowLabel.

Voici le comportement par défaut:

Définissons maintenant groupByRowLabel sur false et divisons la ligne en trois:

Le code pour désactiver le regroupement:

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

Contrôler les couleurs

Par défaut, Google Charts choisit des couleurs optimisées pour l'esthétique et la lisibilité (y compris pour les utilisateurs souffrant de déficiences visuelles). Vous pouvez adapter le comportement par défaut à l'aide des options colorByRowLabel, singleColor, backgroundColor et colors.

L'option colorByRowLabel colore toutes les barres de la même ligne de la même manière. Cela peut être un bon choix en cas d'écarts entre vos barres.

colorByRowLabel est défini par défaut sur false. Ici, nous le remplaçons et le définissons sur 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 vous souhaitez que toutes les barres soient de la même couleur, quelle que soit la ligne sur laquelle elles se trouvent, utilisez l'option singleColor:

Dans le code ci-dessous, singleColor est défini sur une valeur hexadécimale pour colorer toutes les barres en vert clair:

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

Vous pouvez contrôler la couleur d'arrière-plan des lignes à l'aide de l'option backgroundColor:

backgroundColor est spécifié sous forme de valeur hexadécimale. Ici, nous l'associons à colorByRowLabel pour afficher les titres dans une conférence:

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

Ensuite, pour définir la couleur d'arrière-plan sur alternée ou non alternée par index de ligne, utilisez l'option alternatingRowStyle (actives 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 vous souhaitez contrôler les couleurs de barres individuelles, utilisez l'option colors:

colors prend un tableau de valeurs hexadécimales, qui sont appliquées aux barres dans l'ordre:

<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 votre graphique nécessite plus de couleurs que celles indiquées, il se comportera comme si singleColor était défini sur la première couleur de la liste. (Cela s'applique à tous les graphiques Google, pas seulement aux chronologies.)

Une autre façon de contrôler les couleurs des barres individuelles consiste à utiliser une colonne avec le rôle de style.

Le code à ajouter et à renseigner dans une colonne de style:

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

Modifier les polices

Vous pouvez choisir le type et la police pour les libellés de chaque ligne avec rowLabelStyle, et pour les libellés de chaque barre avec barLabelStyle. Ces deux exemples sont présentés ci-dessous.

Remarque: Veillez à choisir des polices de caractères que les navigateurs de vos utilisateurs pourront afficher.

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

Vous ne pouvez pas définir la couleur du texte barLabel.

Chevauchement de lignes de quadrillage

Google Charts effectue de légers ajustements au niveau des extrémités des barres pour éviter d'obscurcir le quadrillage de la timeline. Pour éviter ce comportement, définissez l'option avoidOverlappingGridLines sur false.

Pour illustrer cet effet, voici deux exemples : le premier avec un quadrillage superposé et le second sans.

Voici le code qui chevauche le quadrillage:

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

Personnaliser les info-bulles

Vous pouvez personnaliser ce que voient les utilisateurs lorsqu'ils pointent sur les barres d'une chronologie en ajoutant une colonne d'info-bulle dans un tableau de données à cinq colonnes. Pour fournir des info-bulles autres que celles par défaut, chaque ligne de votre table de données doit comporter les cinq colonnes (libellé de ligne, libellé de barre, info-bulle, début et fin):

En passant la souris sur une barre, vous affichez une info-bulle contenant le texte défini dans la troisième colonne. Dans ce graphique, nous devons définir la deuxième colonne sur des valeurs factices (ici, null) afin que nos info-bulles puissent exister dans la troisième colonne.

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

Chargement...

Le nom du package google.charts.load est timeline: 

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

Le nom de classe de la visualisation est google.visualization.Timeline: 

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

Format des données

Lignes:chaque ligne du tableau représente une barre de chronologie.

Columns:

  Colonne 0 Colonne 1 Colonne 2 Colonne 3 Colonne 4
Objectif : Libellé de la ligne Libellé de la barre (facultatif) Info-bulle (facultatif) Démarrer Terminer
Type de données : chaîne chaîne chaîne nombre ou date nombre ou date
Rôle : Données Données info-bulle Données Données

 

Options de configuration

Nom
alternatingRowStyle

Indique si le graphique doit alterner la couleur d'arrière-plan en fonction de l'index de ligne (par exemple, colorer la couleur d'arrière-plan des lignes indexées paires avec une teinte plus foncée). Si la valeur est "false", l'arrière-plan du graphique est uniforme. Si la valeur est "true", l'arrière-plan du graphique alternera la teinte en fonction de l'index de ligne. (Remarque: version 51 ou ultérieure active)

Type:booléen
Valeur par défaut : "true"
avoidOverlappingGridLines

Permet de spécifier si les éléments d'affichage (par exemple, les barres d'une timeline) doivent masquer les lignes de la grille. Si la valeur est "false", les lignes de la grille peuvent être entièrement recouvertes par les éléments d'affichage. Si la valeur est "true", les éléments d'affichage peuvent être modifiés pour que les lignes de la grille restent visibles.

Type:booléen
Valeur par défaut : "true"
backgroundColor

Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une simple chaîne de couleur HTML, par exemple 'red' ou '#00cc00', ou d'un objet avec les propriétés suivantes.

Type:chaîne ou objet
Par défaut : "white" (blanc).
colors

Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: colors:['red','#004411'].

Type:tableau de chaînes
Par défaut:couleurs par défaut
enableInteractivity

Indique si le graphique génère des événements basés sur l'utilisateur ou réagit à une interaction utilisateur. Si la valeur est définie sur "false", le graphique ne génère pas d'événements de type "select" ou d'autres événements basés sur une interaction (mais génère des événements "prêts" ou d'erreur), et n'affiche pas le texte de l'info-bulle ni ne change en fonction de l'entrée utilisateur.

Type:booléen
Valeur par défaut : "true"
fontName

Type de police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique.

Type:chaîne
Par défaut : "Arial"
fontSize

Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique.

Type:nombre
Par défaut:automatique
forceIFrame

Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames.

Type:booléen
Par défaut : "false"
taille

Hauteur du graphique, en pixels.

Type:nombre
Par défaut:hauteur de l'élément parent
timeline.barLabelStyle

Objet qui spécifie le style de texte du libellé de la barre. Son format est le suivant :

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

Consultez également fontName et fontSize dans ce tableau.

Type:objet
Par défaut:null
timeline.colorByRowLabel

Si elle est définie sur "true", toutes les barres de la ligne sont colorées de la même manière. Par défaut, une couleur par libellé de barre est utilisée.

Type:booléen
Par défaut : "false"
timeline.groupByRowLabel

Si la valeur est "false", crée une ligne pour chaque entrée dataTable. Par défaut, les barres ayant le même libellé de ligne sont regroupées sur une ligne.

Type:booléen
Valeur par défaut : "true"
timeline.rowLabelStyle

Objet spécifiant le style de texte du libellé de ligne. Son format est le suivant :

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

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Consultez également fontName et fontSize dans ce tableau.

Type:objet
Par défaut:null
timeline.showBarLabels

S'il est défini sur "false", il omet les libellés de barre. Par défaut, elles sont affichées.

Type:booléen
Valeur par défaut : "true"
timeline.showRowLabels

S'il est défini sur "false", il omet les libellés de ligne. Par défaut, elles sont affichées.

Type:booléen
Valeur par défaut : "true"
timeline.singleColor

Toutes les barres sont de la même couleur. Spécifiée en tant que valeur hexadécimale (par exemple, "#8d8").

Type:chaîne
Par défaut:null
tooltip.isHtml

Définissez la valeur sur false pour utiliser les info-bulles affichées au format SVG (plutôt que celles affichées en HTML). Pour en savoir plus, consultez Personnaliser le contenu des info-bulles .

Remarque:La personnalisation du contenu de l'info-bulle HTML via le rôle de données des colonnes d'info-bulles n'est pas disponible pour la visualisation Graphique à bulles.

Type:booléen
Valeur par défaut : "true"
tooltip.trigger

Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:

  • "sélectionner" : l'info-bulle s'affiche lorsque l'utilisateur pointe sur l'élément.
  • "none" : l'info-bulle ne s'affiche pas.
Type:chaîne
Par défaut : "focus"
largeur

Largeur du graphique, en pixels.

Type:nombre
Par défaut:largeur de l'élément parent

Méthodes

Méthode
draw(data, options)

Permet de dessiner le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement ready. Extended description.

Return Type (Type renvoyé) : aucun
clearChart()

Efface le graphique et libère toutes les ressources allouées.

Return Type (Type renvoyé) : aucun
getSelection()

Renvoie un tableau des entités de graphique sélectionnées. Les entités sélectionnables sont les barres, les entrées de légende et les catégories. Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

Type renvoyé:tableau d'éléments de sélection

Événements

Nom
error

Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique.

Propriétés:id, message
onmouseover

Déclenché lorsque l'utilisateur pointe sur une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une barre correspond à une cellule de la table de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul).

Propriétés:ligne, colonne
onmouseout

Déclenché lorsque l'utilisateur éloigne le curseur de la souris d'une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une barre correspond à une cellule de la table de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul).

Propriétés:ligne, colonne
ready

Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode draw, puis ne les appeler qu'après le déclenchement de l'événement.

Propriétés:aucune
select

Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez getSelection().

Propriétés:aucune

Règles concernant les données

L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.