Using the animated function plotly.js

Question

Plotly released a new feature animation yesterday !!! Therefore, I really wanted to check this, and with the current lack of documentation (temporary, I suppose), I struggle a lot for how to use it. I really looked into the code on GitHub, but ... didn't work.

• I define my div element in the template:

  <div id="plotDiv"> </div>
  

• I wanted the plot to respond to event resizing, so I followed the example on the site:

  const d3 = Plotly.d3;
  const gd3 = d3.select("#plotDiv")
     .style({width: "95%", "margin-left": "2.5%"});
  const gd = gd3.node();
  

• Then create the data (bit of angular magic and other things), but in the end it looks like this:

  data = {x: [array_ot_dates], y: [array_of_not_so_random_values], type:'bar'};
  

• According to jsdocs for the animation function you need to pass a frame:

  let plotlyFrame = {data:data, layout:{}};
  

• Try to call the animation !!!

  Plotly.animate(gd, plotlyFrame);
  

And there comes Kabum!

First mistake: this element is not plot: [object HTMLDivElement] But when I try this:

Plotly.newPlot(gd, data, {});

I have my plot ...

, "" gd, Plotly.plot , ...

Plotly.plot(gd, [], {});
// make my data not empty
Plotly.animate(gd, plotlyFrame);

:

plotly.js: 116922 ( ) TypeError: '_module' undefined (...)

, - , angular 3 .

- ? ?

Answer 1

, ! , .

, , , , ( !). :

var frame = [{
  data: {
    y: [...new values...]
  }
}]

Plotly.plot(gd, [{x: [...], y: [...]}]).then(function() {
  Plotly.animate(gd, frame)
});

- , , , ( , Plotly.plot ).

, , , , . , , , , - , , , . Plotly.plot(gd, [{x: [], y: []}]). , , [] - , Plotly, . , FYI, , , . , , animate .

, , ! , / !