Flotter Plotter

Web-App mit jQuery-Mobile und Flotr2:

Screenshot jQuery Mobile mit Flotr2 - iPhone
jQuery Mobile mit Flotr2 auf dem iPhone …
Mit jQuery Mobile lassen sich recht einfach (Web-)Apps für mobile Geräte bauen. Ich habe in den letzten Tagen etwas damit experimentiert. Interessiert hat mich das Zusammenspiel mit einer JavaScript Bibliothek zum Erzeugen von Diagrammen. Die Wahl fiel dabei auf Flotr2 – eine Bibliothek zum Zeichnen von HTML5 Diagrammen und Grafen. Das ganze sollte auf dem Desktop, einem Tablet und einem Smartphone ohne speziellen eigenen Code für Browser- oder Geräte-Weichen funktionieren. Und schön skalieren sollte der Inhalt für unterschiedliche Auflösungen natürlich auch.

Die Screenshots zeigen die Web-App jeweils auf dem iPhone (320×480), dem iPad (1024×768) und im Browser. Der Inhalt des Diagramms wird per Ajax von einer PHP-Seite geladen. Bei den ersten Versuchen blieb die Seite allerdings leer. Hmmm…

Die Web-Konsole von Firefox meldete:

uncaught exception: 
     Invalid dimensions for plot, width = 0, height = 0, resolution = 1

Flotr2 zeichnet das Diagramm auf ein <canvas> in ein vorhandenes <div>-Element. Hier habe ich einfach das von jQuery-Mobil vorgegebene Content-<div> verwendet:

<script type="text/javascript" src="lib/flotr2.min.js"></script> 

<div id="content" data-role="content"></div>

<script type="text/javascript">
(function basic(container) {
    var d1 = [[0, 3],[4, 8],[8, 5]];
    graph = Flotr.draw(container, [d1]);
})(document.getElementById("content"));
</script>

Da das Content-<div> für jQuery noch keinen Inhalt hat wenn Flotr zu malen anfängt, ist die Größe 0. Flotr kann aber erst malen wenn die Größe des Canvas feststeht. Hmmm…

Per CSS lässt sich die Größe zwar anpassen, aber erst wenn man die Größe der jQuery „Page“ auch festlegt, legt Flotr los.

<style type="text/css">
   #content { height: 75%; width: 75%; }
   #mainPage { height: 100%; width: 100%; margin: 0px; }
</style>

Das Ergebnis kann sich sehen lassen, wie man an den beiden unten stehenden Screenshots sieht.

Screenshot jQuery Mobile mit Flotr2 im Firefox
… und im Firefox.
Screenshot jQuery Mobile mit Flotr2 auf dem iPad
… auf dem iPad …

Als kleine Einschränkung gilt es zu beachten, dass bei einer Änderung der Fenstergröße (oder Drehen des Tablets) das Chart nicht automatisch an die neue Fenstergröße angepasst wird. Ein Neuladen der Seite ist erforderlich.

Fazit: Wenn man weiß wie, arbeiten jQuery-Mobile und Flotr2 prima zusammen.

Kommentare sind abgeschaltet.