débuter avec RGRAPH
Graphes en HTML5 avec CANVAS
Avec l'élément CANVAS on découvre une nouvelle manière de générer des graphiques coté client.
Mais pour générer des graphes complexes, il faut pas mal de code JavaScript.
La librairie RGRAPH simplifie considérablement ces développements en fournissant une librairie très complète.
RGRAPH est une alternative sérieuse:
- en remplacement de JPGRAPH pour la génération de graphes. Avec JPGRAPH les graphiques sont générés coté serveur;
- la librairie php gd qui gère la gestion graphique coté serveur;
Restriction
RGRAPH n'est exploitable que au travers de l'élément CANVAS qui
est un nouvel élément HTML5. Cet élément est maintenant disponible sur tous
les navigateurs modernes. Seuls les environnements plus anciens, pour ne citer
que IE6 ou IE7 ne savent pas gérer les graphiques au travers de
CANVAS.
Hormis cette restriction, laquelle peut être partiellement levée, RGRAPH s'avère extrêmement souple et permet de générer des graphes de toute nature.
Les graphes générés par RGRAPH
RGRAPH permet de générer des graphes de toute nature. Ici les graphes les plus courants:
- graphes en barres
- graphes bipolaires
- graphes à barres horizontales
- graphes en lignes
- camemberts
Téléchargement et installation
Toute la librarie RGRAPH est disponible sur le site officiel:
RGRAPH évolue en permanence. Téléchargez de préférence la dernière version stable.
Une fois le package téléchargé, vous ouvrez le fichier ZIP et décompressez son contenu dans un dossier séparé. pour nos exemples, nous avons décompressé le contenu dans un dossier rgraph:
Pour votre site web, ce sont les scripts javascript du sous-dossier libraries qui sont essentiels:
- soit vous copiez l'intégralité de ces scripts dans votre dossier js et de préférence dans un sous-dossier rgraph;
- soit vous ne copiez que les scripts strictement nécessaires à votre application dans ce même dossier et sous-dossier js/rgraph.
De nombreux exemples
Dans le dossier demos du fichier téléchargé, vous trouverez de très nombreux exemples de graphes.
Pour exemple, dans le dossier demos on trouve le fichier bar-basic.html.
En tête de script, on retrouve ce code:
<script type="text/javascript" src="../libraries/RGraph.common.core.js" ></script> <script type="text/javascript" src="../libraries/RGraph.bar.js" ></script>
Ici, l'exemple n'aura besoin que des composants RGraph.common.core.js et RGraph.bar.js.
Si vous avez installé les scripts de la librairie sur votre serveur dans le dossier js/rgraph, il vous faudra adapter ce code comme suit:
<script type="text/javascript" src="js/rgraph/RGraph.common.core.js" ></script> <script type="text/javascript" src="js/rgraph/RGraph.bar.js" ></script>
Pour tester les exemples fournis, vous n'avez pas besoin de PHP. Il suffit de faire clic-droit et ouvrir avec Firefox ou Chrome ou une version récente de IE (IE 9 minimum requis).
Certains graphes sont animés. Ces animations sont impossibles à réaliser avec JPGRAPH. D'autres graphes sont interactifs.
Pour Internet Explorer, avec des versions antérieures à IE9, certains graphes seront affichés en mode simplifié. Certaines fonctionnalités de RGRAPH ne sont pas opérationnelles avec IE6, IE7 et IE8.
Adaptations pour Internet Explorer
Si vous utilisez une version plus ancienne de IE que la version 9, il faudra adapter le code HTML comme suit.
<!--[if lte IE 9]> <script type="text/javascript" src="js/excanvas.js"></script> <![endif]-->
Voici un en-tête type minimal de page web utilisable avec tous les navigateurs:
<!DOCTYPE html > <html> <head> <script type="text/javascript" src="../libraries/RGraph.common.core.js" ></script> <script type="text/javascript" src="../libraries/RGraph.bar.js" ></script> <!--[if lt IE 9]><script src="js/excanvas.js"></script><![endif]--> <title>Graphe camembert simple</title> </head> <body> ....ici notre graphe... </body> </html>
Voici un graphe assez simple affiché avec Firefox:
Et le même script affiché avec IE7:
Les navigateurs antérieurs à IE9 sont amenés à disparaître assez rapidement.
Dans cet intervalle, si vos clients sont exigeants sur le rendu homogène des graphes:
- détectez le navigateur utilisé et incitez-les à utiliser de préférence un navigateur plus récent que IE8 ou un navigateur autre que IE;
- adaptez le rendu des graphes pour gommer les différences de rendu. Evitez en particulier les animations et les effets de dégradés. Les barres monochromes ont un rendu identiques sous IE et Firefox.
- vous vous passez de RGRAPH... Mais vous devez être maintenant convaincu de l'intérêt de cette librairie graphique pour éviter de choisir cette solution.
Voyons maintenant comment construire son premier graphe.