Vega Visualization
Vega lite visualizations.
from h2o_wave import data
spec = '''{ "description": "A simple bar plot with embedded data.", "data": { "values": [ {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} ] }, "mark": "bar", "encoding": { "x": {"field": "a", "type": "ordinal"}, "y": {"field": "b", "type": "quantitative"} }}'''
q.page['example'] = ui.form_card(box='1 1 2 4', items=[ ui.vega_visualization( specification=spec, data=data(fields=['a', 'b'], pack=True, rows=[ ["A", 10], ["B", 20], ["C", 30], ["D", 40], ["E", 50], ["F", 60], ["G", 70], ["H", 80], ["I", 90] ]), ),])
Check the full API at ui.vega_visualization.
#
With dimensionsIn addition to the width
attribute that is present on every form component, vega 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.
from h2o_wave import data
spec = '''{ "description": "A simple bar plot with embedded data.", "data": { "values": [ {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} ] }, "mark": "bar", "encoding": { "x": {"field": "a", "type": "ordinal"}, "y": {"field": "b", "type": "quantitative"} }}'''
q.page['example'] = ui.form_card(box='1 1 2 4', items=[ ui.vega_visualization( width='200px', height='200px', specification=spec, data=data(fields=['a', 'b'], pack=True, rows=[ ["A", 10], ["B", 20], ["C", 30], ["D", 40], ["E", 50], ["F", 60], ["G", 70], ["H", 80], ["I", 90] ]), ),])