Visualisierung von Geschäftsgrafiken. Dr. Wolfram Schroers

Transkript

1 Visualisierung von Geschäftsgrafiken Dr. Wolfram Schroers

2 iphone & ipad im geschäftlichen Umfeld Ein Bild sagt mehr als tausend Worte: Charting/Business-Reporting unter ios PowerPlot Live-Demo Design der Bibliothek Konkretes Beispiel: Animationen

3 Enterprise-Umfeld

4

5 Safety first!

6 Charting unter ios Business Reporting

7 ios-native Lösungen WebKit/Javascript-Lösungen Cloud/Server/Online-basierte Lösungen

8 PowerPlot

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23 Live-Demo

24 Web service data_server iphone app pp_client View controller App main screen Data model OurProfits Chart view WSChart *chart "Update" button UIButton

25 Design der Bibliothek

26

27 WSChart Subklasse von UIView Instanz ist Grundlage eines Charts Verwaltet Instanzen von WSPlotController Factory-Methoden mittels Categories Alternativ: Manuelle Konfiguration

28 WSChart Factory WSChart *barchart = [WSChart barplotwithframe:aframe withdata:datasource withstyle:kchartbarplain withcolorscheme:kcolorwhite];

29

30 WSPlotController Unterstützt automatische Updates Jeder nur ein Kreuz View! Für Custom-Implementationen: Kann Gesture-Recognizer verwalten

31 Instance of WSDatum Properties: value, valuex, annotation, [ ] Instance of WSDatum Properties: value, valuex, annotation, [ ] Instance of WSData Instance of WSDatum Properties: value, valuex, annotation, [ ] 1:n relation Instance of WSDatum Properties: value, valuex, annotation, [ ] [ ]

32 Das datad Objekt + (WSData *)projectcostbad { float cashflow[12] = { 100, 81, 65, 75, 73, 87, 92, 118, 129, 114, 135, 139 }; WSData *result = [WSData datawithvalues:[wsdata arraywithfloat:cashflow withlen:12]]; return [result indexeddata]; }

33 datad: Binning

34 datad: Binning WSData *bardata = [[DemoData electionresults2009] indexeddata]; WSData *binned = [WSBinning binwithdata:bardata binnumber:5 withselector:@selector(value) withrange:narangemake(0.0, 50.0)];

35 Binning: Wozu? We are seeing things that were 25 standard deviation events, several days in a row. CFO von Goldmann-Sachs, August 2007

36 Binning: Wozu? We are seeing things that were 25 standard deviation events, several days in a row. CFO von Goldmann-Sachs, August 2007 Undenkbar unwahrscheinlich?

37

38

39

40 Black-Swan Szenario

41 datad: Funktionale Operationen

42 datad: Funktionale Operationen Operationen wie auf einem NSArray (mittels Objective-C 2.0 Blocks): Mapping, Sorting, Filtering

43 datad: Funktionale Operationen Operationen wie auf einem NSArray (mittels Objective-C 2.0 Blocks): Mapping, Sorting, Filtering Weitere Operationen: Mapping (mehrere WSData WSData) Reduction-Operationen auf WSData

44 Das WSPlot Objekt Abstrakte Basisklasse, instanziiert werden: WSPlotAxis WSPlotData WSPlotBar [ ]

45 Komplexes Beispiel

46 Schritt 1 // Step 1: Basic chart with coordinate system and data points with uncertainties. WSChart *formfactorchart = [WSChart lineplotwithframe:[chart frame] withdata:[demodata formfactormeasured] withstyle:kchartlinescientific withaxisstyle:kcsarrows withcolorscheme:kcolorlight withlabelx:@"virtuality" withlabely:@"f1 form factor"]; WSPlotData *dataplot = (WSPlotData *)[[formfactorchart plotatindex:0] view]; [dataplot setlinestyle:klinenone]; [dataplot setsymbolstyle:ksymboldiamond]; [dataplot setsymbolsize:10]; Koordinatenachsen, Datenpunkte mit Fehlerbalken, Konfiguration

47 Schritt II // Step 2: The best fit line. [formfactorchart generatecontrollerwithdata:[demodata formfactorfit] withplotclass:[wsplotdata class] withframe:[chart frame]]; WSPlotData *bestfit = (WSPlotData *)[[formfactorchart lastplot] view]; [bestfit setlinewidth:2]; [bestfit setlinecolor:[uicolor blackcolor]]; [bestfit setsymbolstyle:ksymbolnone]; Hinzufügen einer Linie (enthält: Best-Fit Linie)

48 Schritt III // Step 3: The uncertainty error band. [formfactorchart generatecontrollerwithdata:[[demodata formfactorfit] contourwitherror] withplotclass:[wsplotregion class] withframe:[chart frame]]; WSPlotRegion *errorband = (WSPlotRegion *)[[formfactorchart lastplot] view]; [errorband setfillcolor:[uicolor graycolor]]; [errorband setlinecolor:[uicolor clearcolor]]; Hinzufügen des Fehlerbandes

49 Schritt IV // Ensure proper ordering of plots. [formfactorchart exchangeplotatindex:0 withplotatindex:3]; // Rescale all axis and set the ticks and labels. [formfactorchart autoscaleallaxisx]; [formfactorchart autoscaleallaxisy]; [[formfactorchart getplotaxis] autoticksxd]; [[formfactorchart getplotaxis] setticklabelsx]; [[formfactorchart getplotaxis] autoticksyd]; [[formfactorchart getplotaxis] setticklabelsy]; Fehlerband nach ganz unten bewegen Achsen skalieren und automatisch nummerieren

50 Das wars schon!

51 Implementation: Animationen

52 WSChart vs. UIView WSChart ist Unterklasse von UIView: D.h. beide Animationen können unabhängig kombiniert werden! WSChart: Animationen sind Instanzmethoden (keine Klassenmethoden)! WSChart bietet Callback während der Animation, daher maximal flexibel. Feature: Keine Inkonsistenzen!

53 Animationen

54 Animationen

55 Animationen // Setup the animation. [self.chart dataanimatewithduration:2 animations:^{ // Update the datad object. // Update the coordinate system(s). }];

56 WSChart to ~t duration current~c from ~f ~c = ~ f + p ~ t ~ f,p=[0...1]. Variation von p durch NSTimer

57 WSChart to ~t Anwendung von map: auf WSData Objekte! from ~f ~c = ~ f + p duration ~ t current~c ~ f,p=[0...1]. Variation von p durch NSTimer

58 Ease[In Out InOut] Apple hat es vorgemacht: Scharfes Anfahren&Bremsen ist out/nicht in! Smoothing-Funktionen: s(p) = 1 2 p! f(p) 1 + tanh 8 < : s(p), 2s(1/2p), 2(s(1/2p +1/2) 1/2).,C 1/2. C 1 x x

59

60

61

62

63 Ausblick