jQuery Visualize: Dynamische Charts und Diagramme

Das kostenlose Visualize Plugin für jQuery ermöglicht schnell und einfach sehr ansehenliche Diagramme und Charts zu erstellen. Hierzu muss einfach das Plugin in die Webseite mit eingebunden werden und angegeben werden in welchen Container das Diagramm eingefügt werden soll und vorallem welche Art und Eigenschaften das Diagramm haben soll. In folgenden Beispiel soll eine Line Chart in die Tabelle table gezeichnet werden. Hierzur muss folgender Code verwendet werden.

<script type="text/javascript">
	$(function(){
		$('table').visualize({type: 'line'});
		$('table').visualize();
	});
</script>

Wenn dies gemacht ist benötigen wir noch die Werte die in dem Linien Diagramm dargestellt werden sollen. Hierzu muss einfach eine kleine Tabelle im HTML Code angelegt werden, soll diese nicht sichtbar sein kann die Tabelle einfach mit dem Attribut versteckt werden.

#table {
 display: none;
}

In der folgenden Tabelle müssen jetzt die wie schon oben genannt die Werte des Diagramms festgelegt werden.

<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>	
	</tbody>
</table>