JavaScript Charts mit Jquery Flot
28. Oktober 2008Flot ist eine JavaScript Bibliothek auf Basis von Jquery. Ich verwende diese gerade im Zusammenspiel mit ExtJS. So lassen sich schicke Grids mit den passenden Charts dazu erzeugen.
Ein Flot Chart wird immer in ein Jquery Element generiert. Dieses muss ein HTML Element mit einer festen Höhe und Breite haben. Wie bei Jquery üblich, ist der Aufruf mit ein paar Zeilen möglich.
$().ready(function() {
var data = {
label:"Dummy Daten",
data:[[1,1.5],[2,5],[3,2.3],[4,3.3]]
};
var options = {
lines:{show:true},
points:{show:true}
}
var plot = $.plot($('#placeholder'), [data], options)
});
Dieser Simple Code erzeugt folgenden Chart:
Das schöne an einem Javscript generierten Chart ist die Möglichkeit diesen zur Laufzeit anzupassen. Man kann auf Kopfdruck weitere Daten im vorhandenen Chart anzeigen. Flot Charts sind auch an klickbar. So kann man Punkte auf dem Chart anklicken und dem User dann weiterer Daten zu den bestimmten Punkt anzeigen.
Zoom Funktion
Spannend ist auch die Zoom Funktion um bestimmte Bereiche auf den Chart genauer anzusehen. Dazu muss man nur in den Optionen die Selection aktivieren:
selection: { mode: "x" oder "y" oder "xy"}
Dann kann man sich an den Event plotselected anhängen und den Chart anzoomen:
$("#placeholder").bind("plotselected", function (event, ranges) {
plot = $.plot($("#placeholder"), [data],
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
