Make a long line graph (e.g. time series) scrollable horizontally?

📊 Plotly Python
1

Is there a good way to make a line or scatter plot with many values along the x axis scrollable, so that only a subrange of the x range is shown but one can scrolle left/right along the x axis?

For many kinds of plots, e.g. time series, this would be extremely useful.

2

Hi @johann.petrak,

Have you considered adding a rangeslider for the x axis? You could set a default view range for the slider and then scroll back and forth on the axis.

2 Likes
3

Thank you - this does work in principle and looks good, but it seems to be hard to impossible to make it scale to the number of data points I have (2-4 traces with about 30000 data points each, potentially each with error bars).
Already with a couple of thousand datapoints the interface becomes sluggish, beyond that it makes my browser hang.

I also could not make it render with the initial range of the range slide set to some smaller window, it always starts with the full range, even if I have a layout update like

    xaxis=dict(
        autorange=True,
        rangeslider=dict(
            autorange=False,
            range=["2022-09-14 10:00:00.0", "2022-09-14 20:00:00.0"]
        ),
        type="date"
    ),

This does NOT limit the slide range to the given datetime range but shows the whole full data range.
I assume this is because the JS code tries to render the whole graph first and then just manipulates the view while for very large graphs it would be better to scroll by rendering the shown part of the graph on the fly.

Is there any way to work around this or alternate solutions?

4

Range slider is unfortunately not a good solution for several reasons:

  • it seems to be impossible to configure so that initially a subrange is shown
  • when the window range is very small in comparison to the total range the slider object becomes tiny and clumsy to handle
  • when the range slider object is tiny, it is practically impossible to scroll horizontally as the mouse will always click the margin object instead and thus change the size of the range
  • when horizontally scrolling by dragging the slider left/right to the end of the data, the slider width gets changed! This is extremely annoying.
5

hello,

I think is not really handy to use the slider for what you want. Maybe define some frames and do sort of an ‘animated time-series’ defining the range of the data that you want to explore, so each frame contains a sub-set of your data and you can easily jump accros with the frame buttons?

6

Thanks - yes, I have been thinking about somehow combining a jupyter widget and a plotly graph to dynamically show the subrange plot, but this is quite involved to do properly and in a user-friendly fashion and I wondered if it could be a wheel that already has been invented, given how basic and often-needed it must be.

I think before I go all the way trying to implement this myself I will first have a look if other plotting libraries have more support for this. I tried to avoid this because I am almost exclusively using plotly so far, but if some other library does this better will probably have to switch.

This is more likely as plotly does not seem to support callbacks to getting marked ranges or point sets into python for simple use in Jupyter, apparently, (as it did in version 3, but this seems to have been abandonded)

7

you don’t need a widget to work with the frames and ‘animations’ i referenced before, because all of them are done on Plotly python… You just have to take a look. The easiest way from my point of view is doing animations with Plotly Express, but it can also be full customizable on the Graphic Objects interface. If you can share a reproducible dataset somebody could help you out

1 Like
8

Sorry I misunderstood and was not really aware of the animation/frames feature. What concerns me there is that apparently (judging from the example for graph objects given here Intro to animations in Python ) this does not work by using callbacks but by pre-calculating everyhing before creating the figure javascript and then doing everything in javascript.

This is of course an advantage for e.g. static html pages, but a problem if the very reason why I want to do scrolling is because the data is rather large.

I will have a look if this feature plays nicely with plotly-resample (rangeslider does not).

Thanks for pointing me to this!

1 Like