Diagrammes de Gantt

Présentation

Un diagramme de Gantt illustre la répartition d'un projet en tâches individuelles. Les graphiques Google Gantt illustrent le début, la fin et la durée des tâches d'un projet, ainsi que les dépendances éventuelles d'une tâche. Les graphiques de Gantt sont affichés dans le navigateur à l'aide de SVG. Comme tous les graphiques Google, les graphiques de Gantt affichent des info-bulles lorsque l'utilisateur passe la souris sur les données.

Remarque : Les diagrammes de Gantt ne fonctionnent pas dans les anciennes versions d'Internet Explorer. (IE8 et les versions antérieures ne sont pas compatibles avec le format SVG, ce qui est requis pour les 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 graphique de Gantt sans 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 même nature 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 devant être regroupées 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>

Calcul de la date de début, de fin et de la durée

Les diagrammes de Gantt acceptent trois valeurs concernant la durée de la tâche: une date de début, une date de fin et une durée (en millisecondes). Par exemple, s'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 les dates de début et de fin sont indiquées, la durée peut être calculée entre les deux.

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

Introduction Fin Durée Résultat
Présent Présent Présent Vérifiez que la durée correspond aux heures de début et de fin. Lance une erreur en cas d'incohérence.
Présent Présent Vide Calcule la durée à partir des heures de début et de fin.
Présent Vide Présent Calcule l'heure de fin.
Présent Vide Vide Lance une erreur indiquant qu'il est impossible de calculer la durée ou l'heure de fin.
Vide Présent Présent Calcule l'heure de début.
Vide Vide Présent Calcule l'heure de début en fonction des dépendances. Conjointement avec defaultStartDate, permet de dessiner le graphique en utilisant uniquement des durées.
Vide Présent Vide Lance une erreur, car il est impossible de calculer l'heure de début ou la durée.
Vide Vide Vide La fonction renvoie une erreur, car il est impossible 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 indiquant le trajet domicile-travail habituel 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 graphique 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 graphiques Google Gantt est rouge et peut être personnalisé à 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
            }
          }
        };

Flèches de style

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 à des pistes

Le style de la grille est géré par une combinaison de innerGridHorizLine, innerGridTrack et innerGridDarkTrack. Si vous ne définissez que l'élément innerGridTrack, le graphique calcule une couleur plus sombre pour l'élément innerGridDarkTrack. Toutefois, si vous ne définissez que l'élément 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) Introduction Fin Durée (en millisecondes) Pourcentage terminé Dépendances
Type de données: chaîne chaîne chaîne date date number (nombre) number (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.flèche objet nul Pour les diagrammes de Gantt, gantt.arrow contrôle les différentes propriétés des flèches qui relient les tâches.
gantt.flèche.angle number (nombre) 45 Angle de la tête de la flèche.
gantt.flèche.color chaîne "#000" Couleur des flèches.
longueur.gantt.arrow.length number (nombre) 8 Longueur de la tête de la flèche.
gantt.flèche.rayon number (nombre) 15 Rayon de définition de la courbe de flèche entre deux tâches.
gantt.arrow.spaceAprès number (nombre) 4 Nombre d'espaces blancs entre la tête d'une flèche et la tâche vers laquelle elle pointe.
gantt.arrow.width number (nombre) 1.4 Largeur des flèches.
gantt.barCornerRadius number (nombre) 2 Rayon de définition de la courbe des angles d'une barre.
hauteur.barHauteur number (nombre) nul Hauteur des barres des tâches.
gantt.criticalPathEnabled booléen true Si la valeur est true, les flèches du chemin critique sont stylisées différemment.
gantt.criticalPathStyle objet nul Objet contenant le style des flèches de tracé critiques.
gantt.criticalPathStyle.stroke chaîne nul Couleur des flèches de cheminement critiques.
gantt.criticalPathStyle.strokeWidth number (nombre) 1.4 L'épaisseur des flèches de tracé critiques
gantt.defaultStartDate date/numéro nul Si la date de début ne peut pas être calculée à partir des valeurs du tableau de données, la date de début sera définie sur cette valeur. Accepte une valeur date (new Date(YYYY, M, D)) ou un nombre, c'est-à-dire le nombre de millisecondes à utiliser.
gantt.innerGridHorizLine objet nul Définit le style des lignes de la grille horizontale intérieure.
gantt.intérieurGridHorizLine.stroke chaîne nul Couleur des lignes de la grille horizontale interne.
gantt.innerGridHorizLine.strokeWidth number (nombre) 1 Largeur des lignes intérieures de la grille horizontale.
gantt.innerGridTrack.fill chaîne nul Couleur de remplissage de la piste intérieure de la grille. Si aucun innerGridDarkTrack.fill n'est spécifié, cette valeur sera appliquée à chaque titre de la grille.
gantt.innerGridDarkTrack.fill chaîne nul Couleur de remplissage de la piste de grille intérieure alternative
gantt.labelMaxWidth number (nombre) 300 Espace maximal autorisé pour chaque libellé de tâche.
gantt.labelStyle objet nul

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

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled booléen true Remplit la barre des tâches en fonction du pourcentage de tâches terminées.
gantt.percentStyle.fill chaîne nul Couleur de la partie en pourcentage terminée d'une barre des tâches.
gantt.shadowEnabled booléen true Si la valeur est true, dessine une ombre sous chaque barre des tâches comportant des dépendances.
gantt.shadowColor chaîne "#000" Définit la couleur des ombres sous toute barre de tâches comportant des dépendances.
gantt.shadowOffset number (nombre) 1 Définit le décalage, en pixels, des ombres sous toute barre de tâches comportant des dépendances.
gantt.sortTasks booléen 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 number (nombre) nul Hauteur des pistes.
largeur number (nombre) La largeur de l'élément conteneur Largeur du graphique, en pixels.
hauteur number (nombre) hauteur de l'élément conteneur hauteur du graphique, en pixels.

Méthodes

Method Description
draw(data, options)

Dessine 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 de retour) : aucun
getSelection()

Affiche un tableau des entités de graphique sélectionnées. Vous pouvez sélectionner les barres, les entrées de légende et les catégories. Pour ce graphique, une seule entité peut être sélectionnée à un moment donné. Extended description.

Type de renvoi : tableau des éléments de sélection
setSelection()

Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente. Vous pouvez sélectionner les barres, les entrées de légende et les catégories. Pour ce graphique, une seule entité peut être sélectionnée à la fois. Extended description.

Return Type (Type de retour) : aucun
clearChart()

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

Return Type (Type de retour) : aucun

Événements

Événement Description
click

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

Properties (Propriétés) : targetID
error

Déclenché en cas d'erreur lors de la tentative d'affichage du graphique

Properties (Propriétés) : id, message
ready

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

Properties (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().

Properties (Propriétés) : aucune

Règles concernant les données

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