Skip to content

Commit c764387

Browse files
emmanuelleemmanuelle
committed
gauge chart
1 parent 9c058c0 commit c764387

File tree

1 file changed

+122
-141
lines changed

1 file changed

+122
-141
lines changed

‎notebooks/gauge-charts.md

Lines changed: 122 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,19 @@ jupyter:
88
format_version: '1.1'
99
jupytext_version: 1.1.1
1010
kernelspec:
11-
display_name: Python 2
11+
display_name: Python 3
1212
language: python
13-
name: python2
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.6.7
1424
plotly:
1525
description: How to make guage meter charts in Python with Plotly.
1626
display_as: basic
@@ -24,124 +34,86 @@ jupyter:
2434
permalink: python/gauge-charts/
2535
thumbnail: thumbnail/gauge.jpg
2636
title: Python Gauge Chart | plotly
37+
v4upgrade: true
2738
---
2839

29-
#### New to Plotly?
30-
Plotly's Python library is free and open source! [Get started](https://plot.ly/python/getting-started/) by downloading the client and [reading the primer](https://plot.ly/python/getting-started/).
31-
<br>You can set up Plotly to work in [online](https://plot.ly/python/getting-started/#initialization-for-online-plotting) or [offline](https://plot.ly/python/getting-started/#initialization-for-offline-plotting) mode, or in [jupyter notebooks](https://plot.ly/python/getting-started/#start-plotting-online).
32-
<br>We also have a quick-reference [cheatsheet](https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf) (new!) to help you get started!
33-
34-
35-
##### Gauge Chart Outline
40+
#### Gauge Chart Outline
3641

3742
We will use `donut` charts with custom colors to create a `semi-circular` gauge meter, such that lower half of the chart is invisible(same color as background).
3843

3944
This `semi-circular` meter will be overlapped on a base `donut` chart to create the `analog range` of the meter. We will have to rotate the base chart to align the range marks in the edges of meter's section, because by default `Plotly` places them at the center of a pie section.
4045

4146

42-
##### Base Chart (rotated)
47+
#### Base Chart (rotated)
4348

4449
To make a `gauge meter` with 5 equally sized sections, we will create 6 sections in the base chart. So that center(position of label) aligns with the edges of each section.
4550

4651
```python
47-
import plotly.plotly as py
48-
import plotly.graph_objs as go
49-
50-
base_chart = {
51-
"values": [40, 10, 10, 10, 10, 10, 10],
52-
"labels": ["-", "0", "20", "40", "60", "80", "100"],
53-
"domain": {"x": [0, .48]},
54-
"marker": {
55-
"colors": [
56-
'rgb(255, 255, 255)',
57-
'rgb(255, 255, 255)',
58-
'rgb(255, 255, 255)',
59-
'rgb(255, 255, 255)',
60-
'rgb(255, 255, 255)',
61-
'rgb(255, 255, 255)',
62-
'rgb(255, 255, 255)'
63-
],
64-
"line": {
65-
"width": 1
66-
}
67-
},
68-
"name": "Gauge",
69-
"hole": .4,
70-
"type": "pie",
71-
"direction": "clockwise",
72-
"rotation": 108,
73-
"showlegend": False,
74-
"hoverinfo": "none",
75-
"textinfo": "label",
76-
"textposition": "outside"
77-
}
78-
52+
import plotly.graph_objects as go
53+
54+
fig = go.Figure(data=go.Pie(
55+
values=[40, 10, 10, 10, 10, 10, 10],
56+
labels=["-", "0", "20", "40", "60", "80", "100"],
57+
domain={"x": [0, .48]},
58+
marker=dict(colors=['white']*7, line_width=1),
59+
name="Gauge",
60+
hole=.4,
61+
direction="clockwise",
62+
rotation=108,
63+
showlegend=False,
64+
hoverinfo="none",
65+
textinfo="label",
66+
textposition="outside"
67+
))
68+
fig.show()
7969
```
8070

81-
Outline of the generated `base chart` will look like the one below.
82-
83-
84-
<div>
85-
<a href="https://plot.ly/~pravj648/233/" target="_blank" title="Gauge" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj648/233.png" alt="Gauge" style="max-width: 100%;width: 600px;" width="600" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
86-
<script data-plotly="pravj648:233" src="https://plot.ly/embed.js" async></script>
87-
</div>
88-
89-
9071
##### Meter Chart
9172

9273
Now we will superimpose our `semi-circular` meter on top of this.<br>
9374
For that, we will also use 6 sections, but one of them will be invisible to form the lower half (colored same as the background).
9475

9576
```python
96-
meter_chart = {
97-
"values": [50, 10, 10, 10, 10, 10],
98-
"labels": ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
99-
"marker": {
100-
'colors': [
77+
import plotly.graph_objects as go
78+
79+
fig = go.Figure(data=go.Pie(
80+
values=[50, 10, 10, 10, 10, 10],
81+
labels=["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
82+
domain={"x": [0, .48]},
83+
marker=dict(colors=[
10184
'rgb(255, 255, 255)',
10285
'rgb(232,226,202)',
10386
'rgb(226,210,172)',
10487
'rgb(223,189,139)',
10588
'rgb(223,162,103)',
10689
'rgb(226,126,64)'
107-
]
108-
},
109-
"domain": {"x": [0, 0.48]},
110-
"name": "Gauge",
111-
"hole": .3,
112-
"type": "pie",
113-
"direction": "clockwise",
114-
"rotation": 90,
115-
"showlegend": False,
116-
"textinfo": "label",
117-
"textposition": "inside",
118-
"hoverinfo": "none"
119-
}
120-
90+
], line_width=1),
91+
name="Gauge",
92+
hole=.3,
93+
direction="clockwise",
94+
rotation=90,
95+
showlegend=False,
96+
hoverinfo="none",
97+
textinfo="label",
98+
textposition="inside"
99+
))
100+
101+
fig.show()
121102
```
122103

123104
You can see that the first section's value is equal to the sum of other sections.<br>
124105
We are using `rotation` and `direction` parameters to start the sections from 3 o'clock `[rotation=90]` instead of the default value of 12 o'clock `[rotation=0]`.
125106

126107

127-
After imposing on the base chart, it'll look like this.
128-
129-
130-
<div>
131-
<a href="https://plot.ly/~pravj648/235/" target="_blank" title="Gauge vs Gauge" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj648/235.png" alt="Gauge vs Gauge" style="max-width: 100%;width: 600px;" width="600" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
132-
<script data-plotly="pravj648:235" src="https://plot.ly/embed.js" async></script>
133-
</div>
134-
135-
136108
##### Dial
137109

138110
Now we need a `dial` to show the current position in the meter at a particular time.<br>
139111
`Plotly's` [path shape](https://plot.ly/python/reference/#layout-shapes-path) can be used for this. A nice explanation of SVG path is available [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) by Mozilla.<br>
140112
We can use a `filled triangle` to create our `Dial`.
141113

142114

143-
```python
144-
...
115+
116+
```
145117
'shapes': [
146118
{
147119
'type': 'path',
@@ -154,80 +126,89 @@ We can use a `filled triangle` to create our `Dial`.
154126
'yref': 'paper'
155127
}
156128
]
157-
...
158129
```
159130

160131

132+
161133
For the `filled-triangle`, the first point `(0.235, 0.5)` is left to the center of meter `(0.24, 0.5)`, the second point `(0.24 0.62)` is representing the current position on the `semi-circle` and the third point `(0.245, 0.5)` is just right to the center.
162134

163135

164136
`M` represents the `'Move'` command that moves cursor to a particular point, `L` is the `'Line To'` command and `Z` represents the `'Close Path'` command. This way, this path string makes a triangle with those three points.
165137

166138
```python
167-
layout = {
168-
'xaxis': {
169-
'showticklabels': False,
170-
'showgrid': False,
171-
'zeroline': False,
172-
},
173-
'yaxis': {
174-
'showticklabels': False,
175-
'showgrid': False,
176-
'zeroline': False,
177-
},
178-
'shapes': [
179-
{
180-
'type': 'path',
181-
'path': 'M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z',
182-
'fillcolor': 'rgba(44, 160, 101, 0.5)',
183-
'line': {
184-
'width': 0.5
185-
},
186-
'xref': 'paper',
187-
'yref': 'paper'
188-
}
139+
# Now put everything together!
140+
import plotly.graph_objects as go
141+
142+
fig = go.Figure(data=go.Pie(
143+
values=[50, 10, 10, 10, 10, 10],
144+
labels=["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
145+
domain={"x": [0, .48]},
146+
marker_colors=[
147+
'rgb(255, 255, 255)',
148+
'rgb(232,226,202)',
149+
'rgb(226,210,172)',
150+
'rgb(223,189,139)',
151+
'rgb(223,162,103)',
152+
'rgb(226,126,64)'
153+
],
154+
name="Gauge",
155+
hole=.3,
156+
direction="clockwise",
157+
rotation=90,
158+
showlegend=False,
159+
hoverinfo="none",
160+
textinfo="label",
161+
textposition="inside"
162+
))
163+
164+
# For numerical labels
165+
fig.add_trace(go.Pie(
166+
values=[40, 10, 10, 10, 10, 10, 10],
167+
labels=["-", "0", "20", "40", "60", "80", "100"],
168+
domain={"x": [0, .48]},
169+
marker_colors=['rgba(255, 255, 255, 0)']*7,
170+
hole=.4,
171+
direction="clockwise",
172+
rotation=108,
173+
showlegend=False,
174+
hoverinfo="none",
175+
textinfo="label",
176+
textposition="outside"
177+
))
178+
179+
fig.update_layout(
180+
xaxis=dict(
181+
showticklabels=False,
182+
showgrid=False,
183+
zeroline=False,
184+
),
185+
yaxis=dict(
186+
showticklabels=False,
187+
showgrid=False,
188+
zeroline=False,
189+
),
190+
shapes=[dict(
191+
type='path',
192+
path='M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z',
193+
fillcolor='rgba(44, 160, 101, 0.5)',
194+
line_width=0.5,
195+
xref='paper',
196+
yref='paper')
189197
],
190-
'annotations': [
191-
{
192-
'xref': 'paper',
193-
'yref': 'paper',
194-
'x': 0.23,
195-
'y': 0.45,
196-
'text': '50',
197-
'showarrow': False
198-
}
198+
annotations=[
199+
dict(xref='paper',
200+
yref='paper',
201+
x=0.23,
202+
y=0.45,
203+
text='50',
204+
showarrow=False
205+
)
199206
]
200-
}
201-
202-
# we don't want the boundary now
203-
base_chart['marker']['line']['width'] = 0
207+
)
204208

205-
fig = {"data": [base_chart, meter_chart],
206-
"layout": layout}
207-
py.iplot(fig, filename='gauge-meter-chart')
209+
fig.show()
208210
```
209211

210212
#### Reference
211213
See https://plot.ly/python/reference/ for more information and chart attribute options!
212214

213-
```python
214-
from IPython.display import display, HTML
215-
216-
display(HTML('<link href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Inconsolata|Ubuntu+Mono:400,700" rel="stylesheet" type="text/css" />'))
217-
display(HTML('<link rel="stylesheet" type="text/css" href="http://help.plot.ly/documentation/all_static/css/ipython-notebook-custom.css">'))
218-
219-
! pip install git+https://github.com/plotly/publisher.git --upgrade
220-
import publisher
221-
publisher.publish(
222-
'semicircular-gauge.ipynb', 'python/gauge-charts/', 'Python Gauge Chart | plotly',
223-
'How to make guage meter charts in Python with Plotly. ',
224-
name = 'Gauge Charts',
225-
title = 'Python Gauge Chart | plotly',
226-
thumbnail='thumbnail/gauge.jpg', language='python',
227-
has_thumbnail='true', display_as='basic', order=11,
228-
ipynb='~notebook_demo/11')
229-
```
230-
231-
```python
232-
233-
```

0 commit comments

Comments
 (0)