Hi,
I have been very exited of the latest release of panel (1.0) and all of its new features and Bokeh 3 support. It has been amazing to witness development of this library.
On last Thursday I had to immediately test how a project that I am currently developing is running on it.
I have been writing code for a program that has a selector where you can choose an area and a pie chart that displays data from selected area. The problem is that program doesn’t render the most recently selected value and shows pie chart based on the previously selected value when it is run by panel.serve.
I have bound the chart to a select widget and it works well when I do display it inside a Jupyter notebook. When served from Jupyter by panel.serve() on a separate window plotly chart gets rendered by using values from the previously selected value from the Select widget.
I am not sure if it the problem is on my code, but same type of code worked well on previous version. I haven’t found any solution on how to fix this even though I have tried other bindings methods explained in current documentation.
I would be again grateful for any hints that would push me to right direction on solving this issue.
Code below can be used to demonstrates the problem.
import pandas as pd
import panel as pn
import plotly.express as px
# Define data for pie chart and selector by creating a dataframe
data = [["NWA", 2, 3, 4],
["NWB", 6, 8, 3],
["RCA", 2, 3, 7],
["DNO", 7, 8, 1]]
source_df = pd.DataFrame(data, columns=['Area', 'pop_A', 'pop_B', 'pop_C'])
source_df.set_index("Area", inplace=True)
# Modify data to use as plotly pie chart source
tr_source_df = source_df.transpose()
tr_source_df['AreaName'] = tr_source_df.index
# Define Pie chart
def create_plotly_pie(selectorvalue):
# Define data source
pie_source = tr_source_df
# Define plot colours
colormap = {'pop_A': '#7570b3', 'pop_B': '#e7298a', 'pop_C': '#1b9e77'}
# Define pie chart
fig = px.pie(pie_source, values=selectorvalue, names='AreaName', color='AreaName',
color_discrete_map=colormap)
# Define mouse hover info
fig.update_traces(
hoverinfo='label+percent',
textinfo='value',
textfont_size=20,
)
# Make chart responsive
fig.layout.autosize = True
# Return figure
return fig
# Selector
# Define dropdown selector to select data for pie chart
selector = pn.widgets.Select(
name='Choose an area',
options=source_df.index.to_list())
# Define selector UI
selector_row = pn.Row(selector, height=100)
# Create pie chart by binding it to the selector
@pn.depends(selector.param.value)
def present_plotly_pie(selectorvalue):
pie_chart = create_plotly_pie(selectorvalue)
return pn.pane.Plotly(pie_chart, config={'responsive': True, 'displayModeBar': False}, margin = (0,0,0,0))
# Serve selector and pie chart UI
#pn.serve(pn.Column(selector_row, pn.Row(present_plotly_pie, height=300)))
# OR
# Display it on notebook
pn.extension('plotly')
pn.Column(selector_row, pn.Row(present_plotly_pie, height=300))