The Gauge & Widget Advantage for your Dashboard


Published on

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.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The Gauge & Widget Advantage for your Dashboard

  1. 1. The Gauge & Widget Advantage for your Dashboard
  2. 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. 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. 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. 5. Ready to find out how a small addition to your dashboard can help your users do a lot more?
  6. 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. 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. 8. Types of Gauges Speedometer/Angular Gauge Linear Gauge Cylindrical Gauge Thermometer GaugeLED Gauge Circular Gauge
  9. 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. 10. Need tips to use Gauges in a better way? Here are some usability tips to help you get started!
  11. 11. 1. Stick to universally understood color schemes. This LED progress gauge uses Red for Low, Yellow for Medium and Green for High.
  12. 12. 2. Use trend points to establish a context to your plotted data. Trend points tell your users ‘compared to what’.
  13. 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. 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. 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. 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. 17. Need some usability tips on Spark Charts? Here you go…
  18. 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. 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. 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. 21. And the promised usability tip for Bullet Charts…
  22. 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. 23. In such cases, reverse the sequence of background fill for the particular metric. Reversed background fill for Expenses.
  24. 24. And here’s how you can use some of these Widgets in your dashboard
  25. 25. That’s it for now. If you too want the Widget Advantage for your dashboards like thousands of our happy customers, mail us at: Head here to see these widgets and more in action! OR