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    ),])