Panel objects provided via jscallback vs js_on_event

Panel
2

I found a suitable solution. The structure of the code is:

import panel as pn
pn.extension('echarts')

echart_pn = pn.pane.ECharts(...).
time_pn = pn.widgets.Select(...)

echart_pn.js_on_event('rendered', "e.tags[0]=this; this.off('rendered')", e=echart_pn)
time_pn.jscallback(args={'echart': echart_pn}, value="echart.data... = this.value); echart.tags[0].setOption(echart.data)")

The code captures the echart model when the rendered event triggers which happens automatically. It places the model pointer in the 0-index of tags of the echart object. The jscallback then unregisters the callback as we do not need it anymore.

Any widget jscallback will be able to access the echart model by accessing the tags[0] entry. The example shows an action to redraw the chart with any appropriate animations based on what has changed in the echart.data options dictionary. I am experimenting with how to use the other events/actions - including how to sync zoom and pan between multiple echarts instantiated as separate panel panes which is one of the driving strengths of using panel with echarts over pure echarts with multiple grids in a single canvas.

1 Like