Dynamic interval plot with categorical axis: how to control order of bars?

[siddie]

Hi there!

Is there a way to control the order of the bars on the categorical axis when displaying interval plot?
Also, how to disable stacking completely?

1. I am displaying a bar chart. Categorical values are along the x-axis.
2. Values are updated dynamically, every 1 second.
3. Number of bars increases since new categories might arrive.
4. Rows are appended in a desired order.
5. Bars are displayed in a different order. See labels on the bars, image below. Seems like they are sorted internally.

Code example:

 self.main_funnel_hist = self.page.add('main_funnel_hist', ui.plot_card(
            box=f'1 1 10 4',
            title='Funnel',
            data=data(['event', 'occurrence', 'count', 'last seen', 'order'], size=0 ),
            plot=ui.plot([
                ui.mark(type='interval',
                        y='=occurrence', x='=order',
                        y_min=0,
                        y_nice=False,
                        x_nice=False,
                        x_scale='category',
                        y_scale='linear',
                        label='={{intl order minimum_fraction_digits=0 maximum_fraction_digits=1}}',
                        label_rotation='90',
                        color='occurrence',  
                        )
            ])
        ))

Updating rows every 1 second; data changes dynamically:

 rows = []
 order = 0
 for evt_id in order_lookup: 
      r = (next(sample_term), progress * 100, count, f'{ts}', ord)
      rows.append(r)
      order+=1
 self.main_funnel_hist.data = rows

[mturoci]

IIRC, yhe order should depend on categorical column order as depicted in https://wave.h2o.ai/docs/widgets/plots/interval/

Can confirm tomorrow. If that does not help, a minimal runnable example would be needed to guide you further.

What exactly do you mean by "stacking"?

[mturoci]

Verified, rendering order respects data order for categorical plots:

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


@app('/')
async def serve(q: Q):
    q.page['example'] = ui.plot_card(
        box='1 1 4 5',
        title='Interval',
        data=data('profession salary', 5, rows=[
            ('medicine', 23000),
            ('fire fighting', 18000),
            ('pedagogy', 24000),
            ('psychology', 22500),
            ('computer science', 36000),
        ]),
        plot=ui.plot([ui.mark(type='interval', x='=profession', y='=salary', y_min=0)])
    )
    await q.page.save()

vs (medicine at the end)

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


@app('/')
async def serve(q: Q):
    q.page['example'] = ui.plot_card(
        box='1 1 4 5',
        title='Interval',
        data=data('profession salary', 5, rows=[
            ('fire fighting', 18000),
            ('pedagogy', 24000),
            ('psychology', 22500),
            ('computer science', 36000),
            ('medicine', 23000),
        ]),
        plot=ui.plot([ui.mark(type='interval', x='=profession', y='=salary', y_min=0)])
    )
    await q.page.save()

@siddie

[siddie]

@mturoci thank you for confirming that the rendering order should respect the data order, and for your time checking that.

From my side, I can confirm as well that static initialization respects the data order.

I believe the essential difference is that in my case data is being updated dynamically, and the data array changes both: size-wise and content-wise. I will try to create a minimalistic script to showcase the problem with that.