Skip to main content

Plot / Bokeh / Script

Embed Bokeh components into a page using Javascript.

import json
from h2o_wave import site, ui
from bokeh.resources import CDN
from bokeh.plotting import figure
from bokeh.embed import json_item
from bokeh.sampledata.iris import flowers

# Make a plot
plot = figure(title="Iris Morphology")
plot.xaxis.axis_label = 'Petal Length'
plot.yaxis.axis_label = 'Petal Width'

colormap = {'setosa': 'red', 'versicolor': 'green', 'virginica': 'blue'}
colors = [colormap[x] for x in flowers['species']]["petal_length"], flowers["petal_width"], color=colors, fill_alpha=0.2, size=10)

# Serialize the plot as JSON.
# See
plot_id = 'my_plot'
plot_data = json.dumps(json_item(plot, plot_id))

page = site['/demo']

page['meta'] = ui.meta_card(
# Import Bokeh Javascript libraries from CDN
scripts=[ui.script(path=f) for f in CDN.js_files],
# Execute custom Javascript
# Call Bakeh's renderer using Javascript
# Ensure that the Bokeh Javascript library is available
# Ensure that the target HTML container element is available

# Create a HTML container element to hold our plot.
page['example'] = ui.markup_card(
box='1 1 5 8',
content=f'<div id="{plot_id}"></div>',