Bokeh Column Layout not displayed
See original GitHub issueSummary
Bokeh column layout are not being displayed
Steps to reproduce
Execute the code below
Expected behavior:
Column layout should work
Actual behavior:
Other layouts are working fine
Debug info
- Streamlit version: Streamlit, version 0.67.0
- Python version: 3.7.4
- Using PyEnv
- OS version: Linux Mint 19
- Browser version: Google Chrome 84.0.4147.125
Additional information
bokeh.sampledata.download()
# In[2]:
from bokeh.embed import file_html
from bokeh.resources import CDN, INLINE
from bokeh.sampledata.stocks import AAPL, GOOG, IBM, MSFT
import holoviews as hv
from holoviews.operation.timeseries import rolling
from holoviews import opts
import numpy as np
import pandas as pd
import streamlit as st
# In[3]:
hv.extension('bokeh')
color_cycle = hv.Cycle(values=['#A6CEE3', '#B2DF8A','#33A02C', '#FB9A99'])
def get_curve(data, label=''):
df = pd.DataFrame(data)
df['date'] = df.date.astype('datetime64[ns]')
return hv.Curve(df, ('date', 'Date'), ('adj_close', 'Price'), label=label)
hv.Dimension.type_formatters[np.datetime64] = '%Y'
aapl = get_curve(AAPL, label='AAPL')
goog = get_curve(GOOG, label='GOOG')
ibm = get_curve(IBM, label='IBM')
msft = get_curve(MSFT, label='MSFT')
avg_curve = rolling(aapl, rolling_window=30).relabel('Average')
avg_scatter = hv.Scatter((np.array(AAPL['date'], dtype=np.datetime64), np.array(AAPL['adj_close'])),
('date', 'Date'), ('adj_close', 'Price'), label='close')
# In[4]:
full_view = ((aapl * goog * ibm * msft) + (avg_scatter * avg_curve)).opts(
opts.Curve(color=color_cycle),
opts.Curve('Curve.Average', color='navy'),
opts.Scatter(alpha=0.2, size=4, color='darkgrey'),
opts.Overlay(width=400, height=400, legend_position='top_left'))
# In[5]:
full_view
# In[6]:
single_view = aapl
# In[7]:
single_view
# In[8]:
type(hv.render(single_view, backend='bokeh'))
# In[9]:
### THIS WORKS
st.write(hv.render(single_view, backend='bokeh'))
# In[10]:
type(hv.render(full_view, backend='bokeh'))
# In[11]:
### THIS WORKS
st.write(hv.render(full_view[0], backend='bokeh'))
# In[12]:
### THIS DOES NOT WORK
st.write(hv.render(full_view, backend='bokeh'))```
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
bokeh plot is missing in layout - python - Stack Overflow
I am trying to use layout() to get this working. But, for some reason, the widgets show up but not the plot. Below...
Read more >Creating layouts — Bokeh 2.4.3 Documentation
Layout functions let you build a grid of plots and widgets. You can have as many rows, columns, or grids of plots in...
Read more >How to use the bokeh.layouts.column function in bokeh - Snyk
To help you get started, we've selected a few bokeh.layouts.column examples, based on popular ways it is used in public projects.
Read more >Interactive Data Visualization with Bokeh - Trenton McKinney
if not dir_path.parents[0].exists(): ... Basic plotting with bokeh.plotting; Layouts, interactions, ... Drill down into details not visible in the plot.
Read more >Dynamically show/hide panel layouts - HoloViz Discourse
Specifically, panel Row and Column layouts do not have a visible property. I can access and set the visible property by getting the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Awesome! I was able to reproduce the issue @LeonDpl ! This is due to the way we make Bokeh work in our frontend implementation.
Essentially, we generate an id for the chart based on an index. The index is (more or less) the position vertically in the report. We, then, use Bokeh to render the element. Eventually, we have elements with duplicate ids, and the browser favors the first element (the first column).
The simplest fix would entail incorporating the location more into the id. We have a concept of a “delta path” that indicates more specific placement, but it isn’t sent to the frontend (somewhat deliberately). We would need to figure out what’s the best way to send it through.
I have marked this as a project to work on for tech debt. I cannot give a timeframe, but once we get an idea, we can share it for contributors to help out if needed.
Hi @kmcgrady using both streamlit version 0.80 or 0.81.1