Après une présentation de PHP/SWF Charts et la construction d'un générateur de code PHP, nous tentons cette fois d'afficher le SWF des données tirées d'une base MySQL par le biais de PHP.

Cela nous permettra non seulement de pouvoir modifier ces données plus facilement (via possiblement un CMS tiers), mais surtout de disposer constamment de leur dernière mise à jour.

Pour notre exemple, nous allons afficher certaines données d'une base fictive d'un loueur de DVD en ligne.

La base
Nous n'allons nous préoccuper que de trois tables de notre base : la table dvd, contenant toutes les informations relatives à un DVD (dont l'année de création du film), la table genre, qui associe chaque genre à un id, et la table avoir_genre qui nous permet de faire le lien entre les deux tables dvd et genre.

Notre objectif, pour commencer, est d'afficher côte à côte les barres représentant le nombre de DVD par genre pour une année donnée. La requête SQL est assez simple :
SELECT genre.genre_nom, COUNT(dvd.dvd_id)
FROM dvd, avoir_genre, genre
WHERE dvd.dvd_annee = '2000'
AND dvd.dvd_id = avoir_genre.dvd_id
AND avoir_genre.genre_id = genre.genre_id
GROUP BY genre.genre_nom;

Le résultat sous SQL sera de cette forme :

Notre objectif est maintenant d'intégrer ces résultats dans la matrice nécessaire au fonctionnement de PHP/SWF Charts...

Intégration
Le mode d'emploi de PHP/SWF Charts nous indique que deux méthodes sont possibles, les deux utilisant un tableau multidimensionnel. La méthode la plus utilisée est la suivante :

$chart [ 'chart_data' ] = array (
  array ( "",         "2001", "2002", "2003", "2004" ),
  array ( "Region A",     5,     10,     30,     63 ),
  array ( "Region B",   100,     20,     65,     55 ),
  array ( "Region C",    56,     21,      5,     90 )
  );

Ici, nous n'affichons qu'une année, ce qui nous facilite la tâche : notre tableau sera de cette forme :

$chart [ 'chart_data' ] = array (
  array ( "",        "2000"),
  array ( "Genre 1",     5 ),
  array ( "Genre 2",   100 ),
  array ( "Genre 3",    56 )
(etc...)
  );

Il nous suffit donc, après avoir récupéré nos données de MySQL, de les intégrer au sein d'une boucle. Voici le code que nous utilisons ($sql correspond à la requête SQL que nous avons présentée plus avant) :

$result = mysql_query($sql);
$chart['chart_data'] = array ();
$chart['chart_data'][] = array ( "", "2000");
while ($ligne = mysql_fetch_row($result)) {
  $chart['chart_data'][] = array ( "$ligne[0]", $ligne[1] );
  }

Reste à définir notre diagramme :

$chart['chart_type'] = "bar";
$chart['chart_line'] = array ( 'line_thickness' => 2);
drawChart($chart);

Et nous obtenons le résultat suivant, qu'il nous faut améliorer.

C'est en effet pour le moins illisible. Outre le fait qu'il n'y a pas assez de couleurs pour le nombre de données à représenter, le tout se superpose. C'est parce que nous utilisons la mise en forme par défaut.

Amélioration de la mise en forme
Il nous faut nous plonger dans les fonctions de l'outil, et modifier l'affichage selon nos goûts. Voici ce que nous avons obtenu avec quelques ajouts au code :

Voici, en gras, ce que nous avons ajouté :

$chart['chart_type'] = "bar";
$chart['chart_line'] = array ( 'line_thickness' => 2);

/* taille de l'animation Flash */
$chart [ 'canvas_bg' ] =
  array ( 'width' => 400,
          'height' => 330,
          );

/* taille du rectangle explicatif */
$chart [ 'legend_rect' ] =
  array ( 'x' => 20,
          'y' => 5,
          'width' => 360,
          'height' => 90,
          'margin' => 0
          );

/* taille du rectangle du diagramme */
$chart [ 'chart_rect' ] =
  array ( 'x' => 40,
          'y' => 110,
          'width' => 320,
          'height' => 200
          );

/* indication de la valeur réelle à droite de la barre */
$chart [ 'chart_value' ] =
  array ( 'position' => "outside",
          'size' => 10,
          'bold' => false
          );

drawChart($chart);

Outre l'agrandissement du Flash lui-même et des deux rectangles où vont s'inscrire les données (qui prennent automatiquement la taille appropriée à leur conteneur), nous saisissons l'occasion pour afficher également les données de chaque colonne à leur droite.

Forum

Réagissez dans les forums de JDN Développeurs

On voit donc que la combinaison de PHP/SWF Charts à une base de données est relativement simple, pour peu que l'on puisse extraire correctement les données. On pourrait ainsi facilement, pour un seul genre de film, afficher l'évolution du nombre de films de ce genre par année... ou un camembert, ou toute autre représentation.

En revanche, afficher les données dynamiques pour un tableau à plusieurs entrées (plusieurs genres sur plusieurs années, ici) est déjà plus difficile à mettre en place.