WEBDEV - diagrammes de Gantt

Introduction

Les diagrammes de Gantt ne sont pas des graphiques comme les autres : ils représentent des plannings structurés avec durées, jalons, avancements et dépendances. Leur affichage nécessite donc une bibliothèque spécifique. Webdev ne dispose pas nativement de composant Gantt équivalent à ceux disponibles sur le Web, d’où l’intérêt de recourir à une solution externe comme Google Charts.

Google Charts, et en particulier son composant Gantt, offre une alternative simple et gratuite. Entièrement disponible via une simple inclusion de script JavaScript, cette solution permet de construire des visualisations avancées sans coût de licence. Sa mise en œuvre est extrêmement simple : une page HTML, quelques lignes de JavaScript, et les données sont prêtes à être rendues dans le navigateur.

Dans ce POC (proof of concept), nous allons illustrer comment intégrer un diagramme de Gantt de Google Charts dans un site WEBDEV, en décrivant notamment le format de données attendu et les étapes d’interconnexion.

Format des données pour Google Charts Gantt

Le composant Gantt de Google Charts attend un tableau de données structuré au format DataTable. Chaque ligne du tableau correspond à une tâche à afficher. Le tableau comporte les colonnes suivantes :

Colonne	Type	Description
Task ID	string	Identifiant unique de la tâche
Task Name	string	Libellé affiché de la tâche
Start Date	date	Date de début
End Date	date	Date de fin
Duration	number	Durée en millisecondes (optionnel si Start et End sont fournis)
Percent Complete	number	Avancement en %
Dependencies	string	Liste d’ID de tâches dont dépend cette tâche

Exemple de définition JavaScript de ces données :

const 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([
  ['T1', 'Analyse', new Date(2025, 5, 1), new Date(2025, 5, 5), null, 100, null],
  ['T2', 'Développement', new Date(2025, 5, 6), new Date(2025, 5, 20), null, 50, 'T1'],
  ['T3', 'Tests', new Date(2025, 5, 21), new Date(2025, 5, 30), null, 0, 'T2']
]);

Ce format peut être facilement généré dynamiquement depuis un site WEBDEV et injecté dans un champ HTML.

Implémentation dans WEBDEV

Le repository du POC est disponible ici : https://github.com/LG-IsiNeva/POC-Webdev-Gantt

Implémentation des ressources externes

Dans la description de la page, onglet Détail, ajouter la ressource JavaScript suivante : https://www.gstatic.com/charts/loader.js

Intégration du champ HTML dans une page

Insérer un champ HTML dans la page Webdev. Via la description du champ, cliquer le bouton « Editer le code source HTML », et coller le code suivant :

<div id="chart_gantt"></div>

L’attribut id sert à donner un nom unique à un élément HTML pour pouvoir le reconnaître facilement. Il permet ensuite de le manipuler avec JavaScript ou de le styliser avec CSS.

La collection de procédure Javascript

La collection COL_Javascript, fournie dans le poc, permet de dessiner le champ Gantt, mais aussi de valider les données fournies le code Webdev

Alimentation du gantt depuis une procédure serveur

jsonDatas est un JSON

// appel de la fonction de remplissage des données
jsonDatas = AJAXExécute(jsonGenereDatas)

// on redessine le gantt avec les données
AfficherGantt(jsonDatas)

jsonDatas doit contenir une liste de tâches avec leur identifiant, nom, date de début, date de fin (ou durée), avancement, et dépendances. Ces données servent à construire les lignes du diagramme de Gantt avec Google Charts.

[
['Tâche_1', 'Faire un devis', 'Commercial', '2024-05-01', '2024-05-05', null, 50, null],
['Tâche_2', 'Mail du devis', 'Commercial', '2024-05-04', '2024-05-05', null, 0, 'Tâche_1']
]

Dans l’exemple ci-dessus, la Tâche_2 est « rattachée » à la Tâche_1

Conclusion

Ce POC illustre une approche simple pour connecter Webdev à une librairie javascript comme Google Charts, et ainsi enrichir un site web avec un diagramme de Gantt interactif.

Un autre atout est la possibilité de mettre à jour les données dynamiquement via des appels AJAX, ce qui permet d’adapter le Gantt à l’évolution du projet sans recharger l’interface. Cela ouvre la voie à des interactions fluides et à une meilleure synchronisation avec le backend métier.

IsiNeva

WEBDEV – diagrammes de Gantt