How to create a HTML file with 3 subplots and a table?

📊 Plotly Python
1

I would like to use python to produce a html with 3 subplot (2 line graph, 1 histogram) and 1 table (2x2)

However, the html file produced could not show the subplot and the table in a readable size.

I think there should have some coding error in the subplot setting.

Could anyone advise the correct setting of the code to produce multiple subplots with tables?

#   add table data
table_data = [
    ['time_range_minutes', 30],
    ['trailing_stop_point', 100]
    ]

# Initialize a figure with ff.create_table(table_data)
figure = ff.create_table(table_data, height_constant=60)

# Add graph data
trace1 = go.Scatter(
    x=trade_number,
    y=list_profit,
    name='Profit'
)
trace2 = go.Scatter(
    x=trade_number,
    y=list_MDD,
    name='MDD'
)
trace3 = go.Histogram(
    x=list_profit,
    name='profit'
)

#   Add trace data to figure
figure['data'].extend(go.Data([trace1, trace2, trace3]))

#  Anchor
figure.layout.yaxis2.update({'anchor': 'x2'})
figure.layout.xaxis2.update({'anchor': 'y2'})

# Update the margins to add a title and see graph x-labels.
figure.layout.margin.update({'t': 75, 'l': 50})

# the plot height calculated for the table
figure.layout.update({'height': 800})

#   Create Html
folder_name = 'folder_name' + '.html'

plotly.offline.plot(figure, filename=folder_name)
2

@b001800 You should define 2X2 subplots as follows:

    from plotly import tools
    fig = tools.make_subplots(rows=2,
                      cols=2,
                      print_grid=True,
                      vertical_spacing=0.085,
                      horizontalspacing=0.085,
                      subplot_titles=('Title1', 'Title2, 'Title3', 'Title4')

)

Then append each trace to the corresponding cell:

        fig.append_trace(trace1, 1,1)

etc.
Insert the table in the last cell (2,2) as it is explained here:https://plot.ly/~empet/14374

1 Like
3

By referencing the link, to create 4 subplots. The 3 graphs can now be produced normally.

But the table is still not in normally expression as shown below

newplot1.png700×1000 30.9 KB

The updated coding is shown below

add table data

table1 = [
    ['Parameter', 'Value'],
    ['time_range_minutes', 30],
    ['trailing_stop_point', 100],
]

# Initialize a figure with ff.create_table(table_data)
table = ff.create_table(table1)

# Add graph data
trace1 = go.Scatter(
    x=trade_number,
    y=list_profit,
    name='profit'
)
trace2 = go.Scatter(
    x=trade_number,
    y=list_mdd,
    name='MDD'
)
trace3 = go.Histogram(
    x=list_profit,
    name='profit'
)

# Subplots
fig = tools.make_subplots(
    rows=2,
    cols=2,
    print_grid=True
)

fig.append_trace(trace1, 1, 1)
fig.append_trace(trace2, 2, 1)
fig.append_trace(trace3, 1, 2)
fig.append_trace(table['data'][0], 2, 2)

#   Layout setting
fig['layout'].update(height=1000)

#   Create Html
folder_name = 'folder_name' + '.html'
plotly.offline.plot(fig, filename=folder_name)
4

@b001800 Your plot does not display the table in a convenient form, because you transferred only the table['data'][0] to your fig['data']. The table header and the values in each cell are recorded in table['layout']['annotations'] and from these annotations you should define fig['layout']['annotations']. But in table['annotations'] each annotation is referenced to xaxis1, yaxis1. Hence you must make an update for each annotation in fig, setting xref='x4', yref='y4'.

In this Jupyter notebook https://plot.ly/~empet/14573 I illustrated step by step the contents of both layouts and the changes that should be performed in fig['layout'].

2 Likes
5

Thanks a lot! It works :slight_smile: