InfoCepts

Data
Visualization
Guide
Data Visualization is an integral part of Dashboard and Mobile BI applications. This is a reference guide
for BI developers, Business Analyst and BI program managers to understand which visualization to use
when. What are the standard design best practices which can be followed while creating dashboards
and mobile BI applications. The guide comprises detailed information and best practices of all
standard and advanced visualizations which are available in popular BI tools. This visual guide also
contains sample dashboard layout, pre-defined color palette, font and UI specifications.

Version 1.1

InfoCepts Style Guide | www.infocepts.com | 1

 InfoCepts

UI
Style Guide
Dashboard Layout

Demo Dashboard

Types of Dashboard

Color Palette

Dashboard Specifications

Grid Style

Dashboard Design Best Practices

InfoCepts Style Guide | www.infocepts.com | 2

UI Style Guide > Dashboard Layout InfoCepts

Demo Dashboard

Width 1366 pix - Height 768 pix | Note: Scale 75%

P L E
SA M
InfoCepts Style Guide | www.infocepts.com | 3
UI Style Guide > Color Palette InfoCepts

Color Palette

Swatches Sample Chart Color Combinations

Note: This is a recommended color palette, you can change the sequence of the adjoining colors 
according to the look & feel of dashboard and other reports.

R-0 G-55 B-99 R-120 G-72 B-148

# 003763 # 784993

R-0 G-101 B-164 R-149 G-120 B-171

# 0065a4 # 9578ab

R-101 G-167 B-199 R-177 G-167 B-195

# 65a7c7 # b1a7c3

E
R-202 G-233 B-234 R-207 G-206 B-219

L
# cae9ea # cfcedb

R-171 G-203 B-175

# abcbaf

R-140 G-175 B-115

# 8cac73
R-151 G-156 B-161
# 979ca1

R-95 G-99 B-103

# 5f6367
SA MP
R-109 G-142 B-56 R-40 G-41 B-45
# 6d8e38 # 28292d

Negative Value
R-234, G-78, B-86

Positive Value
R-36, G-170, B-112

InfoCepts Style Guide | www.infocepts.com | 4

UI Style Guide > Color Palette - Design Best Practices InfoCepts

Color Palette - Design Best Practices

1 2
Sales Summary Sales Summary
Sales % Variance Sales % Variance
1,495,891,101 29% 1,495,891,101 29%

Sales % Variance Sales % Variance

1,495,891,101 26% 1,495,891,101 26%

USE OF COLOR CODE USAGE OF THRESHOLDS

E
People who cannot recognize colors or cannot distinguish Red and green colors should be used to represent values:

MP L
groups of data that are color coded, avoid using a combination Green represents positive and red represents negative value.
of red and green in the same display.

3 4 SA

DISTINGUISH COLORS FOR PRINTING AVOID BRIGHT BACKGROUND AND FLASHY COLORS
Most printers are black and white make sure to use  Objects in a table or Chart to be easily seen, use a b
 ackground
appropriate contrast colors to print well. color that contrasts sufficiently with the object

InfoCepts Style Guide | www.infocepts.com | 5

 InfoCepts

Choose the Right Chart Type for your Data

Relationship Part-to-whole Geography Distribution Comparisons

Two Variables Few Categories Few Data Points Single Variable Few Categories

Few Items

Scatter Plot Pie Chart Bubble Map Bar Chart

Box Plot
Three Variables Parts of Categories Many Data Points

Deviation Bar Chart HiLow Stock

Bubble Chart 100% Stacked Bar Marker map

Dual Axis Bar Chart Histogram

E
Related Elements

Area map

MP L
SA
Line Chart Patero Chart

Radar Chart

Density Map
Area Graph Gantt Chart

InfoCepts Style Guide | www.infocepts.com | 6

 InfoCepts

Standard
Visualizations
Bar Chart Scatter Plot Polar Chart / Radar Chart

Deviation Bar Chart Area Chart

Dual Axis Bar Chart Box / Whisker Plot

Stacked Bar Chart Gantt Chart

Line Chart HiLow Stock / Candlestick

Pie Chart Histogram

Bubble Chart Pareto Chart

InfoCepts Style Guide | www.infocepts.com | 7

Standard Visualizations > Comparisons > Bar Chart InfoCepts
Supported on:
Bar Chart Web | Android phone | Android tablet | iPhone | iPad

When to use Bar Chart? Vertical Bar Chart

The classic bar chart uses either horizontal or vertical bars to show
discrete, numerical comparisons among categories. One axis of the
chart shows the specific categories being compared, and the other axis
represents a discrete value.
Some bar charts present bars clustered in groups of more than o ne
(grouped bar charts), and others show the bars divided into subparts
to show cumulative effect (stacked bar charts).

E
Functions
Comparisons Patterns Relationships

MP L
SA
Variations - Horizontal Bar Chart | Multi-Set Bar Chart

Report Objects Required

1 Dimensions 1 Measures

Alternative / Related Visualizations

Histogram Multi-Set Stacked

Bar Chart Bar Chart

InfoCepts Style Guide | www.infocepts.com | 8

Standard Visualizations > Bar Chart - Design Best Practices InfoCepts

Bar Chart - Design Best Practices

1 2

USE HORIZONTAL LABELS START THE Y-AXIS VALUE AT 0

Avoid steep diagonal or vertical type, as it can be difficult to read. Starting at a value above zero truncates the bars and doesn’t

E
accurately reflect the full value.

MP L
3 4
SA
SPACE BARS APPROPRIATELY & AVOID OVERLAPPING USE CONSISTENT COLORS
Space between bars should be ½ bar width and bars should not be Use one color for bar charts. You may use an accent color to
overlapped highlight a significant data point.

InfoCepts Style Guide | www.infocepts.com | 9

 InfoCepts

Advanced
Visualizations
Water Fall Interactive Stacked Chart Fish Eye Selector

Gauges Interactive Bubble Chart Media

Time Series Graph Matrix Data Cloud

Maps Lipstick Chart Weighted List

Heat Map Micro Charts RSS Reader

Bubble Grid Network Visualization Cylinder

Funnel Image Layout Thermometer

InfoCepts Style Guide | www.infocepts.com | 10

Advanced Visualization > Water Fall InfoCepts
Supported on:
Water Fall Web | iPhone (D3) | iPad (D3)

When to use Water Fall? Water Fall

A Waterfall visualization highlights the increments and decrements of
the values of metrics over time. Analysts can use the widget to identify
aspects of their business that are contributing to the fluctuations in the
values. The visualization can also be used to perform “what-if”
analyses. For e.g. % Revenue Y/Y Variance by Month. It shows how
different aspects of the business positively or negatively affect the
bottom line.

L E
Functions

SA MP
Patterns Relationships

Report Objects Required

1 Dimensions 1 Measures

InfoCepts Style Guide | www.infocepts.com | 11

Mobile App Style Guide > App Layout InfoCepts

App Layout

Width 10.67 in - Height 8 in | Note: Scale 50%

iPad 12:15 74%

Country Region Territory

Report Header Grid View Graph View Report Header

HOME

SETTINGS

CALLS

Report Header Report Header

REPORT

L E
MP
PERFORMANCE

CONTROLS

NETWORKING
SA
InfoCepts Style Guide | www.infocepts.com | 12
Mobile App Style Guide > Mobile App Design Best Practices InfoCepts

Top 10 Mobile App Design Best Practices

1 2

L E
Visual Hierarchy
SA MP USAGE OF BUTTONS and images
Make it easy to focus on the main task by elevating important Use large buttons to make sure people can select them with their
content or functionality. Some good ways to do this are to place fingers. Icon / button size should not be less than 20x 20 pixels. Use
principal items in the upper half of the screen and in left-to-right only those images which are needed in your design. All images/ icons
cultures near the left side of the screen should match with the UI appearance and theme.

InfoCepts Style Guide | www.infocepts.com | 13

 InfoCepts

For more details contact us:

Data-viz@infocepts.com

www.infocepts.com

Created By InfoCepts Data Visualization Team

InfoCepts Style Guide | www.infocepts.com | 14