1. SAP Crystal Dashboard Design
SAP UA
Version: 1.1
Author: Sonja Hecht, UCC Munich
Product
SAP Crystal Dashboard Design, personal edition
Level
Undergraduate
Beginner
Abstract
This module provides an introduction on the topic dashboard design using SAP Crystal Dashboard Design.

2. Agenda I
Introduction
SAP Crystal Dashboard Design overview
Creating the first dashboard

3. Dashboard definition
“A dashboard is a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance”
(Few, 2004)
Why should dashboards be used in the decision making process?
The ability to receive, process and remember information can be increased by the use of visual appliances
But:
To effectively support decision makers, problem representation has to match the task that is to be performed

4. Example of a spreadsheet
-> Here you can see sales data in a spreadsheet…
Source:

5. Example of a dashboard
-> Here you see exactly the same data visualized as dashboard
Source:

6. Other dashboard examples
Daily executive report
Summarizes the daily status of a hospitality company's key performance indicators across different locations
Gives the executive an interactive view of the daily and monthly metrics
Standard income statement
Highlights a new way of presenting typical income statements
By selecting a region from a map, the viewer can see its P&L and net income trend over the last six quarters and compare it with the target values
Source:

7. Display media for dashboards
Medium
Description
Example
Graphs
Visualize quantitative data, e.g.
one single key measure or data series
Images
Useful if images provide additional information
Icons
Visualization of alerts or status (e.g. on/off)
Drawing objects
Arrange and connect different elements on the dashboards, e.g. to visualize processes or hierarchical relationships between elements
Text
Used for labels or to report single measures on the dashboard
USD
Organizers
Arrange related business information, e.g. as tables or geographically in maps
Source: adapted from Few (2006), p. 124 ff

8. Evolution of Dashboards
Evolution of Automobile Dashboards versus Business Dashboards:
Automobile Dashboards
Business Dashboards
Display:
Simple Lamps
Function:
-Indication of engine issues
Display:
Simple Charts
Function:
-Simple monitoring of some business areas
First Generation
Display:
Lamps
Gauges
Odometers
Function:
Indication of engine issues
Measure fuel, etc.
Measure speed, distance
Display:
Advanced Charts
Gauges & Indicators
Tables
Function:
Advanced monitoring
Drill down to analyze
Monitor key metrics
Second
Generation
Adapted from Rasmussen/Bansal/Chen (2009), p.5
-> First dashboards were a set of graphs and indicators
-> Today dashboards are more versatile, e.g. by integrating strategy maps and scorecards
Display:
Lamps
Gauges
Odometers
GPS
Function:
Indication of engine issues
Measure fuel, speed, dist.
Show route & destination
Display:
Advanced Charts
Gauges & Indicators
Tables
Scorecards
Strategy Maps
Function:
Advanced monitoring
Drill down to analyze
Monitor key metrics
Monitor tactics
Monitor strategy
Third
Generation

9. Few information, simple display mechanisms, static snapshots
Dashboard types I
Strategic Dashboards
Used by executives
Quick overview on the health of the business, including major high-level measures
Few information, simple display mechanisms, static snapshots
Analytical Dashboards
Used by analysts
Support interaction with data, e.g. drill-down
Complex data, sophisticated display mechanisms, static snapshots
Operational Dashboards
Used to monitor operations
Support alerting for critical events, interaction with data
Detailed data, simple and clear display mechanisms, real-time data
Source: (Few 2006, p )

10. Layers of information Summarized Graphical View Top Layer
Purpose: Monitor key performance metrics
Display: Graphical indicators, numbers, text
Technology: Dashboards, scorecard, portals
Top Layer
Multidimensional View
Purpose: Explore information from multiple dimensions
Display: Interactive charts and tables
Technology: OLAP, interactive reports
Middle Layer
Detailed Reporting View
Purpose: Examine details before taking action
Display: Table or report in separate window
Technology: Operational reports, data warehouse queries
-> User can peel back layers of information to get to the root cause of a problem.
-> Each successive layer provides additional details, views and perspectives to understand a problem and to identify the steps that have to be addressed.
-> Monitor, analyze, examine
Bottom Layer
Source: Eckerson (2006), p. 15

11. Dashboard types II
Dashboard versus Portal
Portal = Focus on the integration of different contents under one user interface
Dashboard = Focus on the compression of important facts and figures on one single screen
Dashboard versus Scorecard
A scorecard is a specific dashboard including Key Performance Indicators (KPIs), usually used on a strategic level

12. The New Intelligence Platform of SAP
Please check sdn.sap.com for latest version
SAP Crystal Dashboard Design (formerly Xcelsius) is
the flagship product for
dashboarding and visualization
Rapid development
of dashboards by
drag and drop
Replacing SAP Bex
Web Application
Designer
Connectivity through XML and webservice
connectors
Source: (SAP AG 2009)

13. Agenda
Introduction
SAP Crystal Dashboard Design overview
Creating the first dashboard

14. SAP Crystal Dashboard Design overview
Building dashboards for different purposes and different hierarchical levels or functions, including dynamic charts and graphs, data presentations and visual what-if scenarios
Data presentation is based on Adobe Flash, export to different applications including PowerPoint, Acrobat 9, Adobe AIR, Adobe Flash, HTML, Business Objects Platform
Dashboards use static data from Microsoft Excel spreadsheet models or live corporate data sources linked using various connectors
Available connectors: Query as a Web Service (QaaWS), Web Service Connections, XML Data Connections, Excel XML Map, Live Office,…

15. The Workspace Canvas Area Component Browser Object Browser
Embedded Spreadsheet
Properties Panel

16. Design time & Run time Design time Run time Workspace Visualization
Generate dashboard
(.swf file with internal data model)
Optional: Dashboard (.swf file) deployed on corporate web server
Web Server
Visualization
Design visualization
Data binding Data connectivity
Workspace
Business Logic
Dashboard is opened on user‘s machine
Spreadsheet model
Client
Data Source
Optional: Dashboard connects to data source to refresh data
OLAP
XML
RDBMS
Client

17. SAP Crystal Dashboard Design and the MVC pattern
Controller
View (before adjustment)
View (after adjustment)
Model

18. Visual components
Chart components provide a range of different chart types like line, pie, bar, area, radar, and tree map chart
Container components group and display other components
Selector components are used to create a visualization with multiple options to select from
Single value components are used to add user interactivity to visualizations, these components are linked to a single cell in the spreadsheet
Map components create visualizations with geographical representations that can display data by region
Text components are used for placing labels and including text into a visualization

19. Agenda
Introduction
SAP Crystal Dashboard Design overview
Creating the first dashboard

20. Creating dashboards
Three steps to create a new dashboard:
Create the spreadsheet model
Import existing spreadsheet model or
Create new spreadsheet model with Excel functionality
Build the visualization
Select suitable components from the visualization library
Data binding
Publish the dashboard
Export to PPT, Word, Adobe, SWF, Business Objects …

21. Import spreadsheet model
1. Select Data -> Import…
2. Select existing Excel file …
3. Your business model is now available in the embedded spreadsheet

22. Select visual components
1. Select a pie chart from the component browser
2. Move the component using drag and drop onto the canvas

23. Properties and data binding
1. Double click on the component to open the properties panel
2. Edit title of the component: Use static values or dynamic values from spreadsheet model
3. Bind data from spreadsheet model to the component

24. Properties panel Title, subtitle
Selection of data source, data binding
Adding drill-down capability for charts
Settings for the visualization of the component
E.g. visibility of component, scaling of axis, animation and
effects
Settings for the appearance and formatting of components
E.g. layout, text, and color of component
Settings for alerts for a component
E.g. definition of the number of alert colors used, or target
limits

25. Publish dashboard
1. Save spreadsheet model and visualization as *.xlf file
2. Export as e.g. PDF or other file type
3. Launch Dashboard

26. Agenda II
Dashboard design
Designing spreadsheet models
Basic components for visualization
Charts components
Single value components
Text components
Alerts
Selector components
Dashboard layout

27. What type of dashboard should be designed?
Dashboard design
Dashboard design
What type of dashboard should be designed?
What are the relevant data and KPIs that should be visualized?
What are appropriate elements for visualization?
How should user navigation look like?
How is the dashboard supplied with data?

28. Applying the Gestalt Principles of visual perception to dashboards:
Dashboard design
Applying the Gestalt Principles of visual perception to dashboards:
Proximity: Objects that are located near each other are perceived as belonging to the same group.
Similarity: Objects that are similar in color, size, shape, and orientation are perceived as belonging to the same group.
Enclosure: Objects that are enclosed by a visual border, e.g. a line, are perceived as belonging to the same group.
Closure: Open structure (e.g. shapes with open ends) are perceived as closed whenever possible.
Continuity: Objects that appear to form a continuation of one another are perceived as belonging to the same group.
Connection: Objects that are connected (e.g. by are line) are perceived as belonging to the same group.
The work of the Gestalt School of Psychology, beginning in 1912, resulted in a set of Gestalt principles of perception that reveal visual characteristics enabling us to group objects together
Source: Few (2006), p

29. Dashboard design principles I
Reduce the non-data pixels, by eliminating unnecessary non-data pixels and de- emphasizing the remaining non-data pixels
E.g. eliminate unnecessary third dimension of depth on charts
E.g. eliminate unnecessary grid lines in bar graphs
E.g. eliminate variations in color that don’t encode any meaning
Source: (Few 2006, p )

30. Dashboard design principles II
Enhance data pixels by eliminating unnecessary data pixels and highlighting most important data pixels
Remove data that is less relevant
Condense data by summaries and exceptions
Emphasize important data by visual attributes like color intensity, size, line width
Emphasize important data by its position on the dashboard: top-left and center are sections with greatest emphasis
Emphasized
Neither emphasized nor de-emphasized
Emphasized
Neither emphasized nor de-emphasized
De-emphasized
Different degrees of visual emphasis. Source: (Few 2006, p. 114)

31. Agenda
Dashboard design
Designing spreadsheet models
Basic components for visualization
Charts components
Single value components
Text components
Alerts
Selector components
Dashboard layout
Case study: Global Sales Overview

32. Spreadsheet models
Using Excel functionality
SAP Crystal Dashboard Design supports a variety of Excel functions (about 160) and formulas
Mathematical, statistical functions
Text-related functions
Date/Time related functions
Spreadsheet formulas
Complete list of supported Excel functions available in SAP Crystal Dashboard Design Help
But: not all Excel functionality is available in SAP Crystal Dashboard Design

33. Spreadsheet models
Using Excel functionality
Mathematical, statistical functions
Calculation of maximum value:
Text-related functions
Concatenate Strings:
Date/Time related functions
Provide current data: TODAY()
Provide current time and date: NOW()

34. Spreadsheet models Design guidelines
Use different sheets if your spreadsheet includes many different tables
For complex models use the first sheet for documenting your spreadsheet model
Use colors and labels in your model for better readability
Do not start in the first row and column, leave space for enhancements
Apply formatting to your spreadsheet before you start building the visualizations

35. Spreadsheet models
Limitations
In case you re-import spreadsheets with renamed sheets, any bindings to cells in the renamed sheet will be lost
Complexity of calculation being performed in the spreadsheet affect the performance of the visualization
Only one single Excel workbook can be embedded in a dashboard, references to remote workbooks are not possible

36. Agenda
Dashboard design
Designing spreadsheet models
Basic components for visualization
Charts components
Single value components
Text components
Alerts
Selector components
Dashboard layout

37. Chart components
Chart overview
Examples:
Line Chart: showing the tendency over a period of time, e.g. stock prices
Pie Chart: showing relative shares compared to a certain total, e.g. relative share of revenue for a product compared to total revenue
Bar Chart: visualization of rankings, e.g. TOP 10 products by revenue
Column Chart: showing developments over a period of time, e.g. revenue by month
Radar Chart: plotting multi-dimensional sets of data using several axis, e.g. compare different aspects of stock like price, volume, price to earning ratio, etc.

38. Column chart Chart components Step-by-step: Drag chart to the canvas
Adjust titles
Bind data
Adjust scaling
Adjust layout

39. Column chart - general Chart components
Title, subtitle, axis values can include fixed value or values from the spreadsheet model
Bind data:
Use Range option if data is a range of continuous cells
Use Series option if data series are segregated

40. Column chart – scaling Chart components Manual Scaling:
If data doesn’t require the scales to change
Auto Scaling:
If data feeds of the chart change and scaling has to be adjusted automatically

41. Column Chart – layout Chart components
Adjust the color of your slices, chart background, title or plot area
Adjust format for your titles
Adjust data type of the values

42. Single value components
Single value components overview
Can be used for adding user interactivity to visualizations
Components are linked to a single cell in the spreadsheet
If cell content is a formula, component is an output component, no modifications possible
If cell content includes a plain value, component is an input component, modification possible

43. Single value components
Gauges
Gauges as input component represent a variable that can be modified to affect other components. By dragging the needle users can interact with the Gauge to change the value
Gauges as output components represent a value that changes and moves the needle if underlying data changes

44. Single value components
Gauges: Data binding and scaling
Bind data to a single cell
Set minimum and maximum values, e.g. 0 and 1 if a percentage between 0 and 100% is displayed

45. Text Components
Overview text components
Placing labels and typing text into the dashboard
Input Text Area: input multiple lines of text
Label: add text to the dashboard, e.g. for titles, explanation, help, etc.
Input Text: input one line of text

46. Single value components Text components
Agenda
Dashboard design
Designing spreadsheet models
Basic components for visualization
Charts components
Single value components
Text components
Alerts
Selector components
Dashboard layout
Case study: Global Sales Overview

47. Alerts
Alerts overview
Used to call the attention of the user to a specific item that has reached a pre-defined limit
Limits are e.g. budgets or benchmarks, plan data, etc.
Alerts can be defined for different components, including most charts and single-value components and some selector components
Customization of different alert levels and colors possible
Configuration takes place on the Alerts tab of the Properties panel

48. Alerts
Defining Alerts for a Gauge
Activate Alerts on the Alerts tab in the Properties panel
Define Alert method:
as percent, if evaluated values are percentages
as value, if evaluated values are integers
Define Alert levels and colors
Select if high/middle/low levels are good

49. Agenda
Dashboard design
Designing spreadsheet models
Basic components for visualization
Charts components
Single value components
Text components
Alerts
Selector components
Dashboard layout
Case study: Global Sales Overview

50. Selector Components
Selector components overview
Selector components let you create interactive dashboards with multiple selections
Radio Button: users can select from a horizontal or vertical group of selections
Combo Box: provides a vertical list of items, when it is clicked, users can select an item from the list
Accordion Menu: provides a two-level menu, users first select a category and then select items within that particular category

51. Interactivity with selector components
Example: Radio button selector
The user can select by a radio button selector if the share per model is shown by revenue or by pieces sold

52. Interactivity with selector components
Source, destination and insertion type
A selector component can be linked to
a data source, that represents the available data, and
a data destination, representing the selected data
The values inserted into the data destination depend on the chosen insertion type
Insertion types:
Row/column: The selected row/column of the data sources is inserted into the data destination
Filtered rows: A set of rows from the data source that meet the selected filter criteria are inserted into the data destination
Label/position: The label/position of the selected radio button is inserted into the data destination

53. Interactivity with selector components
Source, destination and insertion type
Insertion types ROW:
Each row is linked to a radio button, the selected row is inserted into the data destination
Insertion type POSITION:
The position of the selected radio button (e.g. 1 or 2 in this example) is inserted into the data destination, the result can be used for further processing

54. Interactivity with selector components
Settings for radio button selector
1. Customize the title and the name of the labels

55. Interactivity with selector components
Settings for radio button selector
2. Select Insertion Type and bind data to source and destination
3. Use this range as source for your visualization. Each time the user changes the selection, the selected row is inserted here

56. Agenda
Dashboard design
Designing spreadsheet models
Basic components for visualization
Charts components
Single value components
Text components
Alerts
Selector components
Dashboard layout

57. Dashboard Layout
Art and background components
Art and backgrounds can be used to enhance the dashboard layout
Background: add backgrounds to dashboard to improve the design, can be used to create divisions and designate groups of related components
Image: display JPEG images or SWF files
Rectangle, Ellipse, Lines: layout element that outlines, defines, or contains sections

58. Dashboard Layout
Themes
Allow a global change of the appearance of components
Each theme has a number of different components with a look and feel of that particular theme
Themes can be combines with different Color Schemes

59. Agenda III
Maps
Containers
Dynamic visibility

60. Maps
Maps overview
Create geographical representations that can display data by region
Display data for each region
Use region as selector to display detail data
Worldwide maps, continents, countries
E.g. show revenue in the USA by state

61. Data is associated with each region in the map by using region keys
Maps
Maps
Data is associated with each region in the map by using region keys
Each region in the map has a default region key, own region keys can be entered
Region key has to be in the first column or first row of a range
USA maps use postal abbreviations as region keys by default
Europe map uses the ISO two-digit country codes as region keys by default

62. Maps
Example:
You want to show the sales by continent on a map
By clicking on a continent, the linked sales organization and the figures Gross Sales and Pieces Sold are displayed

63. 1. Customize Title, Region Keys and Display data
Maps
Customizing maps:
1. Customize Title, Region Keys and Display data
Display data includes the region key in the first column and values in the second column
Region keys should correspond to your data
Display data is shown as mouse-over value on the map

64. 2. Customize the selector behavior (Data Insertion)
Maps
Customizing maps:
2. Customize the selector behavior (Data Insertion)
By selecting a region on the map, the corresponding source data record is inserted into the destination row/column
Source data can differ from display data, as it can include more than two columns

65. Agenda
Maps
Containers
Dynamic visibility

66. Containers
Containers
Group and display other components
Help to structure contents of the dashboard
Panel Container: acts as smaller canvases within the main canvas, includes one or more components
Tab Set: contains multiple tab views, each view can be displayed on the canvas by clicking its corresponding tab

67. Agenda
Maps
Containers
Dynamic visibility

68. By default, each component placed on the canvas is visible
Dynamic visibility
Dynamic visibility
Dashboards should be prevented from showing too many visual elements or to many pieces of information
Use dynamic visibility to control the visibility of components on your dashboard
By default, each component placed on the canvas is visible
Use of selectors to switch visibility for components on or off

69. Example: Dynamic visibility for maps
You want to show your sales in Germany and the USA by state
The dashboard would be to crowded by showing both maps at the same time, therefore you use a radio button to switch between the different maps

70. Step 1: Add and customize a radio button selector
Dynamic visibility
Step 1: Add and customize a radio button selector
1. Maintain title
2. Maintain the labels Europe and USA
3. Use Insertion Type Position.
If Europe is chosen, position “1” is inserted into destination cell B4.
If USA is chosen, position “2” is inserted into destination cell B4

71. Step 2: Set the status in your map properties
Dynamic visibility
Step 2: Set the status in your map properties
1. Select the Common tab in the Behavior section in the charts properties panel
2. Link the Status for dynamic visibility to destination cell B4
3. For Germany set Key = 1, for USA set Key = 2