logo
  • Home
  • Getting Started
  • User Guide
  • Gallery
  • Reference Gallery
  • Developers
  • API
  • Releases
  • FAQ
  • About
  • Home
  • Getting Started
  • User Guide
    • Overview
    • Components
    • APIs
    • Customization
    • Deploy & Export
    • Interact
    • Widgets
    • Parameters
    • Linking
    • Pipelines
    • Templates
    • Server Deployment
    • Building Custom Components
    • Asynchronous and Concurrent Process
    • Authentication
    • Performance and Debugging
    • Django Apps
  • Gallery
    • VTKInteractive
    • VTKSlicer
    • VTKWarp
    • Attractors
    • Gapminders
    • Glaciers
    • Nyc Taxi
    • Portfolio-optimizer
    • Altair Choropleth
    • Clifford Interact
    • Color Speech Recognition
    • Deckgl Game Of Life
    • Defer Data Load
    • File Download Examples
    • Iris Kmeans
    • Loading Spinner
    • Random Number Generator
    • Save Filtered Df
    • Sync Location
    • Temperature Distribution
    • Stocks Altair
    • Stocks Hvplot
    • Stocks Matplotlib
    • Stocks Plotly
    • Distribution Tabs
    • Dynamic Tabs
    • Plot With Columns
    • Dynamic Plot Layout
    • Dynamic Timeseries Image Analysis
    • Dynamic Ui
    • Dynamic Widget Values
    • Action Button
    • Deck Gl Global Power Plants
    • Download Upload Csv
    • Loading Indicator
    • Param Subobjects
    • Precedence
    • Reactive Plots
    • Reactive Tables
    • Hardware Automation
    • Streaming Bokeh
    • Streaming Indicator
    • Streaming Perspective
    • Streaming Tabulator
    • CanvasDraw
    • LeafletHeatMap
    • MaterialUI
    • Bokeh Property Editor
    • Deck Gl Json Editor
    • Holoviews Glyph Link
    • Plotly Link
    • Vega Heatmap Link
    • MatplotlibStyle
    • PlotlyStyle
    • VegaAltairStyle
    • DataTable
    • Folium
    • Deck.gl
  • Reference Gallery
    • Alert
    • Audio
    • Bokeh
    • DataFrame
    • DeckGL
    • ECharts
    • Folium
    • GIF
    • HTML
    • HoloViews
    • IDOM
    • IPyWidget
    • JPG
    • JSON
    • LaTeX
    • Markdown
    • Matplotlib
    • PDF
    • PNG
    • Param
    • Perspective
    • Plotly
    • SVG
    • Str
    • Streamz
    • VTK
    • VTKJS
    • VTKVolume
    • Vega
    • Video
    • Accordion
    • Card
    • Column
    • Divider
    • FlexBox
    • GridBox
    • GridSpec
    • GridStack
    • Row
    • Tabs
    • WidgetBox
    • Bootstrap
    • FastGridTemplate
    • FastListTemplate
    • GoldenLayout
    • Material
    • React
    • Vanilla
    • Notifications
    • BooleanStatus
    • Dial
    • Gauge
    • LinearGauge
    • LoadingSpinner
    • Number
    • Progress
    • Tqdm
    • Trend
    • Ace
    • ArrayInput
    • AutocompleteInput
    • Button
    • CheckBoxGroup
    • CheckButtonGroup
    • Checkbox
    • ColorPicker
    • CrossSelector
    • DataFrame
    • DatePicker
    • DateRangeSlider
    • DateSlider
    • DatetimeInput
    • DatetimePicker
    • DatetimeRangeInput
    • DatetimeRangePicker
    • DatetimeRangeSlider
    • Debugger
    • DiscretePlayer
    • DiscreteSlider
    • EditableFloatSlider
    • EditableIntSlider
    • EditableRangeSlider
    • FileDownload
    • FileInput
    • FileSelector
    • FloatInput
    • FloatSlider
    • IntInput
    • IntRangeSlider
    • IntSlider
    • JSONEditor
    • LiteralInput
    • MenuButton
    • MultiChoice
    • MultiSelect
    • PasswordInput
    • Player
    • RadioBoxGroup
    • RadioButtonGroup
    • RangeSlider
    • Select
    • SpeechToText
    • StaticText
    • Tabulator
    • Terminal
    • TextAreaInput
    • TextEditor
    • TextInput
    • TextToSpeech
    • Toggle
    • ToggleGroup
    • VideoStream
  • Developers
    • Getting Set up
    • Testing
  • API
    • io
    • layout
    • pane
      • panel.vtk Package
    • param
    • pipeline
    • template
      • panel.bootstrap Package
      • panel.fast Package
        • panel.grid Package
        • panel.list Package
      • panel.golden Package
      • panel.material Package
      • panel.react Package
      • panel.theme Package
      • panel.vanilla Package
    • widgets
    • viewable
    • util
  • Releases
  • FAQ
  • About
    • Comparisons
On this page
  • App
Open this page in Binder

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).

previous

Holoviews Glyph Link

next

Vega Heatmap Link

© Copyright 2019-2022 Holoviz contributors.

Last updated on 2022-05-24.