Animate multiple traces with plotly.js animation API

Question

I have a plotly.js dashboard I've made to stream live data. The live data stream part works perfectly fine, but I would really like to animate all the traces at the same time as the data comes in. However, I can't manage to animate more than a single trace at a time, no matter what I pass to Plotly.animate. I've re-created this issue using code from their website.

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="graph"></div>
  <button onclick="javascript:randomize();">Randomize!</button>
</body>

<script>
 Plotly.plot('graph', [{
 x: [1, 2, 3],
 y: [0, 0.5, 1],
 line: {simplify: false},
 }, 
 {
 x: [3, 2, 1],
 y: [0, 0.5, 1],
 line: {simplify: false}
 }]);

 function randomize() {
  Plotly.animate('graph', {
  data: [{y: [Math.random(), Math.random(), Math.random()]}],
  traces: [0,1],
  layout: {}
  }, {
  transition: {
  duration: 500,
  ease: 'cubic-in-out'
  }
  })


  }</script>
  </html>

Observe that even though I pass it the traces [0,1] it will only animate the first trace in that array! I couldn't find any documentation which would fix this issue.

user7240099 · Accepted Answer · 2016-12-02 09:01:27Z

I've found the answer. The issue was with the data I was passing to Plotly.animate, which only had one trace's updated information.

Here is the working code if anyone was wondering:

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
  <button onclick="javascript:randomize();">Randomize!</button>
</body>

<script>
Plotly.plot('graph', [{
  x: [1, 2, 3],
  y: [0, 0.5, 1],
  line: {simplify: false},
}, 
{
  x: [3, 2, 1],
  y: [0, 0.5, 1],
  line: {simplify: false}
}]);

function randomize() {
  Plotly.animate('graph', {
    data: [{y: [Math.random(), Math.random(), Math.random()]}, {y: [Math.random(), Math.random(), Math.random()]}],
    traces: [0,1],
    layout: {}
  }, {
    transition: {
      duration: 500,
      ease: 'cubic-in-out'
    }
  })


}</script>
</html>

Collectives™ on Stack Overflow

Animate multiple traces with plotly.js animation API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related