Plotly Link

Download this notebook from GitHub (right-click to download).

---

import numpy as np
import panel as pn

pn.extension('plotly')

Since Plotly plots are represented as simple JavaScript objects, we can easily define a JS callback to modify the data and trigger an update in a plot:

xs, ys = np.mgrid[-3:3:0.2, -3:3:0.2]
contour = dict(ncontours=4, type='contour', z=np.sin(xs**2*ys**2))
layout = {'width': 600, 'height': 500, 'margin': {'l': 8, 'b': 8, 'r': 8, 't': 8}}
fig = dict(data=contour, layout=layout)
plotly_pane = pn.pane.Plotly(fig, width=600, height=500)

buttons = pn.widgets.RadioButtonGroup(value='Medium', options=['Low', 'Medium', 'High'], button_type="success")

range_callback = """
var ncontours = [2, 5, 10]
target.data[0].ncontours = ncontours[source.active]
target.properties.data.change.emit()
"""

buttons.jslink(plotly_pane, code={'active': range_callback})

component=pn.Column(buttons, plotly_pane)
component

App

Lets wrap it into nice template that can be served via panel serve plotly_link.ipynb

pn.template.FastListTemplate(
    site="Panel", title="Plotly JS Links", main_max_width="650px",
    main=[
        pn.pane.Markdown("Since Plotly plots are represented as simple JavaScript objects, we can easily define a **JS callback** to modify the data and trigger an update in a plot. \n\nThis allows you to **export your app as a static HTML file**.", sizing_mode="stretch_width"), 
        component
    ]
).servable();

This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

---

Download this notebook from GitHub (right-click to download).