Dès que l'on a saisi la facilité avec laquelle on peut créer des fichiers SVG dynamiques, il devient vite évident que l'on peut coupler cette idée à une base de données, rendant la chose encore plus intéressante. Nous allons ici partir du principe que nous disposons d'une base de données recensant les DVD disponibles à la vente dans un magasin. Nous voulons afficher le nombre de DVD sortis chacune des sept dernières années. Nous allons reprendre une partie du code de notre précédent exemple, et l'inclure dans une boucle...

(fichier colonnes.php)
<?php
  include("./global.inc");

  header("Content-type: image/svg+xml");
  print('<?xml version="1.0" encoding="iso-8859-1"?>' . "\n");

  //requete donnant le nombre de dvd paru par année
  $sql = "SELECT count(dvd_id) AS compte,dvd_annee
    FROM dvd
    GROUP BY dvd_annee
    ORDER BY dvd_annee DESC
    LIMIT 0,7;";
  $rsql = mysql_query($sql);

  $tab_resultat = array(
    mysql_result($rsql,0,"compte"),
    mysql_result($rsql,1,"compte"),
    mysql_result($rsql,2,"compte"),
    mysql_result($rsql,3,"compte"),
    mysql_result($rsql,4,"compte"),
    mysql_result($rsql,5,"compte"),
    mysql_result($rsql,6,"compte"));

  $tab_annee = array(
    mysql_result($rsql,0,"dvd_annee"),
    mysql_result($rsql,1,"dvd_annee"),
    mysql_result($rsql,2,"dvd_annee"),
    mysql_result($rsql,3,"dvd_annee"),
    mysql_result($rsql,4,"dvd_annee"),
    mysql_result($rsql,5,"dvd_annee"),
    mysql_result($rsql,6,"dvd_annee"));

  $tab_couleur = array(
    '#FF0000','#00FF00','#0000FF','#FFFF00',     '#FF00FF','#00FFFF','#999999'');
?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xml:space="default" width="700" height="200">
<?
  for ($i=0, $x=0; $i <7; $i++, $x=$x+100)
    {
?>
  <rect style="fill:<?=$tab_couleur[$i];?>"
    x="<?=$x;?>" y="<?=200-$tab_resultat[$i];?>"
    width="100" height="<?=$tab_resultat[$i];?>"/>
  <text x="<?=$x+50;?>" y="30"
    style="text-anchor:middle; fill:#000000; font-size:30;     font-weight:15; font-family:Tahoma, Verdana;
    font-style:regular">
    <?=$tab_annee[$i];?>
  </text>
<?
    }
?>
</svg>

Une fois de plus, on peut comparer cet exemple au fait d'intégrer du PHP à un fichier SVG. Après avoir extrait les diverses données de la base et les avoir mises dans deux tableaux (un pour les années, un autre pour le nombre de DVD entrés), nous créons un troisième tableau nous permettant de facilement intégrer un changement de couleur pour chacune de nos colonnes. NB: nos fonctions d'accès à la base se trouvent dans le fichier global.inc, appellé en début de programme.
Le plus gros du travail est réalisé par la boucle for() et ses paramètres, qui nous permet non seulement d'intégrer les résultats, mais aussi de mettre en place les éléments dans l'image, et d'assigner une couleur à chacune des colonnes. Notre exemple est une fois de plus volontairement basique, mais permet de voir les possibilités offerte par ce trio. La maîtrise des balises SVG permettra ensuite de créer bien d'autres applications.
Par exemple, pour ceux qui ont déjà abordé SVG/PHP par le biais de l'article de Leon Atkinson sur Zend.com, il est très facile d'intégrer MySQL a son fichier d'exemple: il suffit d'intégrer les modifications suivantes juste après la déclaration de la fonction circle_point():

(...)

  include("./global.inc");
  $sql="SELECT count(dvd_id) AS compte,dvd_annee FROM dvd GROUP BY dvd_annee ORDER BY dvd_annee DESC LIMIT 0,7;";
  $rsql=mysql_query($sql);

  $tab_resultat=array(
    mysql_result($rsql,0,"compte"),
    mysql_result($rsql,1,"compte"),
    mysql_result($rsql,2,"compte"),
    mysql_result($rsql,3,"compte"),
    mysql_result($rsql,4,"compte"),
    mysql_result($rsql,5,"compte"),
    mysql_result($rsql,6,"compte"));

  $tab_annee=array(
    mysql_result($rsql,0,"dvd_annee"),
    mysql_result($rsql,1,"dvd_annee"),
    mysql_result($rsql,2,"dvd_annee"),
    mysql_result($rsql,3,"dvd_annee"),
    mysql_result($rsql,4,"dvd_annee"),
    mysql_result($rsql,5,"dvd_annee"),
    mysql_result($rsql,6,"dvd_annee"));

  //fill in chart parameters $ChartRadius = 150;
  $ChartDiameter = $ChartRadius*2;
  $ChartFontHeight = 12;
  $ChartData = array(
    $tab_annee[0]=>$tab_resultat[0],
    $tab_annee[1]=>$tab_resultat[1],
    $tab_annee[2]=>$tab_resultat[2],
    $tab_annee[3]=>$tab_resultat[3],
    $tab_annee[4]=>$tab_resultat[4],
    $tab_annee[5]=>$tab_resultat[5],
    $tab_annee[6]=>$tab_resultat[6]);

(...)

A vous maintenant de découvrir le meilleure moyen d'offrir SVG à vos données.

Page 1 | 2