Table vers graph
Il est possible d'utiliser un tableau pour en gérer un graphique. Vous pouvez générer des graphique en batons, lignes (remplies ou filaires) et camember.
Restons standard
L'idée étant d'utiliser un tableau qui est un ensemble de données et de l'afficher en tant que graphique. Si le javascript n'est pas utilisable, le tableau apparait tout de même. Cela permet de rester standard W3C et de ne pas compromettre le contenu de votre page. Seul les navigateurs ayant javascript pourront voir le graphique, mais les autres pourront tout de même afficher les données.
Technique
Tout est géré avec un canvas, balise qui fonctionne nativement sous FireFox. En ce qui concerne IE, il faut inclure excanvas, contenu dans js/libs/excanvas.
Vous aurez alors à loisirs de créer des tableau et de les afficher en tant que graphique.
Exemple
Prenons un exemple:
Testde graph
| 2001 | 2002 | 2003 | |
|---|---|---|---|
| FireFox | 12 | 23 | 15 |
| Internet Explorer | 17 | 43 | 3 |
| Opera | 15 | 8 | 5 |
dont voici le code source:
<table id="test1" border="1" style="width: 250px">
<tr>
<td></td>
<th>2001</th>
<th>2002</th>
<th>2003</th>
</tr>
<tr>
<th>FireFox</th>
<td>12</td>
<td>23</td>
<td>15</td>
</tr>
<tr>
<th>Internet Explorer</th>
<td>17</td>
<td>43</td>
<td>3</td>
</tr>
<tr>
<th>Opera</th>
<td>15</td>
<td>8</td>
<td>5</td>
</tr>
</table>
L'id du tableau est donc "test1". Pour transformer ce tableau, il suffit de faire:
<?php
_etag('mootools','plugin'=>'plootr;tabletochart');
// si vous le souhaitez, ajouter excanvas:
//CopixHTMLHeader::addJSLink(_resource('js/libs/excanvas/excanvas-compressed.js'));
//ajoutez enfin l'appel à la transformation
CopixHTMLHeader::addJSCode("
window.addEvent('domready',function(){
$('test1').toChart();
});
");
?>
Ce qui affiche:
Pie et Lines
Pour modifier le type de graphique, il faut spécifier l'options type qui peut-être: "bars", "pie" ou "lines".
Voici un exemple
$('test1').toChart({
type: "pie"
});
Notez que dans ce cas, comme nous avons plusieurs lignes, le graphique fait une moyenne des données sur les colonnes.
$('test1').toChart({
type: "lines"
});
$('test1').toChart({
type: "lines",
shouldFill: false
});
0ptions supplémentaires
Une série d'options peut-être ajoutée, comme par exemple l'affichage de légendes, modifier la palette de couleur, la taille du canvas, etc... Voici un autre exemple qui demande l'affichage des légendes, spécifie la taille du graph et ajoute une pallette de couleurs:
$('test1').toChart({
'legend': true,
'width': 250,
'height': 200,
'colors': [
'#22AA22',
'#77AA77',
'#99AA99'
]
});
En ligne:
$('test1').toChart({
'type': 'lines',
'legend': true,
'width': 250,
'height': 200,
'colors': [
'#22AA22',
'#77AA77',
'#99AA99'
]
});
