Skip to main content

Plot / Plotly

Use plotly to create plots. Also demonstrates how to provide live control over plots.

import numpy as np
from plotly import graph_objects as go
from plotly import io as pio

from h2o_wave import ui, main, app, Q

np.random.seed(19680801)


@app('/demo')
async def serve(q: Q):
if not q.client.initialized: # First visit
q.client.initialized = True
q.client.points = 25
q.client.plotly_controls = False

q.page['controls'] = ui.form_card(
box='1 1 4 2',
items=[
ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),
ui.toggle(name='plotly_controls', label='Plotly Controls', trigger=True),
]
)
q.page['plot'] = ui.frame_card(box='1 3 4 5', title='', content='')

if q.args.points is not None:
q.client.points = q.args.points

if q.args.plotly_controls is not None:
q.client.plotly_controls = q.args.plotly_controls

n = q.client.points

# Create plot with plotly
fig = go.Figure(data=go.Scatter(
x=np.random.rand(n),
y=np.random.rand(n),
mode='markers',
marker=dict(size=(8 * np.random.rand(n)) ** 2,
color=np.random.rand(n)),
opacity=0.8,
))
_ = fig.update_layout(
margin=dict(l=10, r=10, t=10, b=10),
paper_bgcolor='rgb(255, 255, 255)',
plot_bgcolor='rgb(255, 255, 255)',
)
config = {'scrollZoom': q.client.plotly_controls,
'showLink': q.client.plotly_controls,
'displayModeBar': q.client.plotly_controls}
html = pio.to_html(fig, validate=False, include_plotlyjs='cdn', config=config)

q.page['plot'].content = html

# Save page
await q.page.save()

Tags:  plotplotly