Links überspringen

Diagramme in FileMaker mit JavaScript und HTML5.

FileMaker-Beispiel für Diagramme mit JavaScript und HTML5

Diagramme mit JavaScript und HTML5 in FileMakerSeit 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.

Viele Varianten von Diagrammen

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.

Diagrammtypen in Chart.js

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.

Chart.js in FileMaker kapseln

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“.

Diagramm-Source als eigene FileMaker-Felder

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:

  • {javascript} – Platzhalter für Chart.js, im Bereich <head> zwischen <script> und </script>
  • {breite} – Breite des Diagramms
  • {höhe} – Höhe des Diagramms
  • {t1} – {t12} – Textbeschriftung 1 bis 12 für Werte 1 bis 12
  • {w1} – {w12} – Werte 1 bis 12
  • {rot}, {grün}, {blau} – RGB-Farbwerte für Farben des Diagramms

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.

Diagramm-Source und Chart.js zusammenführen

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.

FileMaker-Script für JavaScript-Diagramme

Andere Diagrammtypen anzeigen

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.

Download FileMaker Beispieldatenbank (.fmp12)

Download FileMaker Beispieldatei

Die Beispieldatenbank für diesen Artikel liegt im FileMaker-12-Format (.fmp12) für FileMaker 12 bis 14 vor, der Download ist kostenlos.

FileMaker-Beispiel für Diagramme mit JavaScript und HTML5

Video-Tutorial von Matt Petrowski zum Thema (engl.)

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Many thanks to Matt Petrowski and Nick Downie for this great solution!

So übernehmen Sie Scripte aus der Beispieldatei in Ihre Lösung

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.

So übernehmen Sie Tabellen aus der Beispieldatei in Ihre Lösung

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.

So übernehmen Sie Wertelisten aus der Beispieldatei in Ihre Lösung

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.

So übernehmen Sie eigene Funktionen aus der Beispieldatei in Ihre Lösung

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.

Hinterlassen Sie einen Kommentar

  1. 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?

    1. Tritt das Problem nur in Verbindung mit FileMaker auf, oder funktioniert es auch nicht in anderen Browsern von einer normalen Website aus?

  2. 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…

    1. 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?

Diese Seite teilen:

ERP-Software so flexibel wie Ihr Unternehmen.
Wir beraten Sie gern.

Anpassbare ERP-Software für Mac, Windows und iOS.

Sie sind hier: Diagramme in FileMaker mit JavaScript und HTML5 erzeugen.