nw  

Interaktive Business Charts für das Kolibri Web UI Tookit

Zusammenfassung

Implementierung von Business-Charts für das open-source Toolkit Kolibri

Schlüsselbegriffe

HTML, CSS, JavaScript, Canvas

Zielsetzung

Entwicklung einer Chart-Integration für Kolibri, die es erlaubt, beliebige externe Chart-Visualisierungen in die Funktionsweise von Kolibri einzubinden.
Der Fokus liegt auf Charts zur Visualisierung und Analyse grosser Datenmengen und Zeitreihen.

Ausgangslage

Datenvisualisierung ist ein wichtiger Bestandteil jeder grösseren Geschäftsapplikation. Sachbearbeiter/-innen können sich damit einen Überblick über einen grossen Datenbestand machen und diesen analysieren.
Dabei kommen vor allem spezialisierte Chart-Typen zum Einsatz. Standard-Charts wie Balkendiagramme oder Pie-Charts sind zwar ebenfalls anzutreffen aber in der Regel zu wenig leistungsfähig für Geschäftsapplikationen. Business-Charts sind keine reinen Visualisierungen, sondern hochdynamische, interaktive, visuelle Analysewerkzeuge.
Chart-Libraries sind zwar in unterschiedlichenTechnologien verfügbar (siehe z.B. https://dc-js.github.io/dc.js/, https://www.highcharts.com, https://d3js.org), was diesen aber fehlt ist eine Integration in eine Webcharts Applikationsumgebung, die nach klassischem MVC aufgebaut ist und ein Präsentationsmodell visualisiert und mit Modifikationen dieses Modells passend interagiert.

Ergebnisse

Als Ergebnis dieser Arbeit ist ein Chart Toolkit für das Kolibri entstanden, welches die drei Charttypen Scatter-, Line- und Areachart beinhaltet. Diese sind beliebig untereinander kombinierbar. Für Entwickler/-innen steht eine "Erste Schritte" Anleitung bereit, sowie durchgehende JSDoc Kommentare, wodurch die Code-Completion in der IDE sichergestellt ist.
Zum Einsatz kam auch das Projector-Pattern, wodurch die Charts dem selben Aufbau folgen, wie es im Kolibri Web UI Toolkit üblich ist.
Bei der Implementierung wurde darauf geachtet, dass die Charts einfach zu verwenden und zu erweitern sind.
Ebenfalls ist ein komplettes Designkonzept erstollt worden, welches auch bei einer allfälligen Erweiterung der Business-Charts genutzt werden kann.

Projektdaten

Auftraggeber

Fachhochschule Nordwestschweiz

Projektteam

Kontakt

<< zurück