Skip to main content

Tall Series Stat

Most suitable for cases when you need to fill a vertical space with numerical values together with data series.

Feel free to play around with the plot_curve attribute in order to find the curve that suits you the most.

Check the full API at ui.tall_series_stat_card.

With line#

tall_series_stat-0

from h2o_wave import data
q.page['example'] = ui.tall_series_stat_card(        box='1 1 2 2',        title='Linear tall series',        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',        aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',        data=dict(qux=800, quux=80 / 100),        plot_type='area',        plot_category='foo',        plot_value='qux',        plot_color='$yellow',        plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),        plot_zero_value=0,        plot_curve='linear',)

With curve#

tall_series_stat-1

from h2o_wave import data
q.page['example'] = ui.tall_series_stat_card(        box='1 1 2 2',        title='Smooth tall series',        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',        aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',        data=dict(qux=800, quux=80 / 100),        plot_type='area',        plot_category='foo',        plot_value='qux',        plot_color='$yellow',        plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),        plot_zero_value=0,        plot_curve='smooth',)

With step#

tall_series_stat-2

from h2o_wave import data
q.page['example'] = ui.tall_series_stat_card(        box='1 1 2 2',        title='Step tall series',        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',        aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',        data=dict(qux=800, quux=80 / 100),        plot_type='area',        plot_category='foo',        plot_value='qux',        plot_color='$yellow',        plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),        plot_zero_value=0,        plot_curve='step',)

With step-after#

tall_series_stat-3

from h2o_wave import data
q.page['example'] = ui.tall_series_stat_card(        box='1 1 2 2',        title='Step-after tall series',        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',        aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',        data=dict(qux=800, quux=80 / 100),        plot_type='area',        plot_category='foo',        plot_value='qux',        plot_color='$yellow',        plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),        plot_zero_value=0,        plot_curve='step-after',)

With step-before#

tall_series_stat-4

from h2o_wave import data
q.page['example'] = ui.tall_series_stat_card(        box='1 1 2 2',        title='Step-before tall series',        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',        aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',        data=dict(qux=800, quux=80 / 100),        plot_type='area',        plot_category='foo',        plot_value='qux',        plot_color='$yellow',        plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),        plot_zero_value=0,        plot_curve='step-before',)

With bars#

tall_series_stat-5

from h2o_wave import data
q.page['example'] = ui.tall_series_stat_card(        box='1 1 2 2',        title='With bars',        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',        aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',        data=dict(qux=800, quux=80 / 100),        plot_type='area',        plot_category='foo',        plot_value='qux',        plot_color='$yellow',        plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),        plot_zero_value=0,)