CODEWITHSUNDEEP
javascriptangularchartsplotly
infodev
infodev

Reputation: 5235

Animate plotly sunburst graph when update data

I'm using plotly to print a sunburst graph.

I would like to get the graph animated when I update data. 

var data = [{
  type: "sunburst",
  labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
  parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
  values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
  outsidetextfont: {size: 20, color: "#377eb8"},
  leaf: {opacity: 0.4},
  marker: {line: {width: 2}},
}];

var layout = {
  margin: {l: 0, r: 0, b: 0, t: 0},
  width: 500,
  height: 500
};


Plotly.newPlot('myDiv', data, layout);
<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

I know that to update graph it's better to use `Plotly.react('myDiv', data, layout);

But When I update my graph the changes appears without transition animation.

Is there a way to anime graph on data change ?

If no, any other alternative ? ( I'm using Angular )

Upvotes: 1

Views: 1674

Answers (1)

miqh
miqh

Reputation: 3664

Check out Plotly.animate.

There's an animation section on the official documentation dedicated to tips about how to animate your plots.

I've updated your snippet to include a demonstration of a periodic animation just below.

var data = [{
  type: "sunburst",
  labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
  parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
  values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
  outsidetextfont: {size: 20, color: "#377eb8"},
  leaf: {opacity: 0.4},
  marker: {line: {width: 2}},
}];

var layout = {
  margin: {l: 0, r: 0, b: 0, t: 0},
  width: 500,
  height: 500
};


Plotly.newPlot('myDiv', data, layout);

// Periodically animate chart by reversing current value collection
setInterval(function () {
  var values = data[0].values.slice().reverse();
  Plotly.animate('myDiv', {
    data: [{ values: values }],
  }, {
    transition: {
      duration: 500,
      easing: 'cubic-in-out',
    },
    frame: {
      duration: 500,
    }
  });
}, 2000);
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div id='myDiv'></div>

Upvotes: 2

Related Questions