Learn how widgets and gauges including the speedometer chart, bulb gauge, sparklines and bullet graphs help you monitor your key metrics in business dashboards — current sales vs target, average order value, current stock levels and more. Also learn usability tips right from color selection to how to add more context to the widgets in this presentation.

1. The Gauge & Widget
Advantage for your
Dashboard

2. Monitor closed sales
YTD.
Be alerted when
KPIs reach a
threshold value.
Critical issues your users face
everyday…
& many more…
Report the current
inventory level of a
key raw material.
Keep track that
the Quick Ratio is
within acceptable
limits.
Monitor whether the
YTD revenue is on
target.
Analyze the
price movement of
stocks.

3. Is your dashboard helping users to
keep an eye on their key metrics?
Help users get additional insights from your
dashboard through widgets.

4. How can Gauges and Widgets in
a dashboard benefit my users?
Users pressed for time may miss
out to identify a problem
through a dashboard.
Gauges and Widgets enable instant
recognition of the problem.
Provide actionable
insights in a more
understandable form.

5. Ready to find out how a small addition
to your dashboard can help your users
do a lot more?

6. • monitor Average Order Value per day in a KPI dashboard?
• monitor the current rating of a product?
• report current stock levels in an inventory dashboard?
• monitor the status of an ongoing project?
• report temperature on a weather dashboard?
Want to
Use Gauges!

7. • Ideal for indicating the status of a metric whose value falls within a
well defined range.
How does a Gauge work?
• Uses either a linear or an angular scale of measurement.
• Data values are indicated either by a ticker or by a fill.
When to use a Gauge?

8. Types of Gauges
Speedometer/Angular Gauge Linear Gauge Cylindrical Gauge
Thermometer GaugeLED Gauge Circular Gauge

9. Want to create an alert system for a
patient monitoring dashboard?
Try the Bulb Gauge which uses qualitative
signals like color to depict data value. Each
predefined color indicates whether the
monitored data is within the corresponding
predefined limit or not.
• Ideal for creating alert mechanisms where colors indicate the prevailing
condition of the entire system.
Best use:

10. Need tips to use Gauges in a
better way?
Here are some usability tips to
help you get started!

11. 1. Stick to universally understood color schemes.
This LED progress gauge uses Red for Low,
Yellow for Medium and Green for High.

12. 2. Use trend points to establish a context
to your plotted data.
Trend points tell your users ‘compared to what’.

13. 3. Set up Alerts (like a sound or a message).
It informs users when the metric attains a threshold value and helps
them take corrective actions in time.

14. Want to help your users analyze
trends?
Help them see a complete picture instead of broken bits
of data.
Hey, but you said you don’t have space on your prime
dashboard real estate!
Try the Spark Charts
& you will never run out of space
again.

15. Spark charts
• Are ‘data-intense, design-simple, word-sized graphics’.
• Used to visualize the general shape of a variation.
• Intended to be succinct, memorable and located where they are discussed.
Best use:
• Frequently used inline with text to show the general movement of a data value.
• Can be used in space-efficient executive dashboards to show a lot of KPIs in
a single view.

16. Types of Spark Charts
Spark charts are primarily of 3 types: Spark Line, Spark Column and Spark Win/Loss:
• Use Spark Lines when you want to show trends.
eg: Stock price movements
• Use Spark Columns when you want to compare values.
eg: Revenues earned
• Use Spark Win/Loss when you want to visualize
a Win/Loss scenario.
eg: Yankees current season results

17. Need some usability tips on
Spark Charts?
Here you go…

18. 2. Use color bands to identify specific periods on the chart.
eg: The chart below highlights every alternate 3 months in a weekly data plot.
1. Use colors to highlight specific data values.
eg: The Spark line below uses blue for Open & Close price, Green for High
and Red for Low.

19. Want to
Show a value,
Compare it against a target &
Contextualize whether it’s good, bad or ugly?
That’s exactly what a Bullet
Graph does!

20. Bullet Graph
Developed by Stephen Few, the bullet graph provides a linear,
no-frill display of a single data variable in a small space.
Best use:
• When a single data value (eg: revenue) needs to be
shown and compared against a target .
• The plotted data also incorporates the context of
qualitative ranges of performance (indicated by the
background fill colors).

21. And the promised
usability tip
for Bullet Charts…

22. When multiple bullets are used together, ensure
the sequence of the background fill is in sync with
the metric being displayed.
For eg: In the chart below, the background fill uses the darkest gray for poor
performance and the lightest gray for best performance. It works for
Revenue, Profit and Avg. Order Size. But in Expenses, the situation is
reversed (Expenses have to stay below Target to be the best).
Contd.

23. In such cases, reverse the sequence of background fill
for the particular metric.
Reversed background
fill for Expenses.

24. And here’s how you can use some of these
Widgets in your dashboard

27. That’s it for now.
If you too want the Widget Advantage for your dashboards
like thousands of our happy customers, mail us at:
sales@fusioncharts.com
Head here to see these widgets and more in action!
OR