Plot events in a Form card

[shamilh2o]

Hey, Is plot events trigger if it only defined in a plot card? I was trying it in a form card and it doesn't worked for me.

Code which worked:

from h2o_wave import main, app, Q, ui, data


@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.client.initialized = True
        q.page['pricing'] = ui.plot_card(
            box='1 1 4 5',
            title='Interval',
            data=data(fields='product price', rows=[
                ['spam', 1.49],
                ['eggs', 2.49],
                ['ham', 1.99],
            ], pack=True),
            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
            events=['select_marks']
        )
        q.page['details'] = ui.markdown_card(
            box='1 6 4 2',
            title='Selected Product',
            content='Nothing selected.',
        )
    else:
        if q.events.pricing:
            q.page['details'].content = f'You selected {q.events.pricing.select_marks}'

    await q.page.save() 

Code which I tried with few changes:

from h2o_wave import main, app, Q, ui, data


@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.client.initialized = True
        q.page['pricing'] = ui.form_card(
            box='1 1 4 5',
            items=[
                ui.text_xl("User journey"),
                ui.visualization(
                    data=data(fields='product price', rows=[
                        ['spam', 1.49],
                        ['eggs', 2.49],
                        ['ham', 1.99],
                    ], pack=True),
                    plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
                    height="400px",
                    interactions=['brush'],
                    events=['select_marks']
                ),
            ],
        )
        q.page['details'] = ui.markdown_card(
            box='1 6 4 2',
            title='Selected Product',
            content='Nothing selected.',
        )
    else:
        if q.events.pricing:
            q.page['details'].content = f'You selected {q.events.pricing.select_marks}'

    await q.page.save()

cc: @mturoci

[mturoci]

Try adding name='pricing' to your ui.visualization.

[shamilh2o]

Great. Yah it worked. But with the output of the initially worked code it gives three relevant values when we select three bars. (expected behaviour)
With the changes I have added (including your suggestion), it only triggers for the first selected bar and not changing value while selecting other bars. Anything wrong in my code?

[shamilh2o]

I think something went wrong in wave university app. While I was trying it in my original code it picks each value. Thanks for suggestion.