Bekommen Sie die Kurve zu Ihren Daten


Veröffentlicht am 18 September 2013 - Tags:  DojoX  Charts 

Liniengrafik mit DojoX
Ein Bild sagt mehr als 1000 Worte. Statt langer Zahlenreihen oder Tabellen vermitteln uns Grafiken viel schneller Aussagen zu Entwicklungen, Verhältnissen oder Größenvergleichen. In Domino Anwendungen gab es bislang die Option über Java-Applets. Mit den neuen Dojo Fähigkeiten gibt es hier eine Alternative. Das ist nicht zuletzt wichtig, wenn die Nutzung von Java im Browser nicht gewünscht wird. Dynamische Effekte in den Grafiken sind mit Dojo leicht möglich. So kann beim Anfahren eines Datenpunktes eine detaillierte Information angezeigt werden oder bei Tortendiagrammen diese hervorgehoben und mit Erläuterungen versehen werden.
All dies ist in Domino mit XPages (Notes/Browser) sowie mit Masken (Browser) möglich.

Dojo und darin die Charting-Funktionen von DojoX stehen als Open Source von der Dojo Foundation zur Verfügung. Es gibt umfassende Hilfe und Tipps im Internet. Zentraler Punkt für die Information ist Webseite der zur Dojo-Dokumentation. Mit Bezug zum Einsatz in Umfeld IBM Lotus Domino müssen wir gelegentlich etwas genauer auf die Version achten. Mit den Versionen 8.5.x haben wir hier die Versionen 1.4.3 oder 1.5.1. Auf der Dojo Webseite kann man im Reference Guide nur bis zurück zur 1.6. Im der API Dokumentation kommt man zurück bis 1.3 (Auswahl-Feld im Kopf der Anzeigen nutzen).
Beispiele für die verschiedensten Charts gibt es reichlich im Web und auch speziell zu IBM Lotus Domino. Ein guter Einstieg ist Dojox Charting Tutorial for XPages.

Im Praxis-Einsatz mit größeren Datenmengen muss man die zugreifenden Browser im Blick haben. Für durchaus noch vorhandene Internet Explorer 8 reicht der Hinweis aus dem oben erwähnten Tutorial auf die Setzung des Kompatibilitäts-Modus manchmal nicht aus. Der IE8 kommt mit dem Ablauf des JavaScript nicht zeitig zurecht und Benutzer erhalten eine Fehlermeldung dazu. Nicht jeder Benutzer wird den Dialog entsprechend beantworten und nach einiger Zeit dann doch die komplette Grafik sehen. Bei Linien-Grafiken bietet sich als Lösung eine Aufbereitung der Daten mit weniger Anzeige-Punkten für die Grunddaten an. Fehlende bzw. interpolierte Daten können in den Tooltip-Fenstern (PopUp beim Anfahren eines Datenpunktes mit der Maus) angezeigt werden. Dabei kann ein Tooltip mittels HTML Code gestaltet werden, so dass auch formatierte und mehrzeilige Anzeigen möglich sind.

Dojo steht aber nicht nur via XPages zur Verfügung. In Browser-Anwendungen können Dojo-Funktionen auch in Masken implementiert werden. Ein gutes Beispiel dafür ist die JavaScript Option für RichText-Felder. Eine einfache Maske mit einem RichText-Feld und der gewählten Option Web > Anzeige > JavaScript-Steuerlement verwenden zeig uns im Quellcode die Grundzüge zum Einbinden von Dojo in eine Maske.

Für die Chart-Funktionen benötigen wir im HTML-HEAD Inhalt der Maske:

<script type=\"text/javascript\" src=\"/domjs/dojo-1.4.3/dojo/dojo.js\" djConfig=\"locale: 'de-de', parseOnLoad: true\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"/domjs/dojo-1.4.3/dijit/themes/tundra/tundra.css\">
<script type=\"text/javascript\">dojo.require('dojox.charting.widget.Chart2D')</script>
<script type=\"text/javascript\">dojo.require('dojox.charting.themes.PlotKit.red')</script>
<script type=\"text/javascript\">dojo.require('dojox.charting.widget.Legend')</script>

Hier für eine dojo Version 1.4.3 auf dem Server sowie das Tundra Theme für die DojoX Charting Funktionen. Dies entspricht dem, was in der XPage mit der Ressourcen-Zuordnung erreicht wird. Das StyleSheet zum Theme dürfen wir hier nicht vergessen; ansonsten funktionieren z.B. die Tooltips nicht korrekt.

Der sonstige Aufbau kann in der Maske wie für die XPages im oben erwähnten Tutorial erfolgen. Der Wesentliche Gedanke dabei:
Für die Parameter des Charts eine Reihe von JavaScript-Variablen auf der Seite bereitstellen, die in den Aufrufen der DojoX Module verwendet werden können. Hier als Beispiel mit kontanten Texten:

<script language="JavaScript" type="text/javascript">
var datenreihe = [{x: 0.0,y: 12.0},{x: 1.0,y: 12.1},{x: 2.00,y: 12.2},{x: 3.00,y: 12.4},{x: 4.00,y: 12.8},{x: 5.0,y: 13.6},{x: 6.0,y: 15.2},{x: 7.0,y: 18.4},{x: 8.00,y: 24.8}];
var ToolTips = ["00:00 = 13.00","<table boder=1><tr><td>00:00 = </td></tr><tr><td><font  color=red>13.00</font></td></tr></table>","02:00 = 12.2","03:00 = 12.4","04:00 = 12.8","05:00 = 13.6","06:00 = 15.2","07:00 = 18.4","08:00 = 24.8"];
var wertemin = 12;
var wertemax = 26;
var reihentitel = "Zellenentwicklung";var einheit = " Zellen/10cm³";</script>

Das JavaScript zum Aufruf der Dojo-Funktionalität wird z.B. am Ende der Maske als Durchgangs-HTML eingefügt und so beim Laden der Maske ausgeführt. Der Aufruf der Funktion XSP.addOnLoad(...) entfällt.

Ein kleiner wichtiger Hinweis zum Ende: In den HTML-Body Attributen müssen wir noch hinzufügen "class=\"beliebig tundra\"". Wichtig ist hier der Bezug zum gewählten Theme (siehe oben HTML-Head). Die Klasse muss nicht definiert sein. Der Name muss nur auf den Namen des Themes enden. Wird dies vergessen, so sind die ToolTips nicht sauber formatiert.

Ralph Hoepfner Ralph Hoepfner


Gefällt dir dieser Artikel? Dann teile ihn mit deinen Freunden.

ImpressumDisclaimerDatenschutz