Warenkorb
0
Wagen 0
Telefonische Beratung +49 (0) 441-30 43 76 40
Seit einigen Jahren enthält FileMaker Pro die Möglichkeit, Zahlenwerte auch grafisch als Diagramme anzuzeigen. Die Einrichtung der Diagramme erfolgt dabei bequem dialoggesteuert. Die in FileMaker enthaltenen Diagramme haben jedoch den Nachteil, in FileMaker Runtime-Lösungen nicht zu funktionieren, da FileMaker diese Funktion in Runtime-Lösungen gesperrt hat. Außerdem lassen die nativen Diagramme aus FileMaker nur rudimentäre Interaktionen mit einem Diagramm zu. Eine wesentlich flexiblere Lösung, um Diagramme in einer FileMaker-Datenbank zu erzeugen, stellt die Open-Source-Lösung „Chart.js“ dar, die Dank Webviewer problemlos in eine FileMaker-Datenbank integriert werden kann. In diesem Artikel zeigen wir, wie Sie prinzipiell mit der auf JavaScript und HTML5-basierten „Chart.js“-Lösung wunderschöne und animierte Diagramme in Ihre FileMaker-Lösung integrieren können. Am Ende stellen wir eine Beispiellösung zum Download bereit, damit Sie alle erforderlichen Schritte direkt an Ihrem Mac oder PC nachvollziehen können.
Die Open-Source-Lösung „Chart.js“ bietet insgesamt sechs verschiedene Diagrammtypen, die jeweils individuell konfiguriert werden können und direkte Interaktionen des Benutzers zulassen.
Chart.js nutzt moderne HTML5- und JavaScript-Technik und kann in einem FileMaker Webviewer ausgeführt werden. Die erzeugten Diagramme befinden sich im SVG-Vektorgrafikformat und können ohne Qualitätsverlust frei skaliert werden. Auf der Website von Charts.js befinden sich umfangreiche Dokumentationen, wie Diagramme auch interaktiv gestaltet werden können, so daß z.B. durch Klick auf einen Diagrammteil ein FileMaker-Script gestartet werden kann.
Um die Funktionen aus der JavaScript-Library „Chart.js“ in FileMaker nutzen zu können, müssen Sie zunächst die aktuelle Version der Charts.js Library auf Ihren Computer herunterladen. In unserer Beispiellösung, die Sie am Ende dieses Artikels herunterladen können, ist die Chart.js-Library bereits integriert. Wir haben die dort enthaltene Library modifiziert, so dass auch Diagramme mit negativen Werten angezeigt werden können.
In unserer Beispiellösung haben wir die Chart.js-Library in ein eigenes (globales) Feld gekapselt. Das Feld <<xGlo_JavaScript_Charts>> enthält also einfach nur den Sourcecode der gesamten Textdatei „Chart.js“.
Wenn Sie das gesamte „Chart.js“-Paket herunterladen, finden Sie im Verzeichnis „samples“ einige Beispiel-HTML-Dateien, mit denen Beispieldiagramme angezeigt werden können. Für diese Dateien, die für die Anzeige des Diagramms erforderlich sind, enthält unsere FileMaker-Lösung die globalen Felder <<xGlo_Balkendiagramm>> und <<xGlo_Liniendiagramm>>, die jeweils den Sourcecode für den entsprechenden Diagrammtyp bereithalten. In den entsprechenden Sourcecodes haben wir Platzhalter angelegt für alle Werte, die wir dynamisch aus FileMaker einfügen möchten. Folgende Platzhalter haben wir in den Sourcecode eingefügt:
Aus diesen Feldern mit den enthaltenen Platzhaltern wird also am Ende der HTML-Sourcecode für die Anzeige des Diagramms in einem FileMaker Webviewer erzeugt.
Um das Diagramm schließlich in einem FileMaker Webviewer darstellen zu können, besitzt unsere Beispiellösung ein weiteres Feld mit dem Namen „xLay_Diagramm_Webviewer“. In dieses Feld wird der finale Diagramm-Code generiert, der aus dem Diagramm-Sourcecode, der Chart.js und den dynamischen Daten besteht. Nach Klick auf die Registerschaltfläche [Wert 1] wird schematisch folgendes Script ausgeführt:
Feldwert setzen [xLay_Diagramm_Webviewer; Austauschen (xGlo_Diagramm; Platzhalter; Felder/Daten)]
Variable setzen [$$menuchart; Wert:"Wert 1"]
Schreibe Änderung Datens./Abfrage [unterdrücken; ohne Dialogfeld]
Fenster aktualisieren [Join-Ergebnisse löschen, Cache löschen]
Im ersten Scriptschritt wird der HTML-Sourcecode für den Web-Viewer aus den Feldern für den Diagramm-Sourcecode, Chart.js und den dynamischen Daten erzeugt. Der zweite Scriptschritt setzt eine globale Variable, mit der angezeigt wird, daß das Diagramm „Wert 1“ aktiv ist und angezeigt wird. Mit den letzten beiden Scriptschritten sorgen wir dafür, daß die Daten gespeichert und das aktuelle Fenster aktualisiert wird.
In unserer Beispieldatei befinden sich alle aufzurufenden Teilscripte in einem Script, die über entsprechende Script-Parameter aufgerufen werden. Mit den ersten beiden Teilscripten „chart_wert_1“ und „chart_wert_2“ wird das Diagramm nach Klick auf eine entsprechende Registerschaltfläche aktualisiert. Mit den beiden Teilscripten „balken“ und „linien“ kann der Typ des Diagramms von Balken- auf Liniendiagramm umgeschaltet werden.
In unserem Beispiel werden immer insgesamt 12 Werte angezeigt, weshalb die Sourcecodes eine entsprechend flache Struktur besitzen. Selbstverständlich ist es auch möglich, mehr als 12 Werte anzuzeigen oder auch mehrere Datenreihen pro Diagramm anzuzeigen. In diesem Fall müssen Sie die Ersetzung der Platzhalter dynamisch gestalten, indem Sie einen Platzhalter für eine gesamte Datenreihen-Zeile verwenden und die Datenreihen dynamisch im Script aufbauen. In unserem Beispiel beschränken wir uns auf eine flache Struktur mit 12 Werten in einer Datenreihe.
Die Beispieldatenbank für diesen Artikel liegt im FileMaker-12-Format (.fmp12) für FileMaker 12 bis 14 vor, der Download ist kostenlos.
Matt Petrowski hat in seiner Funktion als hervorragender FileMaker-Entwickler ein gut halbstündiges Video-Tutorial zum Thema „Diagramme mit FileMaker und JavaScript“ veröffentlicht. Im folgenden Video zeigt er die Möglichkeiten von Diagrammen mit JavaScript im FileMaker Webviewer in englischer Sprache.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Many thanks to Matt Petrowski and Nick Downie for this great solution!
Scripte lassen sich einfach über die Zwischenablage von einer FileMaker-Lösung in eine andere Lösung übertragen. Öffnen Sie einfach den Dialog Scripts verwalten, markieren Sie das gewünschte Script mit der Maus und kopieren Sie das Script in die Zwischenablage per Menü [Bearbeiten – Kopieren] oder Tastenkombination [Strg/Cmd-C]. Öffnen Sie daraufhin in der Ziel-Lösung den gleichen Dialog und fügen das zuvor kopierte Script einfach per Menübefehl [Bearbeiten – Einfügen] wieder ein.
Tabellen können auf mehrere Arten in eine bestehende Lösung eingefügt werden. Der einfachste Weg ist der Import der Tabelle über die Schaltfläche [Importieren…] im Dialog Datenbank verwalten. In einem nachfolgenden Dialog können dann alle Tabellen ausgewählt werden, die aus der Quell-Lösung importiert werden sollen. Diese Methode eignet sich also besonders, wenn mehrere Tabellen gleichzeitig importiert werden sollen. Soll nur eine Tabelle importiert werden, kann dies wie ein Script auch über die Zwischenablage erfolgen. Soll eine Tabelle samt Daten importiert werden, kann dies mit dem Befehl [Ablage/Datei > Datensätze importieren > Datei] erfolgen. Im Import-Dialog muß dann als Zieltabelle Neue Tabelle angegeben werden.
Wertelisten können einfach über die Zwischenablage von einer FileMaker-Lösung in eine andere Lösung importiert werden. Öffnen Sie einfach den Dialog unter [Ablage/Datei > Verwalten > Wertelisten], markieren Sie die gewünschte Werteliste mit der Maus und kopieren Sie die Werteliste in die Zwischenablage per Menü [Bearbeiten – Kopieren] oder Tastenkombination [Strg/Cmd-C]. Öffnen Sie daraufhin in der Ziel-Lösung den gleichen Dialog und fügen die zuvor kopierte Werteliste per Menübefehl [Bearbeiten – Einfügen] wieder ein.
Klicken Sie im Dialog [Ablage/Datei > Verwalten > Eigene Funktionen…] auf die Schaltfläche [Importieren] und wählen daraufhin die Beispieldatei aus. Wählen Sie im nachfolgenden Dialog die gewünschten eigenen Funktionen aus und bestätigen den Dialog. Bitte beachten Sie, daß diese Funktion nur in FileMaker Pro Advanced, nicht jedoch in FileMaker Pro zur Verfügung steht.
Bei xmCHART handelt es sich um ein Plugin für FileMaker, das professionelle und enorm vielfältige Diagramme direkt in einem Medienfeld als Vektorgrafik in FileMaker aus beliebigen Daten darstellen kann. Die resultierende Grafik kann in FileMaker oder in beliebigen anderen Programmen verwendet und verlustfrei auf beliebige Größen skaliert werden. Für ein…
Mit FileMaker und PHP treffen zwei Welten aufeinander, die schon seit einigen Jahren sehr gut zueinander passen. Der FileMaker-Profi Bernhard Schulz, der sich bereits seit vielen Jahren mit der Anbindung von FileMaker-Datenbanken via PHP beschäftigt, veranstaltet vom 22. bis zum 24. Mai in Salzburg einen FileMaker und PHP Power-Workshop. Das…
Eine layoutbasierte Benutzeroberfläche kann in FileMaker auf unterschiedliche Art und Weise realisiert werden. Der einfachste Weg ist sicherlich, einfach entsprechende Schaltflächen auf dem Layout zu platzieren, zu beschriften und ihnen Scripte zuzuweisen. Diese Methode ist zwar die schnellste, aber auch die unkomfortabelste Lösung. Denn sobald ein Menüpunkt hinzugefügt oder die…
Hinzufügen von {{itemName}} zum Warenkorb
Hinzugefügt {{EinkaufsName}} zum Warenkorb
Vielen Dank für den vereinfachten Einstieg. Auf meinem Mac klappt alles wunderbar mit FM 18 und MacOS 10.15.1. Habe Chart.js auf Version 2.9.1 aktualisiert. In der Windows-Umgebung werden die Grafiken aber nur im Internet Explorer angezeigt. Irgendwelche Ideen?
Tritt das Problem nur in Verbindung mit FileMaker auf, oder funktioniert es auch nicht in anderen Browsern von einer normalen Website aus?
Herzlichen Dank für die tolle Anleitung und die Beispieldatenbank. Wo ich gerade hänge: Was muss ich im Code ändern, um statt einem Balken- oder Liniendiagramm ein Doughnut-Diagramm zu erhalten? Wenn ich einfach «window.myBar = new Chart(ctx).Bar(barChartData, options);» durch «window.myBar = new Chart(ctx).doughnut(barChartData, options);» ersetze, klappt’s leider nicht…
Hallo und vielen Dank für das Interesse! Nur eine Vermutung: Vielleicht müssen die Daten für die andere Diagrammart etwas anders aufbereitet werden?