Plugin jQuery : Et le tableau devient graphique avec Visualize

Voici un plugin jQuery bien commode : générer un graphique à partir d’un simple tableau HTML.

Un exemple avec un tableau

[html]
<table class=visualize">
<caption>2009 Individual Sales by Category</caption>
<thead>
<tr>
<td></td>
<th>food</th>
<th>auto</th>
<th>household</th>
<th>furniture</th>
<th>kitchen</th>
<th>bath</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>150</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th>Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
</tbody>
</table>
[/html]

Et on appel la fonction visualize()

[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘table.visualize’).visualize();
});
</script>
[/javascript]

Des paramètres permettent également de « customizer » son graphique.

Téléchargement, options et démo sur le site officiel.

Ndlr : Ce plugin utilise les canvas HTML5 (pris en charge par beaucoup de navigateurs, mais pas dans toutes les versions)

Lien :

• jQuery visualize plugin accessible charts graphs from tables