HTML and CSS Reference
In-Depth Information
<div id "title">Canvas Charting</div>
</div>
<div id "content">
<ul class "pageitem">
<liclass "textbox">
<divid "chart"style "width:280px;height:300px">
</div>
</li>
</ul>
</div>
</body>
</html>
Zuerst warten Sie mittels DOMContentLoaded -Event, bis sämtliche Elemente der
HTML-Seite ansprechbar sind, und starten dann die Funktion init() . Der grund-
legende Aufruf von Flot geschieht in einer einzelnen Zeile.
$.plot($("#chart"), data, options );
Per jQuery wird zunächst das im <body> der HTML-Seite befindliche div -Element (mit
der ID chart ) referenziert und zusammen mit einem data - und einem options -
Objekt an die Methode plot() des Flot-Plug-ins übergeben. Der Code über diesem
Aufruf erstellt lediglich die Beispieldaten und Optionen.
Unsere Beispieldaten bestehen aus einer zeitbasierten Datenserie. Wir erstellen beispiel-
haft eine Datenserie für den Espresso-Konsum pro Tag. Das Array data enthält die
Datenserien in Form von JavaScript-Objekten. Laut Flot-Konvention kann das Label
(für die Legende) mit dem Attribut label angegeben werden. Die Daten der Serie
werden im Attribut data als Array von Arrays angeführt. Pro Element werden die x-
und y-Koordinaten des späteren Diagramms angegeben. Da wir ein zeitbasiertes
Diagramm wünschen, müssen die Daten in Form von Timestamps angegeben werden.
var data [
{ label: "Espresso / Day",
data: [
[now,3],
[now+oneDay,7],
[now+(oneDay*2),2],
[now+(oneDay*3),3]
]
}
];
Die Optionen werden ebenfalls als JavaScript-Objekte definiert und als Parameter der
Plot-Methode übergeben. Auf Details soll hier nicht eingegangen werden, die Bedeutung
der einzelnen Optionen ist doch recht selbsterklärend. Die vollständige Beschreibung
der Flot-API finden Sie unter http://bit.ly/bEXQYn .
var options {
series: {
lines: {
Search WWH ::




Custom Search