@ Everything Xcelsius.com 2010 Presented by: Mico Yuk & Mike Alexander Date: March 24 th, 2010 Day 1...

@ Everything Xcelsius.com 2010

Presented by: Mico Yuk & Mike AlexanderDate: March 24th, 2010

Day 1 - Advanced Dashboarding Design TechniquesXcelsius Gurus


Mico Yuk Founder – EverythingXcelsius.com (popular weblog) Founder - Xcelsius Guru Network Xcelsius Trainer / Developer / Architect / Blogger

Mike Alexander (you already met) Founder – Datapig Technologies Xcelsius Evangelist / Blogger (www.datapigtechnologies.com) Microsoft Excel MVP

Who are We?

@ Everything Xcelsius.com 2010Slide 3

Dashboard Design Resources

Well known Stephen Few (book) – Information Dashboard Design Edward Tufte (book) – Multiple books Jorge Camos (blog) -

http://www.excelcharts.com/blog/data-visualization/


What will you learn?

How to design better dashboards in 4 easy steps

1. Choose the Correct charts for your Data

2. Choose the correct dashboard layout

3. Implement effective Formatting Techniques

4. Configure component functionality in your dashboard


Common Mistakes

Real Word Examples

Which charts to choose?

Class Exercise

Step #1 – Chart Usage

Stop searching for information – Monitor it with Dashboard Technology.- Gregory Hovis, DM Direct


4 Common Mistakes

I chose this chart because…1. It looked good on the dashboard

2. It fit in the space available

3. The user HAD to have a (name a chart type) on the dashboard so we had to fit it

4. It looked cool aka ‘bling effect’

Reality – Data should dictate what charts are used on the dashboard. Period.


Example #1 - Data

Preview Data – Sales



Example #1 – Common Scenario

1st Chart Choice = Common Choice

Makes data comparison hard!


Example #1 – Better Choice

2nd Chart Choice = Final Choice

This works!


Example #2 - Data

Preview Data – Supply Chain Industry



Example #2 – Common Scenario

1st Chart Choice = Common Choice

Kind of works!


Example #2 – Better Choice

2nd Chart Choice = Final Choice

This works!


The most effective means for easily digesting quantitative information is through the use of graph components.

In building a dashboard it is important to understand best practices for choosing a graph to visualize specific metrics, trends, and analysis.

2 things to think about…

Choosing a Chart


Line Chart Consecutive Interval (mostly time-based) metrics. Any non-consecutive intervals.

Pie Chart & Area Chart Distribution or parts of a single measure. Any metrics that do not represent all parts of a whole (3-8 parts).

Bar & Column Chart Comparison of one or multiple measures with a common axis & scale. Any consecutive interval based metrics.

XY Chart, Bubble Chart Comparison between 2 or 3 measures with like or unlike scales. Use them in place of line or bar chart if 1 measure is not quantitative.

Stacked Chart Visualize how an individual part contributes to a whole. When the emphasis is on comparing the parts.

Understanding Chart Types


Quiz #1: Which Graph?

Choose the Correct Graph1. Graph #1

Comparing independent data sets Money distribution by time Production against time

2. Graph #2 Money distribution over time Material characteristics by temperature Clinical response by concentration

3. Graph #3 Budgets Money distribution

Bar & Column Chart

Line Chart

Pie Chart


Quiz #1: Which Graph?

Choose the Correct Graph4. Graph #4

Display changes in cumulative value or percentage over time.

Compare groups on outcome measurements.

Display group trends.

5. Graph #5 Displaying data with three variables Displaying financial data

Area Chart

Bubble Chart


Choose Charts

Step #1: Exercise

Exercise Steps:

1. Open Sample (borrow data )2. Divide Canvas into 4 parts3. Choose appropriate charts


Website Layouts

Common Dashboard Layouts

Real World Examples

Xcelsius Template Review

Class Exercise Continued

Step #2 – Dashboard Layout



3 Things to Consider

Most users …1. Spend 8+ hours on the internet

2. Most of that time is spent browsing websites

3. Familiar and accustomed to basic website navigation

4. Are not sure where to place items on their dashboard

Conclusion – Why remake the wheel?


Popular Website #1 Header – Logo, Main Menu Tab Left Side Pane – Main Navigation for each Menu Tab Body – Relevant Data Footer – Copyright Info & Links (not shown here)


Popular Website #2 Header – Logo, Main Menu Tab Left Side Pane – Main Navigation for each Menu Tab Body – Relevant Data Footer – Copyright Info & Links (not shown here)


Common Dashboard Layouts

Stick with 2, 3 and 4’s for the body

Don’t forget the navigation!


Real World Example #1


Dashboard Template #1

Header – Title, Report Date, Global Buttons Left Side Pane – Dashboard navigation, Static Data,

Links Body – Relevant chart sand bulk of data Footer – Copyright Info, Links


Dashboard Template #2

Header – Title, Report Date, Global Buttons Left & Right Side Bar – Dashboard navigation, Static

Data, Links Body – Relevant chart sand bulk of data Footer – Copyright Info, Links


Choose Charts

Step #2: Exercise

Exercise Steps:

1. Choose 2 Layouts as a class2. Handraw to Preview3. Build chosen one on canvas


Xcelsius Themes

Setting your Color Scheme

Class Exercise Ctd.

Step #3 – Formatting Techniques



Recommended1. Nova (default)2. Aqua3. Halo

Xcelsius Themes


BEST Color Scheme Chooser

URL – http://colorschemedesigner.com/


Before / After

Step #4 – Configuring Components



Presented by: Mico Yuk & Mike AlexanderDate: March 25th, 2010

Day 2 – Basic Connectivity TechniquesXcelsius Gurus


Download Files

URL - http://everythingxcelsius.com/wp-content/uploads/Xcelsius_Trainingfiles.zip


What will you learn?

4 Basic connectivity technique

1. What is XML?

2. How to employ XML Data into your dashboard?

3. Understanding flash vars

4. Passing parameters between dashboards


What is XML?

How to deploy it?

Understanding XML



What is XML?

Important Facts…

1. Defined – Extensible Markup Language

2. Developed in 1998 to allow different programs to pass data

3. Simple text file

4. Great Resource = Mike’s Video -

http://datapigtechnologies.com/flashfiles/xxmlpart1.html


What is XML?


Updating XML in Excel

Exercise #1

Exercise Steps:

1. Open ‘Books XML Example’ Folder2. Import data into Excel3. Open XML file and change 2 values4. Refresh data in Excel


XML Connectivity

Compare 3 Xcelsius options …


HTTPData PublishedClient DevelopmentMiddleware

XML Connectivity – Design Time

Xcelsius SWF

WebService

WebService

ExcelXML

Maps

ExcelXML

Maps

XMLDataXMLData

Any XML structure

.NET/J2EE

SOAP

<row><column> structure


HTTPData PublishedMiddleware

XML Connectivity – Run Time

SWFAny XML Structure.NET/J2EE

SOAP

<row><column> Structure

XML Data

Excel XML Maps

Web Service


Understanding Flash Vars

Passing parameters between dashboards

Other Techniques



Flash VariablesHTMLFLASHVARS=“abc123”

Dashboard (SWF)Dashboard (SWF)

abc123

Pass parameters to into a SWF on-load


Using flash vars to pass parameters

Exercise #2

Exercise Steps:

1. Open ‘Pass_Parameter Example’ folder2. Open parent.swf model3. Change values and click enter4. See right child.swf update5. Open parent.xlf and child.xlf model6. Review code!

@ Everything Xcelsius.com 2010 Presented by: Mico Yuk & Mike Alexander Date: March 24 th, 2010 Day 1...

Documents

Transcript of @ Everything Xcelsius.com 2010 Presented by: Mico Yuk & Mike Alexander Date: March 24 th, 2010 Day 1...