In 30 Minuten zum einfachen One-Pager: graphomate Custom Widgets für SAC Stories

Ursprünglich veröffentlicht am 20. Februar 2024.
Verfasst von: Anja Kaup (PR und Marketing Managerin) – anja.kaup@infocient.de

In einer Live-Demo zeigt Lars Schubert, Geschäftsführer von graphomate, wie innerhalb von 30 Minuten ein ansprechendes Dashboard in SAP Analytics Cloud in der Story 2.0 mit Komponenten von graphomate gebaut werden. graphomate ist Partner von Infocient Consulting und das Webinar wird im Rahmen der InCon 2023 gehalten, der Webinar-Serie rund um SAP Analytics der SAP Consultants von Infocient.

Inhaltsverzeichnis Anzeigen

graphomate GmbH

graphomate wurde vor 14 Jahren von Lars Schubert gegründet und beschäftigt sich mit Visualisierungserweiterungen. Es begann mit Visualisierungslösungen für Xcelsius, es folgten Lösungen für SAP Lumira Designer gefolgt von SAP Analytics Cloud (SAC). Darüber hinaus bietet graphomate seine „graphomate suite“ und „graphomate tiles“ nicht nur für SAC sondern auch für Tableau, Power BI, MS 365 (Excel) und auch für SAP Lumira Designer an. SAP Lumira Designer ist immer noch ein wichtiges Tool, nicht umsonst wurde der Support bis 2029 verlängert.
Alle Komponenten funktionieren plattformübergreifend identisch und ermöglichen eine einheitliche Darstellung der Visualisierungen nach IBCS.

graphomate comments ist die Kommentarlösung für SAC. graphomate entwickelt darüber hinaus auch kundenindividuelle Widgets.

Abb. 1: Unternehmensdarstellung graphomate, Quelle: graphomate GmbH

Kurzvorstellung der graphomate Produkte

Die graphomate suite besteht aus vier Komponenten und ist seit der Einführung der Optimized Design Experience auch in SAC Story 2.0 nutzbar.

graphomate charts: für Charting-Elemente und Charting-Diagramme
graphomate matrix: eine neue Komponente, die flexibel formatiert werden kann und viele visuelle Elemente in ihren Spaltenzeilen ermöglicht. Inzwischen können sparklines, sprich zeitliche Trends und Entwicklungen als Linien, als Bars in dieser Matrix abgebildet werden.
graphomate bubbles: Portfolio-Darstellung für bis zu fünf Kennzahlen

Diese drei Komponenten sind IBCS zertifiziert.

graphomate pictograms: damit lassen sich eigene Grafiken und Icons in die Balken eines Diagramms bringen.

Abb. 2: Darstellung der Produkte der graphomate suite, Quelle: graphomate GmbH

Die graphomate tiles
Die graphomate tiles liegen bisher nur für SAC vor. Mit dieser Kachelkomponente können individuelle Layouts generiert werden.

Im folgenden Beispiel ist auf der Kachel ein Titel zu sehen, ein Liniendiagramm, eine KPI, die mit einem Titel erklärt wird. Das individuelle Layout kann durch das Ziehen von Linien generiert werden. Die entstandenen Felder werden mit Grafiken gefüllt und entsprechend werden die Kacheln gestaltet.
Bei den Kacheln kann auch eine Vorder- und Rückseite definiert werden, um einen Flip-Effekt zu erzeugen.

Abb. 3: Darstellung der graphomate tiles, Quelle: graphomate GmbH

graphomate comments
Diese Kommentierungslösung ist unabhängig vom Modell und kann kontextsensitiv Daten ablegen. Das bedeutet, dass je nachdem, wie Filter gesetzt werden, die Texte abgespeichert werden und dann entsprechend der Filterauswahl wieder angezeigt werden können.

Stand-alone-Comments: frei positionierbar
Titelkommentare: jede Visualisierung kann mit einem Kommentar versehen werden, der als Titel angezeigt wird
Datenpunkt-Kommentare: können auf jedem einzelnen Chart-Element oder Matrixzelle verwenden und abgespeichert werden.
Es gibt eine eigene Userverwaltung, die mit bestehenden Systemen verknüpft werden kann – sehr wichtig.

Abb. 4: Darstellung der graphomate comments, Quelle: graphomate GmbH

Hintergrund: Unterstützung der IBCS

graphomate unterstützt den Ansatz der International Business Communication Standards (IBCS) und findet es sinnvoll,

wenn Tabellen durch visuelle Elemente angereichert sind und damit mehr Verständnis vermitteln
wenn man zeitliche Darstellungen mit horizontalen Achsen und Vergleiche mit vertikalen Achsen abbildet
wenn Szenarien standardisiert abgebildet werden (Ist-Werte schwarz, Plan-Werte hohl und Prognose-Werte schraffiert)
wenn man Abweichungen wie z.B. zum Vorjahr abbilden kann
wenn auf einer Seite verdichtet Informationen abgebildet werden können.

Anwendungsfall – Live-Demo

Ausgangsfrage: Generieren meine Vertriebskollegen Umsätze durch zu hohe Rabatte?
Genutzt werden die Daten, die SAC im Standard ausliefert, allerdings stark erweitert.

Ziel der Live-Demo

In dieser Demo ist Ben Jones ein Verkaufsleiter, der vier Vertriebsangestellte hat und deren Umsätze sehen möchte.

Er möchte die Umsätze nach Jahren filtern können und entsprechende Diagramme erstellen. Die Diagramme sollen als Ausgangspunkt dienen, um einen Vertriebsangestellten auszuwählen und seine Umsätze zu analysieren. Ben Jones möchte die Deckungsbeitragsrechnung für die Produkte sehen und alle Rabatte über 6 Prozent kennzeichnen, indem er einen roten Punkt setzt.

Dieses Modell wird in der Demo live entwickelt werden.

Abb. 5: Das Dashboard zeigt Rabatte an, die über 6 Prozent liegen, Quelle: graphomate GmbH

Das Datenmodell

Das Datenmodell besteht aus einer Import-Datenquelle – keine BW-Live Connection – und einem Kennzahlenmodell mit elf Kennzahlen, die in IST- und PLAN-Werten abgebildet sind.
Daneben gibt es Produktdimensionen, Zeitdimensionen und Kundendimensionen.

Abb. 6: Das Datenmodell mit Kunden-, Zeit- und Produktdimensionen, Quelle: graphomate GmbH

Live-Demo in SAC mit graphomate Widgets

Begonnen wird auf einer leeren Seite in SAC mit Überschrift und Logo, auf der im ersten Schritt das Modell ausgewählt wird. Verwendet wird die „input control“ oder Eingabesteuerung, um nach Jahren zu filtern.

Abb. 7: Filter nach Jahren mit input Control, Quelle: graphomate GmbH

Anschließend fügt Lars Schubert die Übersicht der Vertriebsmitarbeiter nach Umsatz hinzu, indem er über „insert“ – „Custom Widgets“ eine graphomate Chart-Komponente auswählt.

Abb. 8: Auswahl der graphomate Chart Komponente, Quelle: graphomate GmbH

Für das gewählte Datenmodell werden im Chart-Builder (Oberfläche von graphomate) die Daten ausgewählt, die in dieser Komponente visualisiert werden sollen.

Für Measures wird „Revenue“ oder Umsatz ausgewählt, für die Kategorien, die auf den Achsen abgebildet werden, werden die „Sales Representatives“ oder Vertriebsmitarbeiter ausgewählt.

Damit erhalten wir die erste Visualisierung der Umsätze der Vertriebsmitarbeiter.

Abb. 9: Erste Visualisierung der Umsätze im Balkendiagramm, Quelle: graphomate GmbH

Über „Series“ können entsprechend der Version zwei Datenserien ausgewählt werden, nämlich „Actuals“ und „Budgets“. So kann ohne große Arbeit die Umsatzdatenserie in PLAN- und IST-Werten abgebildet werden.

Mit Hilfe der Lösung „Top n“ kann man nach den Vertriebsmitarbeitern sortieren.

Abb. 10: Sortierung der Vertriebsmitarbeiter nach Umsatz, Quelle: graphomate GmbH

Im Beispiel werden die Eingabesteuerungen angepasst, um die Darstellung der Daten zu verbessern, und es wird erklärt, wie die Formatierung der Zahlen und Prozentwerte bearbeitet wird.

Lars Schubert geht darauf ein, wie Elemente wie Titel und Achsenbeschriftungen hinzugefügt und angepasst werden. Schließlich erfahren wir, dass das fertige Diagramm gespeichert und möglicherweise als Vorlage für eine Excel-Lösung verwendet werden kann.

Erstes fertiges Chart mit Abwechungsdarstellung

Abb. 11: Erstes fertiges Chart mit Visualisierung der sortierten Umsätze pro Mitarbeiter und Abweichungen, Quelle: graphomate GmbH

Für das zweite Chart mit der Deckungsbeitragsrechnung wird das erste Chart kopiert und entsprechend angepasst.

Aus dem Modell werden die Elemente des Deckungsbeitragsschemas ausgewählt. Es werden verschiedene Kostenelemente wie Versandkosten, Materialkosten und Fixkosten berücksichtigt, um den Deckungsbeitrag zu berechnen.

Lars Schubert erklärt, wie die Daten interpretiert werden und wie bestimmte Elemente ein- oder ausgeblendet werden können, um die Darstellung zu optimieren, wie mit einem Wasserfallmodell.

Deckungsbeitragsrechnung mit graphomate Builder

Abb. 12: Auswahl der Komponenten zur Berechnung der Deckungsbeitragsrechnung, Quelle: graphomate GmbH

Optimierte Darstellung mit 24 Pixeln

Deckungsbeitragsrechnung optimiertes Chart

Abb. 13: Optimierte Darstellung mit Wasserfallmodell, Quelle: graphomate GmbH

Als letzte Komponente wird die graphomate matrix ausgewählt und größer gezogen.

In der Matrix werden verschiedene Kennzahlen wie Umsatz und Bruttoumsatz für die Produkte betrachtet und visualisiert. Auf Basis dieser Daten können verschiedene Kalkulationen wie Abweichungen einfach oder prozentual berechnet werden.
Dabei erklärt Lars Schubert auch die Berechnung und Darstellung der Prozentwerte für Rabatte (Discount).

Abb. 14: Einfügend der graphomate matrix, Quelle: graphomate GmbH

Gezeigt wird, wie man die Formatierung anpassen kann, um die Daten übersichtlicher darzustellen und Schubert demonstriert, wie nicht benötigte Elemente ausgeblendet werden können (Gross Revenue und delta), um die Darstellung zu vereinfachen.
Im letzten Schritt fügt er den roten Punkt über „Scripted Formatting“ ein.

Abb. 15: Auswahl des Online Editors https://public.graphomate.com/cfl-editor/, Quelle: graphomate GmbH

Dies ist Teil einer benutzerdefinierten Formatierungssprache. Lars Schubert zeigt, wie ein einfacher Beispielcode aus dem Online-Editor verwendet werden kann, um rote Punkte bei bestimmten Prozentwerten zu platzieren.

Abb. 16: Editor mit Beispielcodes, Quelle: graphomate GmbH

Es gibt einen einfachen Editor mit einfachen Beispielen. Dieser Code kann kopiert und eingesetzt werden, so dass die roten Punkte erfolgreich angezeigt werden.

Es können noch einige Anpassungen vorgenommen werden, wie das Hinzufügen weiterer Daten, das Vergleichen der Jahre 2021 und 2022 und das Hinzufügen der Visualisierung der Abweichungen durch ein weiteres Balkendiagramm.

Abb. 17: Fertige Matrix mit Visualisierung der Abweichungen, Quelle: graphomate GmbH

Für die Interaktion zwischen den drei Charts kann man das Tool „Linked Widget Diagram“ verwenden.
Es definiert, welche benutzerdefinierte Diagrammkomponente als Quelle für die Filterung der Ziele dienen soll.

Abb. 18: Linked Widget Tool, Quelle: graphomate GmbH

Lars Schubert wählt bestimmte Diagramme aus und stellt sicher, dass sie als Filterquelle für andere Diagramme fungieren. Denn durch Auswahl von Datenpunkten in einem Diagramm werden entsprechende Daten in einem anderen Diagramm aktualisiert.
Bei der Auswahl von Matt Johnson zeigt sich in der Matrix, dass es keinen roten Punkt gibt.

So können spezifische Daten analysiert und gefiltert werden.
In Excel kann zudem ein Template namens „Incon1“ ausgewählt werden, das genau das gleiche ist, wie das, was gerade in SAP Analytics Cloud erstellt wurde. Außerdem besteht die Möglichkeit, die Daten interaktiv in PowerPoint zu präsentieren, was eine einfache Präsentation ermöglicht.

Filterung über Linked Widget nach einem Vertriebsmitarbeiter

Abb. 19: Nach der Verlinkung Filterung nach einem Vertriebsmitarbeiter möglich, die sich in allen Charts anpasst, Quelle: graphomate GmbH

So können spezifische Daten analysiert und gefiltert werden.

In Excel kann zudem ein Template namens „Incon1“ ausgewählt werden, das genau das gleiche ist, wie das, was gerade in SAP Analytics Cloud erstellt wurde. Außerdem besteht die Möglichkeit, die Daten interaktiv in PowerPoint zu präsentieren, was eine einfache Präsentation ermöglicht.

Fragen und Antworten

„Funktionieren die Charts auch auf den BW Live Verbindungen?“
Es funktioniert auch in einer BW-Live-Verbindung. Ich habe nur Unwägbarkeiten ausräumen wollen. Die Unwägbarkeit, die heute auftrat, war wirklich das Werkzeug ClickMeeting, weil eigentlich alles auf meiner Seite lief und BW-Live-Verbindungen genauso funktionieren. Das ist für uns gekapselt, weil wir nicht unterscheiden, was live ist oder was ein importiertes Datenmodell ist.
„Ist es ebenfalls möglich über custom widgets die Balkenunterbrechung detaillierter auszugestalten? Hintergrund ist, dass im SAC-Standard die Unterbrechung ziemlich willkürlich erfolgt und Charts mit Ausreißern dadurch nur semi-gut abgebildet werden?“
Ja, es gibt eine Ausreißerdarstellung, so dass bei großen Werten, wenn sie Ausreißer sind die Darstellung, die kleinen Werte, alle stark an den Elementen und Achsen hängen. Es gibt dafür eine Ausreißerdarstellung.
„Werden bei Live-Verbindungen dann wirklich die UIDs verwendet oder schafft es die Komponente auch den Text anzuzeigen für eventuelle zusätzliche Berechnungen? Oder macht es mehr Sinn die Berechnungen dann komplett in die Query zu packen?“
Komplizierte Frage. Wir müssten das im Detail besprechen. Ja, die UIDs werden angezeigt, aber natürlich nicht in der fertigen Anwendung verwendet und angezeigt, sondern man kann sie nur anzeigen lassen, um damit die Berechnungen vorzunehmen.
Zur zweiten Frage: es ist immer sinnvoller, Kalkulationen in der Query zu machen. Ich würde sagen, im Allgemeinen sollten Sie Ihre Berechnungen immer in der Query durchführen. Die Berechnungen, die wir dort machen, sind umfangreich, und diese sollten natürlich bei einem kleineren Datensatz die zweite Wahl sein. Was performanter ist, ist schwer zu sagen.
„Wie nehmen Sie den Filter auf den einzelnen Mitarbeiter wieder raus?“
Einfach in das Chart klicken, nicht auf ein Element, sondern auf ein freies Feld klicken.
„Ist es möglich, über Custom Widgets Zwischenstufen/Level einer Hierarchie auszublenden? Das geht leider aktuell im SAC Standard nicht?“
Es gibt zwei verschiedene Arten von Hierarchien. Einerseits gibt es Hierarchien, die sich implizit aus mehreren Dimensionen entwickeln. Das habe ich gerade erwähnt. Andererseits gibt es die sogenannten externen BW-Hierarchien. So nenne ich sie zumindest. Ich weiß nicht, ob der Begriff allgemein noch gültig ist. Sie stellen ihr eigenes Modell aus dem BW dar und bilden ihre eigene definierte Hierarchisierung ab. Wir können mit letzterer arbeiten.
Mittlerweile haben wir das originäre Datenbinding-User-Interface der SAC mit unseren Custom Widgets verknüpft. Nun können einzelne Hierarchielevel dargestellt werden.