Customizing visualizations in ui.visualization()

[n-srinidhi]

Hi! I am currently using a line graph to depict historical date/timestamp data. The graphs is as follows:

1. How do I customize the x-axis labels as integer values range like 0,1,2 etc. Because when there are too many data points the labels get too squishes up like this

2. Is it possible to enable horizontal scrolling on the visualization card so that the graph is visible neatly without being squished together, incase of too many datapoints?

[mturoci]

Hi, again, it's almost impossible to help you without providing the code.

I believe both questions can be addressed by having a look at this example, although you will need to adjust it for the line plot ofc. It renders just the right amount of dates, despite the data containing more.

1

I am not sure what you meant here, but you can format the axes - https://wave.h2o.ai/docs/expressions, e.g. x=='${{intl ... }'.

2

You could theoretically use width prop to cause overflow, but it's better UX to avoid scrollbars and reduce the number of axis labels IMO.

[n-srinidhi]

@mturoci I'm trying to refer to the example given here but it doesn't seem to work for my example. I would like either of the following outcomes:

1. Either have no labels for the x axis
2. Display few instead of all labels so that the graph doesn't look messy.

[mturoci]

Do you use x_scale='time'? I can't tell since you did not provide a code sample.

[n-srinidhi]

I did. but that did not help. Pls note that the values of the time column are date-time values in str format. For Eg : '24-10-2022 00:00'

[mturoci]

Try to change them to timestamps as in the example above.

[n-srinidhi]

UNIX Timestamps right?

[shamilh2o]

Hi @mturoci I have a question which relates to this.
With the line plot, in a bigger date range, it picks some dates automatically to display in the X-axis. that's awesome. But some times that makes overlaps as shown here. Is that a bug or any idea?

[mturoci]

Hard to say without seeing the code. Most likely a bug in our underlying plotting lib though.

[shamilh2o]

The visualization code part is some what like this. Hope this will help you. The thing I noticed is it picks dates in some even gaps. if the end date is very close the date it picked before that, it will overlap. As an example if it picks dates in 2 months gaps and the last date in the data is in 1 week from the last picked date, it overlaps.

        ui.visualization(
            data=data(
                fields=df_columns,
                rows=df_rows,
                pack=True,
            ),
            plot=ui.plot(
                marks=[
                    ui.mark(
                        type=h2o_wave.ui.MarkType.LINE,
                        x=f"={DFColName.DATE}",
                        y=f"={DFColName.AI_UNIT_SUM}",
                        y_min=0,
                        y_max=threshold_value,
                        y_title=Y_AXIS_TITLE,
                        color=PlotColours.RIPE_MANGO,
                        curve=h2o_wave.ui.MarkCurve.SMOOTH
                    ),
                    ui.mark(
                        y=threshold_value,
                        ref_stroke_color=PlotColours.RICH_CARMINE,
                        label=str(threshold_value)
                    ),
                ]
            )
        ),

[mturoci]

Thanks, that sounds like the possible reason. Unfortunately, the code is not very helpful. I need something I can run myself - everything needs to be hardcoded.