Next/Previous step buttons in slider

plotly.js
1

In the documentation, there’s an example of buttons to change steps by passing the same arguments to the buttons as for the slider; and below that, there’s one example to animate the slider. However, what I’d need are buttons to go to the next and previous step. Is there a way to do this?

2

Check this

https://codepen.io/saratoga01/pen/GgREBym?editors=0011

1 Like
3

Wow, that is exactly what I needed! Thank you very much!

1 Like
4

Another option

https://codepen.io/saratoga01/pen/QwWgzjY?editors=0010

5

Thanks, that is indeed a little more general. In my case, I’ll have to generalise a bit more, as I don’t have a change of colors but a change of traces. I can get the corresponding ++index or --index of the “traces_slider” and update the plot with them.

6

Just one small extra question: Is it possible to use icons (e.g…, Font-Awesome) in the buttons?

7

Ok, I have made it work. I have to use Plotly.react, since Plotly.update for some reason does not change all the traces (i.e., it does not clean up all existing and plot new ones; if I have different number of traces in different steps, it doesn’t work). It looks like this for me:

    // Adding previous and next buttons
    layout.updatemenus = [{
      showactive: false,
      pad: {t: 60, l: 30},
      type: 'buttons',
      xanchor: 'right',
      yanchor: 'top',
      x: 1.0,
      y: 0,
      direction: 'left',
      buttons: [{
        label: 'previous',
        args: [],
        execute: false
      },{
        label: 'next',
        args: [],
        execute: false
      }]
    }]

    graphDiv[0].on('plotly_buttonclicked', function (e) {
      let index = graphDiv[0]._fullLayout.sliders[0].active

      if ((e.button.label == 'previous')&&(index>0)) {
        --index
      } else if ((e.button.label == 'next')&&(index<numsteps-1)) {
        ++index
      } else {
        return
      }

      layout.sliders[0].active = index
      // Updating shapes in layout
      layout.shapes = shapes[index]
      // Updating the graph, as the slider update has problems
      Plotly.react(self.id, traces_slider[index], layout, self.config);
    })

Two comments: in the button, the key is called execute and not executed (here), and the e.active was not working for me, so I just checked the label on the clicked button.

Thanks for the help!

edit: updated for plotly 3.0.0

1 Like
8

That’s right, there was an error in the code, I had executed instead of execute, when correcting it the value of the active property of the updatemenu always gives 0 when pressing the buttons so you can change it to the value that is in button._index it is less code than comparing the label

      if (e.button._index)
        ++index
      else
        --index

     if(traces_slider[index]) {
        layout.sliders[0].active = index
        // Updating shapes in layout
        layout.shapes = shapes[index]
        // Updating the graph, as the slider update has problems
        Plotly.react(self.id, traces_slider[index], layout, self.config);
    }

And for the other question, directly through some plotly property it seems that you still can’t put icons but indirectly as long as it’s javascript and you know how to access the button element you can modify it whatever you want, but that’s a different topic so better open another post to solve it

1 Like
9

Thanks for the tip!

edit: I see that your option also don’t redo the graph, as it reaches unavaialble indices. I’ll use that! :slight_smile:

PS: Agreed about the icon. I’m not sure if I’ll do it with js though, as I’d probably have to “fix it” every time I do a Plotly.react. I will test, and if I have problems I create a new post.

1 Like