Plotly saving multiple plots into a single html
In the Plotly API there is a function to_html
which returns HTML of the figure. Moreover, you can set option param full_html=False
which will give you just DIV containing figure.
You can just write multiple figures to one HTML by appending DIVs containing figures:
with open('p_graph.html', 'a') as f:
f.write(fig1.to_html(full_html=False, include_plotlyjs='cdn'))
f.write(fig2.to_html(full_html=False, include_plotlyjs='cdn'))
f.write(fig3.to_html(full_html=False, include_plotlyjs='cdn'))
https://plot.ly/python-api-reference/generated/plotly.io.to_html.html
You can also use Beautiful Soup to do DOM manipulation and insert DIV exactly where you need it in the HTML.
https://beautiful-soup-4.readthedocs.io/en/latest/#append
Here is an example that looks pretty good:
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import plotly.figure_factory as ff
import numpy as np
import plotly
y1 = np.random.randn(200) - 1
y2 = np.random.randn(200)
y3 = np.random.randn(200) + 1
x = np.linspace(0, 1, 200)
colors = ['#3f3f3f', '#00bfff', '#ff7f00']
fig = make_subplots(
rows=3, cols=2,
column_widths=[0.55, 0.45],
row_heights=[1., 1., 1.],
specs=[[{"type": "scatter"}, {"type": "xy"}],
[{"type": "scatter"}, {"type": "xy", "rowspan": 2}],
[{"type": "scatter"}, None ]])
fig.add_trace(
go.Scatter(x = x,
y = y1,
hoverinfo = 'x+y',
mode='lines',
line=dict(color='#3f3f3f',
width=1),
showlegend=False,
),
row=1, col=1
)
fig.add_trace(
go.Scatter(x = x,
y = y2,
hoverinfo = 'x+y',
mode='lines',
line=dict(color='#00bfff',
width=1),
showlegend=False,
),
row=2, col=1
)
fig.add_trace(
go.Scatter(x = x,
y = y3,
hoverinfo = 'x+y',
mode='lines',
line=dict(color='#ff7f00',
width=1),
showlegend=False,
),
row=3, col=1
)
boxfig= go.Figure(data=[go.Box(x=y1, showlegend=False, notched=True, marker_color="#3f3f3f", name='3'),
go.Box(x=y2, showlegend=False, notched=True, marker_color="#00bfff", name='2'),
go.Box(x=y3, showlegend=False, notched=True, marker_color="#ff7f00", name='1')])
for k in range(len(boxfig.data)):
fig.add_trace(boxfig.data[k], row=1, col=2)
group_labels = ['Group 1', 'Group 2', 'Group 3']
hist_data = [y1, y2, y3]
distplfig = ff.create_distplot(hist_data, group_labels, colors=colors,
bin_size=.2, show_rug=False)
for k in range(len(distplfig.data)):
fig.add_trace(distplfig.data[k],
row=2, col=2
)
fig.update_layout(barmode='overlay')
plotly.offline.plot(fig, filename='test.html')
#fig.show()
It depend how do you build the html page. If it is with from plotly.offline.plot(fig, filename='name.html') than it is not possible. As you mentioned than subplot are too small, you can play with play with height and weight variable in layout:
On layout:
from plotly.offline import plot
from plotly.subplots import make_subplots
import plotly.graph_objects as go
fig = make_subplots(
rows=3, cols=1, shared_xaxes=True,
vertical_spacing=0.02)
fig.add_trace(go.Scatter(x=[0, 1, 2], y=[10, 11, 12]),
row=3, col=1)
fig.add_trace(go.Scatter(x=[2, 3, 4], y=[100, 110, 120]),
row=2, col=1)
fig.add_trace(go.Scatter(x=[3, 4, 5], y=[1000, 1100, 1200]),
row=1, col=1)
fig.update_layout(height=1200, width=600,
title_text="Stacked Subplots with Shared X-Axes")
fig['layout']['yaxis1'].update(domain=[0, 0.2])
fig['layout']['yaxis2'].update(domain=[0.3, 0.7])
fig['layout']['yaxis3'].update(domain=[0.8, 1])
plotly.offline.plot(fig, filename='name.html')
If you build by yourself the html page you can render the html divs as http://www.codingwithricky.com/2019/08/28/easy-django-plotly/ and play on height and width variable of layout to make it bigger or smaller.