Enable DynamicMap interaction in browser

hvPlot
1

Hi, I am using Holoview and tried to create an interactive hv.DynamicMap.
this is a chunk of the code:

posxy = hv.streams.Tap(source=soundspeed, x=startDate)
def tap_date(x, y):
date = pd.to_datetime(x)
strDate = str(date.date())
return hv.Scatter(data[strDate], label=f’{strDate}: Speed of Sound [m/s] vs Depth[m]’)
tap_dmap = hv.DynamicMap(tap_date, streams=[posxy])
(soundspeed + tap_dmap).opts(
opts.Image(
title=locationName + " Speed of Sound with Depth vs Time",
width=600, height=500,
tools=[‘hover’],
ylabel=‘Depth [m]’,
invert_yaxis=True,
ylim=(0,250),
xlabel=‘Date’,
cmap=‘viridis’,
colorbar=True,
),
opts.Scatter(
framewise=True,
width=375, height=500,
tools=[‘hover’],
invert_axes=True,
ylabel=‘Speed of Sound [m/s]’,
yaxis=‘right’,
invert_yaxis=True,
ylim=(1460, 1520),
xlabel=‘Depth’,
xlim=(0,200),
),
)

the effect looks like:

截屏2022-08-27 23.28.00
截屏2022-08-27 23.28.001012×539 74.8 KB

basically when you click on left graph, the right graph will get updated to a new graph.However, this interaction only work on Jupyter notebook, when I use “hvplot.save(graph, ‘test2.html’)” and save this interactive graph into a html file, the interactivity disappear, when you click the left graph again, the right graph no longer gets updated. I am wondering how to enable this interaction in html again?

let me know if you need any other info

2

DynamicMap needs a python server to run in the background. So you can’t save it as HTML.

See here for a more detailed answer.

4

Hi, thanks a lot for the answer. So I checked out this post that you provided, basically they use the “embed=True” solution that pre-calculate all the values for the interactive graph, and the default values are only ‘green’, and ‘black’. In my case, the parameter to generate the graph on the right is a date string that will be fetched after users click the left panel, there are many many possible values, what should I do in this case? If I don’t want to create a long list of parameters

5

I would advise you to use panel to serve the dashboard. Add something like this to the end of your file:

import panel as pn
pn.panel(tap_dmap).servable()

And the run panel serve FILENAME in your terminal, which will start a server.