Um Graphen mit jQuery und jqPlot direkt im Browser zu zeichnen, benötigt man erst einmal die aktuelle jQuery Version von jquery.com. Ich verwende im Normalfall die “minified” Version, weil diese auch bei langsamen Internetverbindungen in kurzer Zeit läd.
jQuery muss nun mit folgendem Befehl in den Code der eigenen Webseite eingebunden werden, der Pfad muss natürlich an euren Webspace angepasst werden.
<script type="text/javascript" src="/admin/misc/jquery-1.4.2-min.js"></script>
Um zu testen ob jQuery erfolgreich geladen wurden, kann man folgenden Code verwenden
$(document).ready(function() {
alert('hi');
});
Es sollte beim Laden der Seite ein Fenster mit dem Text “hi” geöffnet werden.
Nachdem jQuery erfolgreich geladen wurde, kann man sich an die Installation von jqPlot machen. Downloaden kann man das Skript im Bitbucket Repository.
In der gepackten Datei sind alle für jqPlot benötigten Dateien enthalten. Nun sollte man alle Dateien die mit jquery.jqplot oder excanvas beginnen sowie den Ordner “plugins” auf den Server übertragen.
Wenn die Übertragung fertig ist, muss man die Skripte in die Seite laden, die Pfade zu den Dateien müssen wieder auf den eigenen Webspace angepasst werden.
<script language="javascript" type="text/javascript" src="/admin/misc/jquery.jqplot.min.js"></script> <link rel="stylesheet" type="text/css" href="/admin/misc/jquery.jqplot.css" /> <script type="text/javascript" src="/admin/misc/plugins/jqplot.categoryAxisRenderer.min.js"></script> <script type="text/javascript" src="admin/misc/plugins/jqplot.barRenderer.min.js"></script>
Jetzt sollte man folgendem HTML Schnippsel einen Grafen zeichnen können.
<div class="jqPlot" id="chart2" style="height:200px; width:350px;"></div>
<script language="javascript1.2">
line1 = [25825 ,20525 ,19332 ,19633 ,21462 ,18278 ,18786 ,22621 ,17785 ,24874 ];
plot2 = $.jqplot('chart2', [line1], {
legend:{show:true, location:'ne', xoffset:55},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{barPadding: 5, barMargin: 15}
},
series:[
{label:'Hits per day'},
],
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
ticks:['21' ,'22' ,'23' ,'24' ,'25' ,'26' ,'27' ,'28' ,'29' ,'30' ]
},
yaxis:{min:0}
}
});
</script>
Im Feld Ticks stehen die Werte der X Achse, im Feld line1 die Werte der Y Achse.
Wenn man alles korrekt gemacht hat, sollte das nun so aussehen:
Related posts:
