Skip to content

Commit b6ab0bb

Browse files
emmanuelleemmanuelle
committed
table subplots
1 parent b718c8b commit b6ab0bb

File tree

1 file changed

+83
-102
lines changed

1 file changed

+83
-102
lines changed

‎notebooks/table-subplots.md

Lines changed: 83 additions & 102 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 create a subplot with tables and charts in Python with Plotly.
1626
display_as: multiple_axes
@@ -23,26 +33,13 @@ jupyter:
2333
permalink: python/table-subplots/
2434
thumbnail: thumbnail/table_subplots.jpg
2535
title: Table and Chart Subplots | plotly
36+
v4upgrade: true
2637
---
2738

28-
#### New to Plotly?
29-
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/).
30-
<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).
31-
<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!
32-
#### Version Check
33-
Note: Tables are available in version <b>2.1.0+</b><br>
34-
Run `pip install plotly --upgrade` to update your Plotly version
35-
36-
```python
37-
import plotly
38-
plotly.__version__
39-
```
40-
4139
#### Import CSV Data
4240

4341
```python
44-
import plotly.plotly as py
45-
import plotly.graph_objs as go
42+
import plotly.graph_objects as go
4643

4744
import pandas as pd
4845
import re
@@ -55,180 +52,183 @@ for i, row in enumerate(df['Date']):
5552
datetime = p.split(df['Date'][i])[0]
5653
df.iloc[i, 1] = datetime
5754

58-
table = go.Table(
55+
fig = go.Figure(go.Table(
5956
columnwidth=[0.4, 0.47, 0.48, 0.4, 0.4, 0.45, 0.5, 0.6],
6057
header=dict(
61-
#values=list(df.columns[1:]),
6258
values=['Date', 'Number<br>Transactions', 'Output<br>Volume (BTC)',
6359
'Market<br>Price', 'Hash<br>Rate', 'Cost per<br>trans-USD',
6460
'Mining<br>Revenue-USD', 'Trasaction<br>fees-BTC'],
65-
font=dict(size=10),
66-
line = dict(color='rgb(50, 50, 50)'),
61+
font_size=10,
62+
font_color='white',
63+
line_color='rgb(50, 50, 50)',
6764
align = 'left',
68-
fill = dict(color='#d562be'),
65+
fill_color='mediumpurple',
6966
),
7067
cells=dict(
7168
values=[df[k].tolist() for k in df.columns[1:]],
72-
line = dict(color='rgb(50, 50, 50)'),
69+
line_color='rgb(50, 50, 50)',
7370
align = 'left',
74-
fill = dict(color='#f5f5fa')
71+
fill_color='white'
7572
)
76-
)
77-
py.iplot([table], filename='table-of-mining-data')
73+
))
74+
fig.show()
7875
```
7976

8077
#### Table and Right Aligned Plots
8178
In Plotly there is no native way to insert a Plotly Table into a Subplot. To do this, create your own `Layout` object and defining multiple `xaxis` and `yaxis` to split up the chart area into different domains. Then for the traces you wish to insert in your final chart, set their `xaxis` and `yaxis` individually to map to the domains definied in the `Layout`. See the example below to see how to align 3 Scatter plots to the right and a Table on the top.
8279

8380
```python
84-
import plotly.plotly as py
85-
import plotly.graph_objs as go
81+
import plotly.graph_objects as go
8682

8783
import numpy as np
8884
import pandas as pd
8985

90-
table_trace1 = go.Table(
91-
domain=dict(x=[0, 0.5],
92-
y=[0, 1.0]),
86+
fig = go.Figure()
87+
88+
fig.add_trace(go.Table(
89+
domain=dict(x=[0, 0.5], y=[0, 1.0]),
9390
columnwidth = [30] + [33, 35, 33],
9491
columnorder=[0, 1, 2, 3, 4],
9592
header = dict(height = 50,
9693
values = [['<b>Date</b>'],['<b>Number<br>transactions</b>'],
9794
['<b>Output<br>volume(BTC)</b>'], ['<b>Market<br>Price</b>']],
98-
line = dict(color='rgb(50, 50, 50)'),
95+
line_color='rgb(50, 50, 50)',
9996
align = ['left'] * 5,
10097
font = dict(color=['rgb(45, 45, 45)'] * 5, size=14),
101-
fill = dict(color='#d562be')),
98+
fill_color='#d562be'),
10299
cells = dict(values = [df[k].tolist() for k in
103100
['Date', 'Number-transactions', 'Output-volume(BTC)', 'Market-price']],
104-
line = dict(color='#506784'),
101+
line_color='#506784',
105102
align = ['left'] * 5,
106103
font = dict(color=['rgb(40, 40, 40)'] * 5, size=12),
107104
format = [None] + [", .2f"] * 2 + [',.4f'],
108105
prefix = [None] * 2 + ['$', u'\u20BF'],
109106
suffix=[None] * 4,
110107
height = 27,
111-
fill = dict(color=['rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)']))
112-
)
108+
fill_color=['rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)'])
109+
))
113110

114-
trace1=go.Scatter(
111+
fig.add_trace(go.Scatter(
115112
x=df['Date'],
116113
y=df['Hash-rate'],
117114
xaxis='x1',
118115
yaxis='y1',
119116
mode='lines',
120117
line=dict(width=2, color='#9748a1'),
121118
name='hash-rate-TH/s'
122-
)
119+
))
123120

124-
trace2=go.Scatter(
121+
fig.add_trace(go.Scatter(
125122
x=df['Date'],
126123
y=df['Mining-revenue-USD'],
127124
xaxis='x2',
128125
yaxis='y2',
129126
mode='lines',
130127
line=dict(width=2, color='#b04553'),
131128
name='mining revenue'
132-
)
129+
))
133130

134-
trace3=go.Scatter(
131+
fig.add_trace(go.Scatter(
135132
x=df['Date'],
136133
y=df['Transaction-fees-BTC'],
137134
xaxis='x3',
138135
yaxis='y3',
139136
mode='lines',
140137
line=dict(width=2, color='#af7bbd'),
141138
name='transact-fee'
142-
)
139+
))
143140

144141
axis=dict(
145142
showline=True,
146143
zeroline=False,
147144
showgrid=True,
148145
mirror=True,
149146
ticklen=4,
150-
gridcolor='#ffffff',
151-
tickfont=dict(size=10)
147+
gridcolor='white',
148+
tickfont_size=10
152149
)
153150

154-
layout1 = dict(
151+
fig.update_layout(
155152
width=950,
156153
height=800,
157154
autosize=False,
158155
title='Bitcoin mining stats for 180 days',
159-
margin = dict(t=100),
156+
margin_t=100,
160157
showlegend=False,
161-
xaxis1=dict(axis, **dict(domain=[0.55, 1], anchor='y1', showticklabels=False)),
162-
xaxis2=dict(axis, **dict(domain=[0.55, 1], anchor='y2', showticklabels=False)),
163-
xaxis3=dict(axis, **dict(domain=[0.55, 1], anchor='y3')),
164-
yaxis1=dict(axis, **dict(domain=[0.66, 1.0], anchor='x1', hoverformat='.2f')),
165-
yaxis2=dict(axis, **dict(domain=[0.3 + 0.03, 0.63], anchor='x2', tickprefix='$', hoverformat='.2f')),
166-
yaxis3=dict(axis, **dict(domain=[0.0, 0.3], anchor='x3', tickprefix=u'\u20BF', hoverformat='.2f')),
158+
xaxis1=dict(axis, domain=[0.55, 1], anchor='y1', showticklabels=False),
159+
xaxis2=dict(axis, domain=[0.55, 1], anchor='y2', showticklabels=False),
160+
xaxis3=dict(axis, domain=[0.55, 1], anchor='y3'),
161+
yaxis1=dict(axis, domain=[0.66, 1.0], anchor='x1', hoverformat='.2f'),
162+
yaxis2=dict(axis, domain=[0.3 + 0.03, 0.63], anchor='x2', tickprefix='$',
163+
hoverformat='.2f'),
164+
yaxis3=dict(axis, domain=[0.0, 0.3], anchor='x3', tickprefix=u'\u20BF',
165+
hoverformat='.2f'),
167166
plot_bgcolor='rgba(228, 222, 249, 0.65)'
168167
)
169168

170-
fig1 = dict(data=[table_trace1, trace1, trace2, trace3], layout=layout1)
171-
py.iplot(fig1, filename='table-right-aligned-plots')
169+
fig.show()
172170
```
173171

174172
#### Vertical Table and Graph Subplot
175173

176174
```python
177-
import plotly.plotly as py
178-
import plotly.graph_objs as go
175+
import plotly.graph_objects as go
176+
177+
fig = go.Figure()
179178

180-
table_trace2 = go.Table(
181-
domain=dict(x=[0, 1],
182-
y=[0.7, 1.0]),
179+
fig.add_trace(go.Table(
180+
domain=dict(x=[0, 1], y=[0.7, 1.0]),
183181
columnwidth=[1, 2, 2, 2],
184182
columnorder=[0, 1, 2, 3, 4],
185183
header = dict(height = 50,
186-
values = [['<b>Date</b>'],['<b>Hash Rate, TH/sec</b>'],
187-
['<b>Mining revenue</b>'], ['<b>Transaction fees</b>']],
188-
line = dict(color='rgb(50, 50, 50)'),
184+
values = [['<b>Date</b>'],['<b>Number<br>transactions</b>'],
185+
['<b>Output<br>volume(BTC)</b>'], ['<b>Market<br>Price</b>']],
186+
line_color='rgb(50, 50, 50)',
189187
align = ['left'] * 5,
190188
font = dict(color=['rgb(45, 45, 45)'] * 5, size=14),
191-
fill = dict(color='#d562be')),
192-
cells = dict(values = [df[k].tolist() for k in ['Date', 'Hash-rate', 'Mining-revenue-USD', 'Transaction-fees-BTC']],
193-
line = dict(color='#506784'),
189+
fill_color='#d562be'),
190+
cells = dict(values = [df[k].tolist() for k in
191+
['Date', 'Number-transactions', 'Output-volume(BTC)', 'Market-price']],
192+
line_color='#506784',
194193
align = ['left'] * 5,
195194
font = dict(color=['rgb(40, 40, 40)'] * 5, size=12),
196195
format = [None] + [", .2f"] * 2 + [',.4f'],
197196
prefix = [None] * 2 + ['$', u'\u20BF'],
198197
suffix=[None] * 4,
199198
height = 27,
200-
fill = dict(color=['rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)']))
201-
)
199+
fill_color=['rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)'])
200+
))
201+
202202

203-
trace4=go.Scatter(
203+
fig.add_trace(go.Scatter(
204204
x=df['Date'],
205205
y=df['Hash-rate'],
206206
xaxis='x1',
207207
yaxis='y1',
208208
mode='lines',
209209
line=dict(width=2, color='#9748a1'),
210210
name='hash-rate-TH/s'
211-
)
211+
))
212212

213-
trace5=go.Scatter(
213+
fig.add_trace(go.Scatter(
214214
x=df['Date'],
215215
y=df['Mining-revenue-USD'],
216216
xaxis='x2',
217217
yaxis='y2',
218218
mode='lines',
219219
line=dict(width=2, color='#b04553'),
220220
name='mining revenue'
221-
)
221+
))
222222

223-
trace6=go.Scatter(
223+
fig.add_trace(go.Scatter(
224224
x=df['Date'],
225225
y=df['Transaction-fees-BTC'],
226226
xaxis='x3',
227227
yaxis='y3',
228228
mode='lines',
229229
line=dict(width=2, color='#af7bbd'),
230230
name='transact-fee'
231-
)
231+
))
232232

233233
axis=dict(
234234
showline=True,
@@ -240,47 +240,28 @@ axis=dict(
240240
tickfont=dict(size=10)
241241
)
242242

243-
layout2 = dict(
243+
fig.update_layout(
244244
width=950,
245245
height=800,
246246
autosize=False,
247247
title='Bitcoin mining stats for 180 days',
248248
margin = dict(t=100),
249249
showlegend=False,
250-
xaxis1=dict(axis, **dict(domain=[0, 1], anchor='y1', showticklabels=False)),
251-
xaxis2=dict(axis, **dict(domain=[0, 1], anchor='y2', showticklabels=False)),
252-
xaxis3=dict(axis, **dict(domain=[0, 1], anchor='y3')),
253-
yaxis1=dict(axis, **dict(domain=[2 * 0.21 + 0.02 + 0.02, 0.68], anchor='x1', hoverformat='.2f')),
254-
yaxis2=dict(axis, **dict(domain=[0.21 + 0.02, 2 * 0.21 + 0.02], anchor='x2', tickprefix='$', hoverformat='.2f')),
255-
yaxis3=dict(axis, **dict(domain=[0.0, 0.21], anchor='x3', tickprefix=u'\u20BF', hoverformat='.2f')),
250+
xaxis1=dict(axis, domain=[0, 1], anchor='y1', showticklabels=False),
251+
xaxis2=dict(axis, domain=[0, 1], anchor='y2', showticklabels=False),
252+
xaxis3=dict(axis, domain=[0, 1], anchor='y3'),
253+
yaxis1=dict(axis, domain=[2 * 0.21 + 0.02 + 0.02, 0.68], anchor='x1', hoverformat='.2f'),
254+
yaxis2=dict(axis, domain=[0.21 + 0.02, 2 * 0.21 + 0.02], anchor='x2', tickprefix='$',
255+
hoverformat='.2f'),
256+
yaxis3=dict(axis, domain=[0.0, 0.21], anchor='x3', tickprefix=u'\u20BF',
257+
hoverformat='.2f'),
256258
plot_bgcolor='rgba(228, 222, 249, 0.65)'
257259
)
258260

259-
fig2 = dict(data=[table_trace2, trace4, trace5, trace6], layout=layout2)
260-
py.iplot(fig2, filename='vertical-stacked-subplot-tables')
261+
fig.show()
261262
```
262263

263264
#### Reference
264265
See https://plot.ly/python/reference/#table for more information regarding chart attributes! <br>
265266
For examples of Plotly Tables, see: https://plot.ly/python/table/
266267

267-
```python
268-
from IPython.display import display, HTML
269-
270-
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" />'))
271-
display(HTML('<link rel="stylesheet" type="text/css" href="http://help.plot.ly/documentation/all_static/css/ipython-notebook-custom.css">'))
272-
273-
! pip install git+https://github.com/plotly/publisher.git --upgrade
274-
import publisher
275-
publisher.publish(
276-
'table-subplots.ipynb', 'python/table-subplots/', 'Table and Chart Subplots',
277-
'How to create a subplot with tables and charts in Python with Plotly.',
278-
title = 'Table and Chart Subplots | plotly',
279-
has_thumbnail='true', thumbnail='thumbnail/table_subplots.jpg',
280-
language='python',
281-
display_as='multiple_axes', order=11)
282-
```
283-
284-
```python
285-
286-
```

0 commit comments

Comments
 (0)