HTML5 / CSS 2.x/3 / PHP / MySQL ...

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:

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:

graphe en barres
graphe en ligne
graphe en camembert

Téléchargement et installation

Toute la librarie RGRAPH est disponible sur le site officiel:

   www.rgraph.net

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:

contenu du dossier rgraph

Pour votre site web, ce sont les scripts javascript du sous-dossier libraries qui sont essentiels:

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:

graphe simple affiché par Firefox

Et le même script affiché avec IE7:

graphe simple affiché par 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:

Voyons maintenant comment construire son premier graphe.

Tous les articles sur ce thème