Plot / Plotly
Use plotly to create plots. Also demonstrates how to provide live control over plots.
import numpy as npfrom plotly import graph_objects as gofrom 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()