Skip to main content

Visualization

Visualizations are charts/plots/graphs that help you better understand your data. Wave uses Grammar of Graphics to describe its plots.

For a more thorough explanation of how Wave plots work, please see Plotting.

Check the full API at ui.visualization.

Basic visualization

visualization-0

from h2o_wave import data

q.page['example'] = ui.form_card(box='1 1 4 4', items=[
ui.visualization(
plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
data=data(fields='product price', pack=True, rows=[
('category1', 7),
('category2', 8),
('category3', 9),
]),
),
])

With dimensions

In addition to the width attribute that is present on every form component, visualization also provides a way to control height via the height attribute, which defaults to 300px. It supports all the CSS units, however, % may not always work as you could expect so we advise using static units like px, rem etc. instead.

visualization-1

from h2o_wave import data

q.page['example'] = ui.form_card(box='1 1 4 4', items=[
ui.visualization(
height='300px',
plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
data=data(fields='product price', pack=True, rows=[
('category1', 7),
('category2', 8),
('category3', 9),
]),
),
])

With events

Wave plots provide a way to listen for user clicks on certain parts of the visualization. All it takes is to register the event, e.g. events=['select_marks'] and once the action happens, you get the appropriate data in q.events.<name-attr>.select_marks.

visualization-2

from h2o_wave import data

q.page['example'] = ui.form_card(box='1 1 4 4', items=[
ui.visualization(
name='viz',
height='300px',
plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
data=data(fields='product price', pack=True, rows=[
('category1', 7),
('category2', 8),
('category3', 9),
]),
events=['select_marks'] # Submits q.events.viz.select_marks
),
])