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

Graphes en camembert

Graphe en camembert très simple

Pour notre graphe en camembert, nous allons reprendre les valeurs utilisées dans notre exemple précédent: Récupérer les données pour JavaScript

Nos données:

<?php
$values = "[17701,6936,6482,5726]"; 
$labels = "['annonces','forum','agenda','articles']";
?>

Pour notre exemple, nous avons mis en variables les données issues de la base de données et remises en forme via notre classe Rgraph.

Ensuite, nous allons utiliser un script différent issu de la librairie RGraph:

    <script src="js/rgraph/RGraph.common.core.js" ></script>
    <script src="js/rgraph/RGraph.pie.js" ></script>

Enfin, notre script qui trace le graphe en camembert:

<canvas id="myCanvas" width="450" height="250">[No canvas support]</canvas>
<script>
    window.onload = function ()
    {
        var pie = new RGraph.Pie('myCanvas', <?php echo $values; ?>)
            .Set('labels', <?php echo $labels ?>)
            .Draw();
    }
</script>

Resultat:

un graphe en camembert simple

Les couleurs des parts du graphe en camembert sont choisies par la librairie de traçage du graphe.

De plus, un effet de dégradé est appliqué, partant du centre et éclaircissant le graphe vers l'extérieur.

Tous les articles sur ce thème