Using Panel RangeSlider to update bounds of hvplot dynamic map

hvPlot
, , ,
1

ALL software version info

  • Windows OS
  • Google Chrome
  • bokeh - 2.3.2
  • panel 0.11.3
  • numpy 1.20.3
  • pandas 1.2.3
  • hvplot 0.7.1
  • holoviews 1.14.3

Description of expected behavior and the observed behavior

We are trying to use a Panel RangeSlider to update the x-range of a hvplot dynamic map. When we have one plot, our code works fine - changing the bounds of our range slider changes the bounds of the linked plot. However, when we overlay another curve on top of our existing plot, the link between the RangeSlider and the plot bounds breaks.
The code attached below is a simpler version of our use case, which contains millions of points. Therefore, for the sake of performance, we cannot use a Bokeh RangeToolLink or use shared_axes = True. We would greatly appreciate advice on how to successfully build a JavaScript link between a Panel RangeSlider and an overlaid hvplot.

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
import numpy as np
import pandas as pd
import hvplot.pandas

from holoviews import opts

# button callback when clicked - overlays a line onto existing plot
def overlay_plot(event):
    global plot1

    overlay = data.hvplot.line(x = 'x', y = 'y2', width = 900, height = 360)
    overlay_plot = plot1 * overlay
    main_page.__setitem__(2, overlay_plot)

# range slider creation
x_slider = pn.widgets.RangeSlider(title='X-Axis Scale', start=0, 
    end=10, step=0.1, value=(0, 10), show_value=False)

#define data and plotting figure
x = np.linspace(0, 10, 1000)
data = pd.DataFrame({'x': x, 'y': np.sin(x), 'y2': np.cos(x)})
plot1 = data.hvplot.line(x = 'x', y = 'y', width = 900, height = 360)

# javascript code for callback
code = """
x_range.start = source.value[0]
x_range.end = source.value[1]
"""

# button to call for an overlay event
new_plot_btn = pn.widgets.Button(name='Overlay', button_type='primary', disabled=False)
new_plot_btn.on_click(overlay_plot)

# javascript link to js code to link the range slider to the existing pot to update x range bounds
x_slider.jslink(plot1, code={'value_throttled': code})
main_page = pn.Column(new_plot_btn, x_slider, plot1)
main_page.servable()

Stack traceback and/or browser JavaScript console output

No errors displayed in command line or javascript console.

Screenshots or screencasts of the bug in action

N/A

2

Thanks for posting here, for now I’ve moved your issue to Panel: Using Panel RangeSlider to update bounds of holoviews dynamic map · Issue #2359 · holoviz/panel · GitHub

3

Thank you