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.
1 answers
solution1
0 ACCPTED 2016-12-02 09:01:27
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.