[CODE] Créer de beaux diagrammes avec l’API Google

Posté le par

Pie chartL’API de Google permet de générer de beaux graphiques dynamiques afin de présenter de manière agréable et facilement lisible vos données. Vous pouvez réaliser des « camemberts », des diagrammes en bâtons, des diagrammes à bandes, des diagrammes à lignes brisées, des boites à moustaches… Mais vous pouvez également utiliser un fond de carte du monde pour réaliser des statistiques sur des pays (visiteurs de votre site par pays par exemple).

Exemple : diagramme en camembert

Je vais m’attacher à vous expliquer comme réaliser un diagramme en camembert montrant le top 5 du nombre de messages par auteur, sur un forum par exemple. La génération de ce diagramme se fera à partir de données enregistrées en bases de données, il est donc totalement dynamique puisqu’il s’adapte aux données présentes dans les tables. On veut voir l’importance du top 5 des auteurs de messages dans notre forum, on doit représenter en une seule « portion » le nombre de messages des autres utilisateurs. Voici le code complet de la page, détaillé à l’aide de commentaires :

<?php

// Connexion à la base de données
require "kernel/config.php";
$db = mysql_connect($host, $user, $pass)  or die('Erreur de connexion '.mysql_error());
mysql_select_db($user,$db)  or die('Erreur de sélection '.mysql_error()); 

// Requête SQL permettant la création de notre camembert
$query = mysql_query("SELECT nb_posts, username FROM users ORDER BY nb_posts DESC LIMIT 0,3");

// Récupère le nombre total de posts
$query_nb_total_posts = mysql_fetch_array(mysql_query("SELECT SUM(nb_posts) AS nb_posts FROM users"));
$nb_total_posts = $query_nb_total_posts['nb_posts'];

// Défini le nom de notre fonction JS et l'id du div HTML dans lequel se trouvera le camembert
$name_chart = "nb_post_users"; 
?>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(<?php echo $name_chart; ?>);
      function <?php echo $name_chart; ?>() {
        var data = new google.visualization.DataTable();
		// Nous n'avons que 2 légendes : le nom d'utilisateur (type string) et son nombre de posts (type number)
        data.addColumn('string', 'Nom');
        data.addColumn('number', 'Nombre de posts');
        data.addRows([
		<?php 
		$sum_nb_posts = '0'; // Initialisation du compteur de posts
		
		// Boucle de la requête SQL
		while ($donnees = mysql_fetch_array($query))
			{
			$username = addslashes($donnees['username']); // On oublie pas addslashes pour éviter qu'un guillemet provoque une erreur
			$nb_posts = intval($donnees['nb_posts']);
			
			$sum_nb_posts = $sum_nb_posts + $nb_posts; // Cumule le nombre de posts
			
			$data .= "['".$username." : ".$nb_posts."', ".$nb_posts."],"; // J'ai choisi d'afficher la valeur directement dans la légende en écrivant '".$username." : ".$nb_posts."'
			}
		echo $data;
		
		// Calcul et affichage du nombre de posts dont les auteurs ne sont pas dans le top
		$nb_restant_posts = $nb_total_posts - $sum_nb_posts;
		echo "['Autres utilisateurs : ".$nb_restant_posts."', ".$nb_restant_posts."]";
		?>
        ]);
		// Modifiez les options à votre convenance
        var options = {
          width: 450, height: 300,
          title: 'Top du nombre de posts par utilisateur'
        };
		
		// Affichage du camembert généré dans le div défini au début
        var chart = new google.visualization.PieChart(document.getElementById('<?php echo $name_chart; ?>'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
	<!-- Affichage du camembert -->
    <div id="<?php echo $name_chart; ?>"></div>
  </body>
</html>

Voici le résultat que l’on obtient avec des données prisent arbitrairement :

A vous d’adapter le code précédent à votre besoin ! La documentation complète de l’API Google Charts est disponible juste ici, je vous invite à la consulter.

Les commentaires sont fermés.