chart design - performance charts 2024
About Jack Zheng
Faculty of IT at Kennesaw.edu
http://idi.kennesaw.edu/it7113/
Charting Special Topic:
Performance Charts
IT 7113 Data Visualization
J.G. Zheng
Fall 2024
http://idi.Kennesaw.edu/it7113/
Overview
• KPI charts
– Bullet graph
– Waffle chart
– Gauge
– Chart sets
• KPI cards
• Other visualization features
– Traffic light system
–
Indication of differences
– Score cards and sparkline
• Other performance related chart
– Waterfall/bridge chart
– Perceptual map
2
This lectures introduces some commonly used chart types for business
performance reporting and communication.
Performance and KPI
• Performance management (PM) is the process of ensuring that a set
of activities and outputs meets an organization's goals in an effective and
efficient manner.
• A performance system utilizes KPI (Key Performance Indicator) to define and
tack performances.
– A KPI is a metric that is tied to a target.
– The KPI score and its visual indicator are designed to let a business user know at a glance
if results are on target or off target.
– Meeting budget or goals: meet, warning, not meet
• Commonly components of a KPI
– Metric value: actual fact
– Target value: could be a budget, average, goal
– Status range
• Commonly used charts for KPI
– Gauge chart
– Waffle chart
– Bullet chart
– KPI card – will be covered in module 9 dashboard design
3
https://www.fusioncharts.com/charts/gauges
Gauge Chart
• The gauge (dial) chart plots a
single value on gauge-type image,
similar to an odometer.
– Basic gauge chart can be of a circle
shape or half circle shape.
– The value needle that represents the
value positions itself between the
maximum and minimum values for
the dial.
• Often used for operational
performance monitoring, or single
value critical measure
4
Image from
https://www.fusioncharts.com/charts/gauges
https://www.datapine.com/blog/gauge-chart-examples/
https://xviz.com/blogs/5-visuals-that-add-value-to-your-power-bi-dashboards/
https://www.fusioncharts.com/dev/chart-guide/gauges-and-widgets/linear-gauge
https://www.fusioncharts.com/charts/gauges
Gauge Chart Variations
• Basic types
– Circle or partial circle needle dial chart
– Donut chart
– Linear or bar gauge chart
• More examples
– https://www.datapine.com/blog/gauge-chart-examples/
5
Donut gauge chart image
from
https://xviz.com/blogs/5-
visuals-that-add-value-to-
your-power-bi-dashboards/
Linear gauge image from
https://www.fusioncharts.com/
dev/chart-guide/gauges-and-
widgets/linear-gauge
Image from
https://www.fusioncharts.com/charts/gauges
https://finance.yahoo.com/quote/CRM/company-insights?p=CRM
https://www.ibm.com/docs/en/cognos-analytics/11.0.0?topic=types-gauge-charts
https://xviz.com/blogs/5-visuals-that-add-value-to-your-power-bi-dashboards/
Gauge Chart Set
• Gauge chart can also be
stacked for multiple KPIs
– Nested
– Small multiple matrix
– Multiple needles
– One-line row/column
6
https://finance.yahoo.com/quote/CRM
/company-insights?p=CRM
Multiple needles
https://www.ibm.com/d
ocs/en/cognos-
analytics/11.0.0?topic
=types-gauge-charts
Image from
https://xviz.com/blogs/5-
visuals-that-add-value-to-
your-power-bi-dashboards/
https://www.barefootdatascience.com/2017/09/17/waffle-vs-pie-a-visualization-showdown/
https://twitter.com/storywithdata/status/634145280649068544
https://www.storytellingwithdata.com/blog/what-is-a-square-area-chart
https://datavizproject.com/data-type/percentage-grid/
https://www.storytellingwithdata.com/blog/what-is-a-square-area-chart
Waffle Chart
• A waffle chart is an alternative style to show progress towards a target or a
completion percentage. There is a grid of small units, of which colored cells
represent the data.
• A chart can consist of one category or several categories. Multiple waffle charts
can be put together to show a set of related measures for comparison.
• Some argues it is a good replacement of pie charts
– https://www.barefootdatascience.com/2017/09/17/waffle-vs-pie-a-visualization-showdown/
– See discussions in this thread
https://twitter.com/storywithdata/status/634145280649068544
• Reference
– https://www.storytellingwithdata.com/blog/what-is-a-square-area-chart
– https://datavizproject.com/data-type/percentage-grid/
7
Image from
https://www.storytellingwithdata.com
/blog/what-is-a-square-area-chart
https://twitter.com/storywithdata/status/634145280649068544
https://public.tableau.com/app/profile/recnac/viz/WaffleChart_15649955440870/Dashboard1
https://www.pluralsight.com/guides/tableau-playbook-individual-waffle-chart
A case for waffle chart
• Waffle chart set for a list of measures –
alternatives to pie charts.
8
https://twitter.com/storywithdata/status/634145280649068544
https://public.tableau.com/app/profile/recnac/viz/
WaffleChart_15649955440870/Dashboard1
Also refer to
https://www.pluralsight.com/guides/tableau-
playbook-individual-waffle-chart
http://en.wikipedia.org/wiki/Bullet_graph
http://www.datavizcatalogue.com/methods/bullet_graph.html
https://www.fusioncharts.com/resources/chart-primers/bullet-graph
Bullet Chart/Graph
• A bullet chart/graph is a chart to indicate performance against benchmarks and goals.
– A variation of a bar graph
– Serves as a replacement for dashboard gauges and meters
• A bullet graph can be either horizontal or vertical depending on the alignment of the quantitative
scale. The choice of vertical or horizontal alignment depends on the available space for the
visualization.
• Reference
– http://en.wikipedia.org/wiki/Bullet_graph
– http://www.datavizcatalogue.com/methods/bullet_graph.html
9
The bullet combines four
related measures/values and
shows them in a compact style.
https://www.fusioncharts.com/resources/ch
art-primers/bullet-graph
https://www.clearlyandsimply.com/clearly_and_simply/2017/05/an-alternative-design-of-bullet-graphs.html
https://datavizcatalogue.com/methods/bullet_graph.html
https://www.storytellingwithdata.com/blog/what-is-a-bullet-graph
Bullet Graph Variations
10
https://www.clearlyandsimply.com/clearly
_and_simply/2017/05/an-alternative-
design-of-bullet-graphs.html
Classic traffic light coloring system can be used
https://datavizcatalogue.com/methods/bullet_graph.html
https://www.storytellingwi
thdata.com/blog/what-is-
a-bullet-graph
Color coded bullet chart
Without performance ranges
Emphasizing the gap
Bullet Graph Sets
• Because of its compact style, a set of bullet graphs can be placed
together to show a set of measures and compare them at once.
11
Because of its small
size, it can be used
like sparklines in a
table.
https://www.kenflerlage.com/2017/09/alternatives-to-nps-gauges.html
Case: Which One?
• A design case:
https://www.kenflerlage.com/2017/09/alterna
tives-to-nps-gauges.html
12
https://www.linkedin.com/pulse/traffic-light-concept-stephen-lynch/
https://citoolkit.com/articles/traffic-light-assessment/
https://en.wikipedia.org/wiki/Traffic_light_rating_system
https://www.researchgate.net/publication/312292748_The_traffic_light_procedure_for_decision_making_its_rapid_extension_from_fisheries_to_other_sectors_of_the_economy
Traffic Light System
•
Traffic light color system (also called RAG system) uses three
to represent performance
– Red: trouble/alert
– Amber/yellow: warning
– Green: good
– https://www.linkedin.com/pulse/traffic-light-concept-stephen-lynch/
• Sometimes more steps of colors are used
• More references
– https://citoolkit.com/articles/traffic-light-assessment/
– https://en.wikipedia.org/wiki/Traffic_light_rating_system
– https://www.researchgate.net/publication/312292748_The_traffic_li
ght_procedure_for_decision_making_its_rapid_extension_from_fis
heries_to_other_sectors_of_the_economy
13
https://public.tableau.com/profile/ceterisag#!/vizhome/ibcs/IBCS
https://www.clearlyandsimply.com/clearly_and_simply/2017/05/an-alternative-design-of-bullet-graphs.html
https://ibcs.konveio.site/ibcs-standards-12#page=84
Differences/Gaps in Performance
• The differences of actual and target can also
be visualized or labelled for special attention.
• A standard variance chart can be used
– Tableau example:
https://public.tableau.com/profile/ceterisag#!/vizh
ome/ibcs/IBCS
14
https://www.clearlyandsimply.com/clear
ly_and_simply/2017/05/an-alternative-
design-of-bullet-graphs.html
Image from https://ibcs.konveio.site/ibcs-standards-12#page=84
https://zebrabi.com/ibcs/
Sparklines and Scorecards
• Condensed format to show and visualize KPI
15
Because of its small
size, it can be used
like sparklines in a
table.
Image from https://zebrabi.com/ibcs/
https://twitter.com/CernBasher/status/1715123689153302870
Case and Example
• Redesign the
chart based on
what we learned
in this class
16
https://twitter.com/CernBasher/s
tatus/1715123689153302870
https://playfairdata.com/dashboard-gauge-1-how-to-make-bullet-graphs-in-tableau/
https://help.tableau.com/current/pro/desktop/en-us/qs_bullet_graphs.htm
https://playfairdata.com/dashboard-gauge-1-how-to-make-bullet-graphs-in-tableau/
https://evolytics.com/blog/tableau-201-how-to-make-bullet-graphs/
https://www.evolytics.com/blog/tableau-201-how-to-make-donut-charts/
https://www.cleartelligence.com/post/gauge-charts-without-data-densification
https://www.phdata.io/blog/how-to-make-a-gauge-chart-in-tableau/
https://intellipaat.com/blog/tableau-gauge-chart/
https://www.youtube.com/watch?v=wRpBkl6-uhU
http://www.vizwiz.com/2017/01/tableau-tip-tuesday-how-to-create.html
https://www.pluralsight.com/guides/tableau-playbook-waffle-chart
https://www.pluralsight.com/guides/tableau-playbook-individual-waffle-chart
https://playfairdata.com/3-ways-to-make-brilliant-bullet-graphs-in-tableau/
Tableau Performance Charts
• Bullet chart:
– https://playfairdata.com/dashboard-gauge-1-how-to-make-bullet-graphs-in-tableau/
– Tableau: Bullet graphs are a “Show Me” option in Tableau, but many found that this option did not always
provide the best results
– https://help.tableau.com/current/pro/desktop/en-us/qs_bullet_graphs.htm
– https://playfairdata.com/dashboard-gauge-1-how-to-make-bullet-graphs-in-tableau/
– https://evolytics.com/blog/tableau-201-how-to-make-bullet-graphs/
• Gauge
– A simple single measure gauge chart: https://www.evolytics.com/blog/tableau-201-how-to-make-donut-
charts/ and another alternative tutorial (choose any one for submission)
•
https://www.cleartelligence.com/post/gauge-charts-without-data-densification
– A more complex gauge https://www.phdata.io/blog/how-to-make-a-gauge-chart-in-tableau/
– Gauge chart set: https://intellipaat.com/blog/tableau-gauge-chart/
• Waffle chart:
– https://www.youtube.com/watch?v=wRpBkl6-uhU (This one is one of the originals but it is a bit aged; you
may need some research and trouble shooting. You can create the grid data file yourself or follow the
blog post http://www.vizwiz.com/2017/01/tableau-tip-tuesday-how-to-create.html to get the template)
– https://www.pluralsight.com/guides/tableau-playbook-waffle-chart - inspired by the above (there is a
second part of this https://www.pluralsight.com/guides/tableau-playbook-individual-waffle-chart)
• More bullet chart customizations:
https://playfairdata.com/3-ways-to-make-brilliant-bullet-graphs-in-tableau/
17
OTHER PERFORMANCE
RELATED CHARTS
Perceptual map
Waterfall/bridge chart
18
https://www.storytellingwithdata.com/blog/2021/5/11/what-is-a-bubble-chart
https://www.alchemer.com/resources/blog/perceptual-map/
Perceptual/Positioning Map
•
Firms use perceptual or positioning maps to help them
develop a market positioning strategy for their product or
service. As the maps are based on the perception of the
buyer, they are sometimes called perceptual maps.
• Positioning maps show where existing products and
services are positioned in the market so that the firm can
decide where they would like to place (position) their
product.
– Positioning map looks very similar, but it measures objective
features rather than perceptions.
•
The most common chart type used for perceptual map is
basically a scattered plot or a bubble chart.
– https://www.storytellingwithdata.com/blog/2021/5/11/what-
is-a-bubble-chart
• Perceptual mapping was initially used for marketing to
display the perceptions of customers,
products, or brands. It then has been applied in many
areas (such as stocks, projects, players, etc.) just to see
how things are related in a typical two-dimension (axis)
map.
• Reference
–
https://www.alchemer.com/resources/blog/perceptual-map/
19
A data item is placed in
the chart based on its
two values against the x
and y axis.
https://public.tableau.com/profile/levy2725#!/vizhome/2015-163-and-D-ness/Dashboard1
Mapping Two More Attributes
• In addition to
positions in
the plot. Two
attributes are
usually added
– Color coding
for
categories
– Bubble size
for a third
quantitative
measure
20
https://public.tableau.com/profile/levy2725#!/vizho
me/2015-163-and-D-ness/Dashboard1
https://www.productchart.com/
https://www.g2.com/categories/data-visualization#grid
https://www.gartner.com/en/research/methodologies/magic-quadrants-research
https://public.tableau.com/profile/levy2725#!/vizhome/2015-163-and-D-ness/Dashboard1
https://theanalyst.com/na/2021/10/nba-stats-and-player-projections/
https://finviz.com/bubbles.ashx
https://www.gapminder.org/tools/#$chart-type=bubbles&url=v1
https://public.tableau.com/app/profile/danw5765/viz/Wk3-STARPerceptualMap/STARPerceptualMap
https://ourworldindata.org/grapher/share-of-dietary-energy-supply-from-carbohydrates-vs-gdp-per-capita
Perceptual Maps Uses and Variations
• Perceptual maps are commonly used for data exploration, showing large number of items with
many filtering and axes settings
• Products (management, exploration, evaluation)
– https://www.productchart.com
– G2 Grid https://www.g2.com/categories/data-visualization#grid
– Gartner Magic Quadrant: https://www.gartner.com/en/research/methodologies/magic-quadrants-research
• Player performance
– https://public.tableau.com/profile/levy2725#!/vizhome/2015-163-and-D-ness/Dashboard1
– https://theanalyst.com/na/2021/10/nba-stats-and-player-projections/
• Stock portfolio
– https://finviz.com/bubbles.ashx
• Countries
– https://www.gapminder.org/tools/#$chart-type=bubbles&url=v1
• Company positioning
• Others
– Market segments https://public.tableau.com/app/profile/danw5765/viz/Wk3-
STARPerceptualMap/STARPerceptualMap
– https://ourworldindata.org/grapher/share-of-dietary-energy-supply-from-carbohydrates-vs-gdp-per-capita
21
https://datavizproject.com/data-type/waterfall-chart/
https://en.wikipedia.org/wiki/Waterfall_chart
Waterfall/Bridge Chart
• A waterfall chart helps in understanding the cumulative effect of sequentially
introduced positive or negative values. It shows how an initial value is affected
by a series of intermediate positive or negative values.
– https://datavizproject.com/data-type/waterfall-chart/
– These intermediate values can either be time based or category based.
• Why use this chart?
– Mainly used to show important factors or components that drives the performance change.
– But at the same time also shows the cumulative total.
22
Starting
point
A serials of intermediate steps
(impacting factors). The size of
the column indicates the value.
Ending
point
Images from https://en.wikipedia.org/wiki/Waterfall_chart
Sometimes there is
a middle point
Each step shows the
contributing value and
the cumulative total.
https://www.wsj.com/articles/SB10001424052970204795304577221063135502908
https://xviz.com/blogs/5-visuals-that-add-value-to-your-power-bi-dashboards/
Waterfall Chart Use Cases
• To show categorical
impact
– Product lines
– Initiatives
– Departments
– Account type
– Etc.
• To show periodical
contribution
– Year
– Month
– Week
23
Image from
https://www.wsj.com/articles/S
B1000142405297020479530
4577221063135502908
https://xviz.com/blogs/5-visuals-that-
add-value-to-your-power-bi-
dashboards/
https://peltiertech.com/paired-waterfall-chart/
Waterfall Chart Variations
24
Show percentage
of change as well
Paired/stacked waterfall chart
https://peltiertech.com/paired-
waterfall-chart/
https://evolytics.com/blog/tableau-201-make-waterfall-chart/
https://www.youtube.com/watch?v=R15nXtKq-MQ
https://playfairdata.com/3-ways-to-make-wonderful-waterfall-charts-in-tableau/
https://docs.microsoft.com/en-us/power-bi/visuals/power-bi-visualization-waterfall-charts
https://xviz.com/blogs/7-visualization-techniques-with-waterfall-chart-in-power-bi/
https://support.microsoft.com/en-us/office/create-a-waterfall-chart-8de1ece4-ff21-4d37-acd7-546f5527f185
Creating Waterfall Chart
• Tableau – no direct support
– A blog https://evolytics.com/blog/tableau-201-make-waterfall-
chart/
– A video tutorial https://www.youtube.com/watch?v=R15nXtKq-
MQ
– https://playfairdata.com/3-ways-to-make-wonderful-waterfall-
charts-in-tableau/
• Power BI – direct support
– https://docs.microsoft.com/en-us/power-bi/visuals/power-bi-
visualization-waterfall-charts
– https://xviz.com/blogs/7-visualization-techniques-with-
waterfall-chart-in-power-bi/
• Excel – direct support
– https://support.microsoft.com/en-us/office/create-a-waterfall-
chart-8de1ece4-ff21-4d37-acd7-546f5527f185
25
https://www.datapine.com/blog/gauge-chart-examples/
https://www.storytellingwithdata.com/blog/what-is-a-square-area-chart
https://www.storytellingwithdata.com/blog/what-is-a-bullet-graph
https://visualbi.com/blogs/business-intelligence/dashboards/bullet-charts-use-cases/
https://www.linkedin.com/pulse/traffic-light-concept-stephen-lynch/
https://www.storytellingwithdata.com/blog/2020/11/16/what-is-a-waterfall
https://www.fusioncharts.com/resources/chart-primers/waterfall-chart
https://www.storytellingwithdata.com/blog/2021/5/11/what-is-a-bubble-chart
https://www.alchemer.com/resources/blog/perceptual-map/
Key Learning Resources
• Gauge chart: https://www.datapine.com/blog/gauge-chart-examples/
• Waffle chart: https://www.storytellingwithdata.com/blog/what-is-a-square-area-
chart
• Bullet chart
– What is a bullet graph? https://www.storytellingwithdata.com/blog/what-is-a-bullet-graph
– 5 Use Cases For Bullet Charts https://visualbi.com/blogs/business-
intelligence/dashboards/bullet-charts-use-cases/
• The traffic light concept: https://www.linkedin.com/pulse/traffic-light-concept-
stephen-lynch/
• Waterfall chart
– What is a waterfall? https://www.storytellingwithdata.com/blog/2020/11/16/what-is-a-
waterfall
– https://www.fusioncharts.com/resources/chart-primers/waterfall-chart
• Perceptual map (bubble chart)
– What is a bubble chart? https://www.storytellingwithdata.com/blog/2021/5/11/what-is-a-
bubble-chart
– https://www.alchemer.com/resources/blog/perceptual-map/
26
https://xviz.com/blogs/5-visuals-that-add-value-to-your-power-bi-dashboards/
https://www.kenflerlage.com/2017/09/alternatives-to-nps-gauges.html
https://www.visualisingdata.com/2019/08/five-ways-to-design-for-red-green-colour-blindness/
https://uxdesign.cc/beautiful-accessible-traffic-light-colors-b2b14a102a38
https://datavizcatalogue.com/methods/bullet_graph.html
https://storyiq.com/sparklines-and-bullet-graphs-in-excel-how-to-make-advanced-charts-to-track-your-companys-performance/
https://www.tableau.com/data-insights/reference-library/visual-analytics/charts/bullet-graphs
https://www.perceptualmaps.com/
https://www.segmentationstudyguide.com/understanding-perceptual-maps/perceptual-maps/
https://www.groupmap.com/map-templates/perceptual-map/
https://www.youtube.com/watch?v=clncNOBx1C8
Additional Good Resources
• https://xviz.com/blogs/5-visuals-that-add-value-to-your-power-bi-dashboards/
• Performance related data: https://www.kenflerlage.com/2017/09/alternatives-to-
nps-gauges.html
• Accessibility design for traffic light system
– https://www.visualisingdata.com/2019/08/five-ways-to-design-for-red-green-colour-
blindness/
– https://uxdesign.cc/beautiful-accessible-traffic-light-colors-b2b14a102a38
• Bullet graph
– https://datavizcatalogue.com/methods/bullet_graph.html
– https://storyiq.com/sparklines-and-bullet-graphs-in-excel-how-to-make-advanced-charts-to-
track-your-companys-performance/
– https://www.tableau.com/data-insights/reference-library/visual-analytics/charts/bullet-
graphs
• Perceptual maps
– https://www.perceptualmaps.com
– https://www.segmentationstudyguide.com/understanding-perceptual-maps/perceptual-
maps/
– https://www.groupmap.com/map-templates/perceptual-map/
– https://www.youtube.com/watch?v=clncNOBx1C8
27