Diagrammes de Gantt

Présentation

Un diagramme de Gantt est un type de graphique qui illustre la répartition d'un projet en tâches composées. Les diagrammes de Gantt Google illustrent le début, la fin et la durée des tâches au sein d'un projet, ainsi que les dépendances qu'une tâche peut avoir. Les diagrammes de Gantt Google sont affichés dans le navigateur à l'aide du format SVG. Comme tous les graphiques Google, les diagrammes de Gantt affichent des info-bulles lorsque l'utilisateur pointe sur les données.

Remarque:Les diagrammes de Gantt ne fonctionnent pas dans les anciennes versions d'Internet Explorer. (Internet Explorer 8 et ses versions antérieures ne sont pas compatibles avec le format SVG, qui est nécessaire aux diagrammes de Gantt.)

Exemple simple

 
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Aucune dépendance

Pour créer un diagramme de Gantt qui ne comporte aucune dépendance, assurez-vous que la dernière valeur de chaque ligne de votre table de données est définie sur null. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Regrouper des ressources

Les tâches de nature similaire peuvent être regroupées à l'aide de ressources. Ajoutez une colonne de type string à vos données (après les colonnes Task ID et Task Name), et assurez-vous que toutes les tâches à regrouper dans une ressource ont le même ID de ressource. Les ressources seront regroupées par couleur. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Début/Fin/Durée du calcul

Les diagrammes de Gantt acceptent trois valeurs relatives à la durée de la tâche: une date de début, une date de fin et une durée (en millisecondes). Si, par exemple, il n'y a pas de date de début, le graphique peut calculer l'heure manquante en fonction de la date de fin et de la durée. Il en va de même pour le calcul de la date de fin. Si une date de début et une date de fin sont toutes les deux indiquées, la durée peut être calculée entre les deux.

Consultez le tableau ci-dessous pour découvrir comment Gantt gère la présence de début, de fin et de durée dans différentes circonstances.

Démarrer Fin Durée Résultat
Présenter Présenter Présenter Vérifiez que la durée correspond aux heures de début et de fin. Génère une erreur en cas d'incohérence.
Présenter Présenter Vide Calcule la durée à partir des heures de début et de fin.
Présenter Vide Présenter Calcule l'heure de fin.
Présenter Vide Vide La fonction renvoie une erreur indiquant qu'il est impossible de calculer la durée ou l'heure de fin.
Vide Présenter Présenter Calcule l'heure de début.
Vide Vide Présenter Calcule l'heure de début en fonction des dépendances. Utilisé conjointement avec defaultStartDate, ce champ permet de tracer le graphique uniquement en fonction de durées.
Vide Présenter Vide Génère une erreur indiquant que le calcul de l'heure de début ou de la durée est impossible.
Vide Vide Vide Génère une erreur indiquant l'impossibilité de calculer l'heure de début, l'heure de fin ou la durée.

En gardant à l'esprit ce qui précède, vous pouvez créer un graphique illustrant un trajet domicile-travail type en utilisant uniquement la durée de chaque tâche. 

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

      function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

      function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

        otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

        var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

        var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

        chart.draw(otherData, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Chemin critique

Dans un diagramme de Gantt, le chemin critique est le ou les chemins qui affectent directement la date de fin. Par défaut, le chemin critique dans les diagrammes de Gantt est rouge. Vous pouvez le personnaliser à l'aide des options criticalPathStyle. Vous pouvez également désactiver le chemin critique en définissant criticalPathEnabled sur false. 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

Appliquer un style aux flèches

Vous pouvez styliser les flèches de dépendance entre les tâches à l'aide des options gantt.arrow: 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

Appliquer un style aux pistes

Le style en grille est géré par une combinaison de innerGridHorizLine, innerGridTrack et innerGridDarkTrack. Si vous définissez uniquement innerGridTrack, le graphique calculera une couleur plus sombre pour innerGridDarkTrack, mais si vous ne définissez que innerGridDarkTrack, innerGridTrack utilisera sa couleur par défaut et ne calculera pas une couleur plus claire. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

Chargement...

Le nom du package google.charts.load est "gantt". 

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

Le nom de classe de la visualisation est google.visualization.Gantt.

  var chart = new google.visualization.Gantt(container);

Format des données

Lignes:chaque ligne du tableau représente une tâche.

Columns:

  Colonne 0 Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7
Objectif : ID de tâche Nom de la tâche ID de ressource (facultatif) Démarrer Terminer Durée (en millisecondes) Pourcentage terminé Dépendances
Type de données : chaîne chaîne chaîne date date Nombre Nombre chaîne
Rôle : domaine Données Données Données Données Données Données Données

 

Options de configuration

Nom Type Par défaut Description
backgroundColor.fill chaîne 'blanc' Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML.
gantt.arrow objet nul Pour les diagrammes de Gantt, gantt.arrow contrôle les différentes propriétés des flèches reliant les tâches.
gantt.arrow.angle Nombre 45 Angle de la pointe de la flèche.
gantt.arrow.color chaîne "#000" Couleur des flèches.
gantt.arrow.length Nombre 8 Longueur de la pointe de la flèche.
gantt.arrow.radius Nombre 15 Rayon de définition de la courbe de la flèche entre deux tâches.
gantt.arrow.spaceAfter Nombre 4 La quantité d'espace blanc entre l'extrémité d'une flèche et la tâche vers laquelle elle pointe.
gantt.arrow.width Nombre 1,4 Largeur des flèches.
gantt.barCornerRadius Nombre 2 Rayon de définition de la courbe des angles d'une barre.
gantt.barHeight Nombre nul Hauteur des barres pour les tâches.
gantt.criticalPathEnabled boolean true Si la valeur est true, le style des flèches du tracé critique sera différent.
gantt.criticalPathStyle objet nul Objet contenant le style des flèches représentant un chemin critique.
gantt.criticalPathStyle.stroke chaîne nul Couleur des flèches du chemin critique
gantt.criticalPathStyle.strokeWidth Nombre 1,4 Épaisseur des flèches de chemin critique.
gantt.defaultStartDate date/numéro nul Si la date de début ne peut pas être calculée à partir des valeurs de la table de données, elle est définie sur cette valeur. Accepte une valeur date (new Date(YYYY, M, D)) ou un nombre, qui correspond au nombre de millisecondes à utiliser.
gantt.innerGridHorizLine objet nul Définit le style des lignes horizontales intérieures de la grille.
gantt.innerGridHorizLine.stroke chaîne nul Couleur des lignes horizontales de la grille intérieure.
gantt.innerGridHorizLine.strokeWidth Nombre 1 Largeur des lignes horizontales intérieures de la grille.
gantt.innerGridTrack.fill chaîne nul Couleur de remplissage de la piste sous la grille intérieure. Si aucune valeur innerGridDarkTrack.fill n'est spécifiée, elle sera appliquée à chaque piste de la grille.
gantt.innerGridDarkTrack.fill chaîne nul Couleur de remplissage de la piste alternative sombre de la grille interne.
gantt.labelMaxWidth Nombre 300 Espace maximal autorisé pour chaque étiquette de tâche.
gantt.labelStyle objet nul

Objet contenant les styles des libellés de tâches.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean true Occupe la barre des tâches en fonction du pourcentage d'achèvement de la tâche.
gantt.percentStyle.fill chaîne nul La couleur de la partie du pourcentage de réalisation d'une barre des tâches.
gantt.shadowEnabled boolean true Si la valeur est true, une ombre s'affiche sous chaque barre des tâches comportant des dépendances.
gantt.shadowColor chaîne "#000" Définit la couleur des ombres sous toute barre des tâches ayant des dépendances.
gantt.shadowOffset Nombre 1 Définit le décalage, en pixels, des ombres sous toute barre des tâches ayant des dépendances.
gantt.sortTasks boolean true Spécifie que les tâches doivent être triées de façon topologique, si la valeur est "true". Sinon, utilisez le même ordre que les lignes correspondantes de la table de données.
gantt.trackHeight Nombre nul Hauteur des pistes.
largeur Nombre La largeur de l'élément conteneur Largeur du graphique, en pixels.
taille Nombre hauteur de l'élément conteneur hauteur du graphique, en pixels.

Méthodes

Method Description
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
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
setSelection()

Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente. 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 .

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

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

Return Type (Type renvoyé) : aucun

Événements

Événement Description
click

Déclenché lorsque l'utilisateur clique dans le graphique. Permet de déterminer quand un utilisateur clique sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés.

Propriétés:targetID
error

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

Propriétés:id, message
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.