© 2011 SAP AG
SAP Crystal Dashboard DesignSAP UA
Version: 1.1
Author: Sonja Hecht, UCC Munich
Abstract
This module provides an introduction on the topic dashboard design using SAP Crystal Dashboard Design.
Product
SAP Crystal Dashboard Design, personal edition
Level
Undergraduate
Beginner
Dashboard DesignIntroduction
SAP University Alliances
Page 2© 2011 SAP AG
Agenda I
• Introduction
• SAP Crystal Dashboard Design overview• Creating the first dashboard
Dashboard DesignIntroduction
SAP University Alliances
Page 3© 2011 SAP AG
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)
Dashboard DesignIntroduction
SAP University Alliances
Page 4© 2011 SAP AG
Example of a spreadsheet
Source: http://www.sap.com/solutions/sapbusinessobjects/sap-crystal-solutions/dashboards-visualization/demos/index.epx
Dashboard DesignIntroduction
SAP University Alliances
Page 5© 2011 SAP AG
Example of a dashboard
Source: http://www.sap.com/solutions/sapbusinessobjects/sap-crystal-solutions/dashboards-visualization/demos/index.epx
Dashboard DesignIntroduction
SAP University Alliances
Page 6© 2011 SAP AG
Other dashboard examples
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
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
Source: http://www.sap.com/solutions/sapbusinessobjects/sme/xcelsius/demos/index.epx
Dashboard DesignIntroduction
SAP University Alliances
Page 7© 2011 SAP AG Source: adapted from Few (2006), p. 124 ff
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 1000.00 USD
Organizers Arrange related business information, e.g. as tables or geographically in maps
Display media for dashboards
Dashboard DesignIntroduction
SAP University Alliances
Page 8© 2011 SAP AG
Evolution of Dashboards
First Generation
Second
Generation
Third
Generation
Display:
Simple Lamps
Function:
-Indication of engine issues
Display:
Simple Charts
Function:
-Simple monitoring of some business areas
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
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
Evolution of Automobile Dashboards versus Business Dashboards:
Automobile Dashboards Business Dashboards
Ad
ap
ted
fro
m R
asm
uss
en
/Ba
nsa
l/Ch
en
(2
00
9),
p.5
Dashboard DesignIntroduction
SAP University Alliances
Page 9© 2011 SAP AG
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 snapshotsAnalytical Dashboards• Used by analysts• Support interaction with data, e.g. drill-down• Complex data, sophisticated display mechanisms, static snapshotsOperational 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. 40-42)
Dashboard DesignIntroduction
SAP University Alliances
Page 10© 2011 SAP AG
Layers of informationTo
p
Lay
erM
idd
le
Lay
erB
ott
om
L
ayer
Summarized Graphical ViewPurpose: Monitor key performance metrics
Display: Graphical indicators, numbers, text
Technology: Dashboards, scorecard, portals
Multidimensional ViewPurpose: Explore information from multiple dimensions
Display: Interactive charts and tables
Technology: OLAP, interactive reports
Detailed Reporting ViewPurpose: Examine details before taking action
Display: Table or report in separate window
Technology: Operational reports, data warehouse queries
Source: Eckerson (2006), p. 15
Dashboard DesignIntroduction
SAP University Alliances
Page 11© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 12© 2011 SAP AG
The New Intelligence Platform of SAP
• 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)
Please check sdn.sap.com for latest version
Dashboard DesignIntroduction
SAP University Alliances
Page 13© 2011 SAP AG
Agenda
• Introduction• SAP Crystal Dashboard Design overview
• Creating the first dashboard
Dashboard DesignIntroduction
SAP University Alliances
Page 14© 2011 SAP AG
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,…
Dashboard DesignIntroduction
SAP University Alliances
Page 15© 2011 SAP AG
The Workspace
Embedded Spreadsheet
Object Browser
Component Browser
Canvas Area
Properties Panel
Dashboard DesignIntroduction
SAP University Alliances
Page 16© 2011 SAP AG
Design time & Run time
XML RDBMS OLAP
Spreadsheet model
Design visualizationData bindingData connectivityWorkspace
Generate dashboard(.swf file with internal data model)
Visualization
Business Logic
Data Source
Design time Run time
Optional: Dashboard (.swf file) deployed on corporate web server
Dashboard is opened on user‘s machine
Optional: Dashboard connects to data source to refresh data
Visualization
Web Server
Client
Client
Dashboard DesignIntroduction
SAP University Alliances
Page 17© 2011 SAP AG
SAP Crystal Dashboard Design and the MVC pattern
View (before adjustment)Controller
View (after adjustment)Model
Dashboard DesignIntroduction
SAP University Alliances
Page 18© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 19© 2011 SAP AG
Agenda
• Introduction• SAP Crystal Dashboard Design overview• Creating the first dashboard
Dashboard DesignIntroduction
SAP University Alliances
Page 20© 2011 SAP AG
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 …
Dashboard DesignIntroduction
SAP University Alliances
Page 21© 2011 SAP AG
Import spreadsheet model
3. Your business model is now available in the embedded spreadsheet
2. Select existing Excel file …
1. Select Data -> Import…
Dashboard DesignIntroduction
SAP University Alliances
Page 22© 2011 SAP AG
Select visual components
2. Move the component using drag and drop onto the canvas
1. Select a pie chart from the component browser
Dashboard DesignIntroduction
SAP University Alliances
Page 23© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 24© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 25© 2011 SAP AG
Publish dashboard
1. Save spreadsheet model and visualization as *.xlf file
2. Export as e.g. PDF or other file type
3. Launch Dashboard
Dashboard DesignIntroduction
SAP University Alliances
Page 26© 2011 SAP AG
Agenda II
• Dashboard design
• Designing spreadsheet models• Basic components for visualization
– Charts components– Single value components– Text components
• Alerts• Selector components• Dashboard layout
Dashboard DesignIntroduction
SAP University Alliances
Page 27© 2011 SAP AG
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?
Dashboard DesignIntroduction
SAP University Alliances
Page 28© 2011 SAP AG
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. Source: Few (2006), p. 90-95
Dashboard DesignIntroduction
SAP University Alliances
Page 29© 2011 SAP AG
Dashboard design
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 unnecessarythird 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. 103-110)
Dashboard DesignIntroduction
SAP University Alliances
Page 30© 2011 SAP AG
Dashboard design
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 emphasisEmphasized Neither emphasized nor
de-emphasized
Neither emphasized nor de-emphasized De-emphasized
Emphasized
Different degrees of visual emphasis. Source: (Few 2006, p. 114)
Dashboard DesignIntroduction
SAP University Alliances
Page 31© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 32© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 33© 2011 SAP AG
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()
Dashboard DesignIntroduction
SAP University Alliances
Page 34© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 35© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 36© 2011 SAP AG
Agenda
• Dashboard design• Designing spreadsheet models• Basic components for visualization
– Charts components– Single value components– Text components
• Alerts• Selector components• Dashboard layout
Dashboard DesignIntroduction
SAP University Alliances
Page 37© 2011 SAP AG
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.
Dashboard DesignIntroduction
SAP University Alliances
Page 38© 2011 SAP AG
Chart components
Column chart
Step-by-step:
• Drag chart to the canvas
• Adjust titles
• Bind data
• Adjust scaling
• Adjust layout
Dashboard DesignIntroduction
SAP University Alliances
Page 39© 2011 SAP AG
Chart components
Column chart - general• 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
Dashboard DesignIntroduction
SAP University Alliances
Page 40© 2011 SAP AG
Chart components
Column chart – scaling
• 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
Dashboard DesignIntroduction
SAP University Alliances
Page 41© 2011 SAP AG
Chart components
Column Chart – layout
• Adjust the color of your slices, chart background, title or plot area
• Adjust format for your titles• Adjust data type of the values
Dashboard DesignIntroduction
SAP University Alliances
Page 42© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 43© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 44© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 45© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 46© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 47© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 48© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 49© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 50© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 51© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 52© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 53© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 54© 2011 SAP AG
Interactivity with selector components
Settings for radio button selector
1. Customize the title and the name of the labels
Dashboard DesignIntroduction
SAP University Alliances
Page 55© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 56© 2011 SAP AG
Agenda
• Dashboard design• Designing spreadsheet models• Basic components for visualization
• Charts components• Single value components• Text components
• Alerts• Selector components• Dashboard layout
Dashboard DesignIntroduction
SAP University Alliances
Page 57© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 58© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 59© 2011 SAP AG
Agenda III
• Maps• Containers• Dynamic visibility
Dashboard DesignIntroduction
SAP University Alliances
Page 60© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 61© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 62© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 63© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 64© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 65© 2011 SAP AG
Agenda
• Maps• Containers• Dynamic visibility
Dashboard DesignIntroduction
SAP University Alliances
Page 66© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 67© 2011 SAP AG
Agenda
• Maps• Containers• Dynamic visibility
Dashboard DesignIntroduction
SAP University Alliances
Page 68© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 69© 2011 SAP AG
Dynamic visibility
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
Dashboard DesignIntroduction
SAP University Alliances
Page 70© 2011 SAP AG
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
Dashboard DesignIntroduction
SAP University Alliances
Page 71© 2011 SAP AG
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
Top Related