Grafische Repräsentation von Geschäftszahlen in einem ERP-System

Transkript

1 Grafische Repräsentation von Geschäftszahlen in einem ERP-System SEMINARVORTRAG VON ANNA OT TERSBACH

2 Motivation Produkte der Firma MOSER sind ERP-Systeme, speziell geht es um MOSER easy ERP-System: unterstützt sämtliche Geschäftsprozesse, die in einem Unternehmen ablaufen Speicherung von Geschäftszahlen in ERP-Systemen Inhaber der Unternehmen möchten wissen, wie die wirtschaftliche Lage ihres Unternehmens ist Erleichterung durch grafische Darstellung der Geschäftszahlen Grafische Darstellung von Geschäftszahlen durch Diagramme 2

3 Inhalt Geschäftszahlen Diagrammtypen Kundenanforderungen Produktanforderungen Bibliotheken Einbettung & Ausblick 3

4 Geschäftszahlen Geschäftszahlen sind Daten, die die wirtschaftliche Lage eines Unternehmens beschreiben Synonym: betriebswirtschaftliche Kennzahl Zusammenfassung von quantitativen Informationen, die in Zahlen ausgedrückt werden können Gliederung von Kennzahlen entweder statistisch, inhaltlich oder zeitlich Kennzahlen werden dazu eingesetzt, um Entscheidungen zu unterstützen, Maßnahmen zu steuern und zu kontrollieren Kennzahlen in der Übersicht sind nur unternehmensintern (Bibliographisches Institut GmbH, 2015; Springer Gabler Verlag, Kennzahlen, 2015) 4

5 Geschäftszahlen - Datentypen Darstellungsart der Geschäftszahlen ist abhängig vom Datentyp Nominalskalierte Merkmale: lassen sich nur in ihren Ausprägungen unterscheiden Ordinalskalierte Merkmale: Ausprägungen lassen sich unterscheiden, in sinnvolle Reihenfolge bringen Metrisch skalierte Merkmale: Abstände zwischen den Ausprägungen lassen sich sinnvoll interpretieren Zusätzliche Unterscheidung zwischen diskreten und stetigen sowie qualitativen und quantitativen Merkmalen (Fahrmeir, Künstler, Pigeot, & Tutz, 2010) 5

6 Kreisdiagramm Spiegelt mengenmäßigen Anteil einer Teilmenge im Verhältnis zu Gesamtmenge wider Verkauf Verkauf (innen) & Einkauf (außen) Daten sind in Kategorien eingeteilt Nominal- oder ordinalskalierte Daten Nachteil: geringe Informationsdichte Spezielle Form: Donut- oder Ringdiagramm 1. Quartal 2. Quartal 3. Quartal 4. Quartal 6

7 Säulen- / Balkendiagramm Unterschied zwischen Säulen- und Balkendiagramm in Ausrichtung ihrer Balken Darstellung mehrerer Datenreihen in gruppierten oder gestapelten Diagrammen Nominal- oder ordinalskalierte Daten Spezielle Form: Stabdiagramm, Histogramm Säulendiagramm Daten 1 Balkendiagramm Kategorie 4 Kategorie 3 Kategorie 2 Kategorie Datenreihe 3 Datenreihe 2 Datenreihe 1 7

8 Liniendiagramm Visualisieren Trends für einen bestimmten Zeitraum Liniendiagramm Entwicklung im Zeitverlauf Metrische Daten Spezielle Form: Flächendiagramm Datenreihe 1 Datenreihe 2 Datenreihe 3 8

9 Y-Werte Streudiagramm Auch Punktdiagramm oder Scatterplot Messwerte in einem kartesischen Koordinatensystem dargestellt Informationen gelangen ungefiltert zu dem Betrachter Aussage ist nicht immer auf den ersten Blick zu erkennen 3,5 3 2,5 2 1,5 1 0,5 Streudiagramm Metrische Daten X-Werte 9

10 Spezielle Diagrammtypen Teilweise werden spezielle Kenntnisse benötigt um Diagramme zu verstehen, nur bedingt einsetzbar Sparklines Bullet Graph Box Plots Karten Icons Tabellen Product Product Monthly Sales Volume 2015 unterer Whisker Sales Volume 2014 unteres / Sales Volume 2015 / Sales Volume 2015 / oberes A Ausreißer Median Quartil A B B C Quartil C D D oberer Whisker Quelle: 10

11 Kundenanforderungen Zielkunden für MOSER easy: Existenzgründer, Betriebe mit max. 3 Mitarbeitern nur firmeninterne Kennzahlen, keine branchenübergreifenden Kennzahlen Geschäftsführer bzw. Inhaber des Unternehmens beschäftigt sich mit den Geschäftszahlen Verschiedene Geschäftszahlen wurden zur Darstellung ausgewählt Umsatzentwicklung Anteil einzelner Kunden am Gesamtumsatz Anzahl der Kunden nach Regionen 11

12 Kundenanforderungen - Auswertung Geschäftszahlen wurden mit Kenntnissen zur Darstellung untersucht Beispiel: Anteil der einzelnen Kunden am Gesamtumsatz Merkmalsausprägung: Umsatz nach Kunden Namen der Kunden haben keine natürliche Ordnung -> nominalskaliertes Merkmal Relative Häufigkeiten werden abgetragen Darstellung in Kreisdiagramm oder Säulen- bzw. Balkendiagramm Anzahl der Kunden darf nicht zu groß werden 12

13 Produktanforderungen ansprechendes, modernes Design Benutzerinteraktion soll möglich sein Responsives Webdesign Bibliothek sollte quelloffen und verbreitet sein Verwendung von HTML5 Einbindung in Projekte mit AngularJS 13

14 Bibliotheken - Kriterien unterstützte Diagrammtypen Design (Animation, Interaktion, responsives Design) Interaktion mit AngularJS, AngularJS-Direktiven Verwendung der Bibliothek Dokumentation der Bibliothek Lizensierung Relevanz auf dem Markt 14

15 Bibliotheken - Recherche D3.js Chart.js Chartist.js C3.js Ember Charts NVD3 Plottable.js uvcharts sehr mächtig Linien-, Säulen-, Kreisdiagr. Linien-, Säulen-, Kreisdiagr. Basiert auf D3.js Basiert auf D3.js und Ember.js Basiert auf D3.js Basiert auf D3.js Basiert auf D3.js beliebige grafische Darstellungen Interaktiv Nicht interaktiv Linien-, Säulen-, Streu-, Kreisd. u.v.m.; Tacho Säulen-, Balken-, Kreis-, Streud. Standarddiagramme + Bullet Chart, Box Plot Linien-, Säulen-, Kreis-, Streudiagr. Säulen-, Flächen-, Kreis-, Liniendiag. keine vorgefertigten Diagramme Responsiv Responsiv Responsiv, interaktiv Interaktiv Interaktiv Interaktiv, Design einfach Interaktiv, aber keine Klickevents große Resonanz auf Stack Overflow über HTML- Element Canvas Zugehörige AngularJs- Direktiven Daten im JSON- Format Eingeschränkte Funktionen, wenig verwendet Detaillierte Einstellung Wenig Resonanz Wenig Resonanz 15

16 Bibliotheken - NVD3 AngularJS-Direktive Angular-NVD3 wurde untersucht Daten und Optionen können in einfacher Syntax im JSON-Format im Controller angegeben werden Struktur der Daten für NVD3 und Direktive abhängig vom Diagrammtyp Höhe des Diagramms muss explizit festgelegt werden 16

17 Bibliotheken - NVD3 17

18 Bibliotheken C3.js Automatische Anpassung der Diagrammgröße an das umschließende HTML- Element an Struktur der Daten unabhängig von Diagrammtyp Eigene Liste mit x-werten für jede Datenserie möglich Funktionell und optisch eingeschränkt AngularJS-Direktive C3-angular-directive: Probleme bei Achsenformatierung und Datenformat Nicht alle Optionen von C3.js wurden umgesetzt 18

19 Bibliotheken C3.js 19

20 Einbettung Einbettung grafischer Darstellung der Geschäftszahlen in bestehende Software Zuweisung von Eigenschaften an Steuerelemente im Formulardesigner Hinterlegung der Diagrammeinstellungen durch XML-Code im Diagrammsteuerelement 20

21 Einbettung Client Server HTML HTML Steuerelemente mit XML-Code JavaScript + AngularJS-Direktive (Controller) Daten JSON Datenquellen 21

22 Einbettung - Konzept Konzept folgt dem Model-View-Controller-Muster Trennung der Daten selbst von Datenverwaltung und Darstellung der Daten Codeaustausch wird erleichtert Model Datenquellen View HTML- Element Controller AngularJS- Controller Erzeugung des Diagramms durch Bibliothek unter Berücksichtigung von Daten und HTML-Element 22

23 Ausblick Auswahl einer Bibliothek Konzept implementieren Festgelegte Kennzahlen im Formulardesigner entwerfen 23

24 Vielen Dank für Ihre Aufmerksamkeit!

25 Literaturverzeichnis Bibliographisches Institut GmbH (Hrsg.). (2015). Duden Geschäftszahl. Abgerufen am 19. Oktober 2015 von Duden: Fahrmeir, L., Künstler, R., Pigeot, I., & Tutz, G. (2010). Statistik - Der Weg zur Datenanalyse (7. Ausg.). Berlin, Heidelberg: Springer-Verlag. Springer Gabler Verlag (Hrsg.). (2015). Kennzahlen, 10. Version. Abgerufen am 19. Oktober 2015 von Gabler Wirtschaftslexikon: 25