Diagramme auf Websiten schön darzustellen kann sehr mühsam sein. Oft wird auf ein Bild zurückgegriffen, wobei man so schnell unflexibel ist, wenn Daten geändert werden sollen. jQuery Visualize schafft hier Abhilfe. Es verwandelt ein reines HTML-Table in ein Diagramm.
Beispiel:
So funktionierts
Binde nebst der jQuery-Library das Visualize Plugin und das CSS-File von Filamentgroup in deinem Code ein.
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type="text/javascript" src="js/visualize.jQuery.js"></script>
<link type="text/css" rel="stylesheet" href="css/visualize.jQuery.css"/>
Datensätze in einem <table> abbilden. Die Einträge im <thead> bilden die Kategorien, die im <tbody> die eigentlichen Daten.
<table >
<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>
Jetzt kann die Tabelle durch einen simplen jQuery-Aufruf visualisiert werden.
<script type=”text/javascript”>
$('table').visualize();
</script>
Es besteht sogar die Möglichkeit für ein Update des Diagrammes.
<script type=”text/javascript”>
$('.visualize').trigger('visualizeRefresh');
</script>
Noch mehr Informationen zu diesem jQuery-Plugin findest du auf
www.filamentgroup.com
