isabella
isabella

Reputation: 467

Add multiple plots layout in tab layout [Bokeh]

Goal: To have 2 tabs and each tab have 2 columns. In first column there will be 8 plots (namely 8 rows), and in second column there will be 16 tables (namely 16 rows). These plots and tables are obtained through for loop.

Question: How to combine layouts of plots and tables and feed them into a tab.

Code:

data_table_past = DataTable(source=source, columns=columns, width=900, height=100, selectable=False, editable=False, fit_columns=True)
data_table_future = DataTable(source=source, columns=columns, width=900, height=100, selectable=True, editable=False, fit_columns=True)

plots_layout = column()
tables_layout = column()

for col in col_names:
    p = figure(plot_width=700, plot_height=300, x_axis_type="datetime", toolbar_location='right')
    p.line(x=data_df["datetime"], y=data_df[col], line_width=2.5, legend=col)
    plots_layout.children.append(p)
    tables_layout.children.append(data_table_past)
    tables_layout.children.append(data_table_future)

 # Create tabs
tab1_layout = layout()
tab1_layout = tab1_layout.children.append(row(plots_layout,tables_layout)) 
tab1 = Panel(child=tab1_layout, title='Tab1')
tab2 = Panel(child=tab1_layout, title='Tab2')
tabs = Tabs(tabs=[tab1, tab2], height=500)
curdoc().add_root(tabs)

Problem: It seems tab1_layout does not work. Any idea of how to combine "plots_layout" and "tables_layout" that there will be 2 columns with several rows in a tab?

Thank you!

Upvotes: 3

Views: 2006

Answers (1)

isabella
isabella

Reputation: 467

I found the solution and share in case someone else encounter the same problem.

tab1_layout = layout([[plots_layout, tables_layout]])
tab2_layout = layout([[plots_layout, tables_layout]])

# Create Tabs
tab1 = Panel(child=tab1_layout, title='Tab1')
tab2 = Panel(child=tab2_layout, title='Tab2')
# Put the Panels in a Tabs object 
tabs = Tabs(tabs=[per_type, per_family], height=500)  
curdoc().add_root(tabs)

Upvotes: 3

Related Questions