Skip to content

Commit a5ac1a8

Browse files
Mahdis-zMahdis-z
authored
Merge pull request #116 from plotly/gauge
py gauge charts
2 parents b8e8088 + 01227e4 commit a5ac1a8

File tree

6 files changed

+449
-338
lines changed

6 files changed

+449
-338
lines changed

‎python/bullet-charts.md

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
jupyter:
3+
jupytext:
4+
notebook_metadata_filter: all
5+
text_representation:
6+
extension: .md
7+
format_name: markdown
8+
format_version: '1.1'
9+
jupytext_version: 1.2.1
10+
kernelspec:
11+
display_name: Python 3
12+
language: python
13+
name: python3
14+
language_info:
15+
codemirror_mode:
16+
name: ipython
17+
version: 3
18+
file_extension: .py
19+
mimetype: text/x-python
20+
name: python
21+
nbconvert_exporter: python
22+
pygments_lexer: ipython3
23+
version: 3.7.3
24+
plotly:
25+
description: How to make bullet charts in Python with Plotly.
26+
display_as: financial
27+
has_thumbnail: true
28+
ipynb: ~notebook_demo/11
29+
language: python
30+
layout: user-guide
31+
name: Bullet Charts
32+
order: 7
33+
page_type: u-guide
34+
permalink: python/bullet-charts/
35+
thumbnail: thumbnail/bullet.png
36+
title: Python Bullet Chart | plotly
37+
v4upgrade: true
38+
---
39+
40+
#### Basic Bullet Charts
41+
Stephen Few's Bullet Chart was invented to replace dashboard [gauges](https://plot.ly/javascript/gauge-charts/) and meters, combining both types of charts into simple bar charts with qualitative bars (steps), quantitative bar (bar) and performance line (threshold); all into one simple layout.
42+
Steps typically are broken into several values, which are defined with an array. The bar represent the actual value that a particular variable reached, and the threshold usually indicate a goal point relative to the value achieved by the bar. See [indicator page](https://plot.ly/javascript/gauge-charts/) for more detail.
43+
44+
```python
45+
import plotly.graph_objects as go
46+
47+
fig = go.Figure(go.Indicator(
48+
mode = "number+gauge+delta",
49+
gauge = {'shape': "bullet"},
50+
value = 220,
51+
delta = {'reference': 300},
52+
domain = {'x': [0, 1], 'y': [0, 1]},
53+
title = {'text': "Profit"}))
54+
fig.update_layout(height = 250)
55+
56+
fig.show()
57+
```
58+
59+
#### Add Steps, and Threshold
60+
Below is the same example using "steps" attribute, which is shown as shading, and "threshold" to determine boundaries that visually alert you if the value cross a defined threshold.
61+
62+
```python
63+
import plotly.graph_objects as go
64+
65+
fig = go.Figure(go.Indicator(
66+
mode = "number+gauge+delta", value = 220,
67+
domain = {'x': [0.1, 1], 'y': [0, 1]},
68+
title = {'text' :"<b>Profit</b>"},
69+
delta = {'reference': 200},
70+
gauge = {
71+
'shape': "bullet",
72+
'axis': {'range': [None, 300]},
73+
'threshold': {
74+
'line': {'color': "red", 'width': 2},
75+
'thickness': 0.75,
76+
'value': 280},
77+
'steps': [
78+
{'range': [0, 150], 'color': "lightgray"},
79+
{'range': [150, 250], 'color': "gray"}]}))
80+
fig.update_layout(height = 250)
81+
fig.show()
82+
```
83+
84+
#### Custom Bullet
85+
The following example shows how to customize your charts. For more information about all possible options check our [reference page](https://plot.ly/javascript/reference/#indicator).
86+
87+
```python
88+
import plotly.graph_objects as go
89+
90+
fig = go.Figure(go.Indicator(
91+
mode = "number+gauge+delta", value = 220,
92+
domain = {'x': [0, 1], 'y': [0, 1]},
93+
delta = {'reference': 280, 'position': "top"},
94+
title = {'text':"<b>Profit</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>", 'font': {"size": 14}},
95+
gauge = {
96+
'shape': "bullet",
97+
'axis': {'range': [None, 300]},
98+
'threshold': {
99+
'line': {'color': "red", 'width': 2},
100+
'thickness': 0.75, 'value': 270},
101+
'bgcolor': "white",
102+
'steps': [
103+
{'range': [0, 150], 'color': "cyan"},
104+
{'range': [150, 250], 'color': "royalblue"}],
105+
'bar': {'color': "darkblue"}}))
106+
fig.update_layout(height = 250)
107+
fig.show()
108+
```
109+
110+
#### Multi Bullet
111+
Bullet charts can be stacked for comparing several values at once as illustrated below:
112+
113+
```python
114+
import plotly.graph_objects as go
115+
116+
fig = go.Figure()
117+
118+
fig.add_trace(go.Indicator(
119+
mode = "number+gauge+delta", value = 180,
120+
delta = {'reference': 200},
121+
domain = {'x': [0.25, 1], 'y': [0.08, 0.25]},
122+
title = {'text': "Revenue"},
123+
gauge = {
124+
'shape': "bullet",
125+
'axis': {'range': [None, 300]},
126+
'threshold': {
127+
'line': {'color': "black", 'width': 2},
128+
'thickness': 0.75,
129+
'value': 170},
130+
'steps': [
131+
{'range': [0, 150], 'color': "gray"},
132+
{'range': [150, 250], 'color': "lightgray"}],
133+
'bar': {'color': "black"}}))
134+
135+
fig.add_trace(go.Indicator(
136+
mode = "number+gauge+delta", value = 35,
137+
delta = {'reference': 200},
138+
domain = {'x': [0.25, 1], 'y': [0.4, 0.6]},
139+
title = {'text': "Profit"},
140+
gauge = {
141+
'shape': "bullet",
142+
'axis': {'range': [None, 100]},
143+
'threshold': {
144+
'line': {'color': "black", 'width': 2},
145+
'thickness': 0.75,
146+
'value': 50},
147+
'steps': [
148+
{'range': [0, 25], 'color': "gray"},
149+
{'range': [25, 75], 'color': "lightgray"}],
150+
'bar': {'color': "black"}}))
151+
152+
fig.add_trace(go.Indicator(
153+
mode = "number+gauge+delta", value = 220,
154+
delta = {'reference': 200},
155+
domain = {'x': [0.25, 1], 'y': [0.7, 0.9]},
156+
title = {'text' :"Satisfaction"},
157+
gauge = {
158+
'shape': "bullet",
159+
'axis': {'range': [None, 300]},
160+
'threshold': {
161+
'line': {'color': "black", 'width': 2},
162+
'thickness': 0.75,
163+
'value': 210},
164+
'steps': [
165+
{'range': [0, 150], 'color': "gray"},
166+
{'range': [150, 250], 'color': "lightgray"}],
167+
'bar': {'color': "black"}}))
168+
fig.update_layout(height = 400 , margin = {'t':0, 'b':0, 'l':0})
169+
170+
fig.show()
171+
```
172+
173+
#### Reference
174+
See https://plot.ly/python/reference/#indicator for more information and chart attribute options!
175+
176+
```python
177+
178+
```

‎python/funnel-charts.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ jupyter:
2020
has_thumbnail: true
2121
language: python
2222
display_as: financial
23-
order: 6.3
23+
order: 4
2424
ipynb: ~notebook_demo/293
2525
layout: user-guide
2626
page_type: example_index

0 commit comments

Comments
 (0)