I want to update my bar chart using a slider bar for the values of each bar. However, I want the bars to dynamically change as the slider changes. I have achieved this using oninput. Currently, I have the following, which is quite laggy.
HTML
<head>
<!-- Plotly.js -->
<script src=".min.js"></script>
</head>
<body>
<h1> Plotly Test</h1>
<div id="PlotlyTest" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<p> Adjust Value 1</p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="get_min() " oninput="adjustValue1(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<script src="functionality.js"></script>
</body>
JS
var data = [{
x: ['VALUE 1'], // in reality I have more values...
y: [20],
type: 'bar'
}];
Plotly.newPlot('PlotlyTest', data);
function adjustValue1(value)
{
data[0]['y'][0] = value;
Plotly.redraw('PlotlyTest');
}
According to this, using Plotly.redraw isn't the fastest method. But then what is?
I want to update my bar chart using a slider bar for the values of each bar. However, I want the bars to dynamically change as the slider changes. I have achieved this using oninput. Currently, I have the following, which is quite laggy.
HTML
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h1> Plotly Test</h1>
<div id="PlotlyTest" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<p> Adjust Value 1</p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="get_min() " oninput="adjustValue1(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<script src="functionality.js"></script>
</body>
JS
var data = [{
x: ['VALUE 1'], // in reality I have more values...
y: [20],
type: 'bar'
}];
Plotly.newPlot('PlotlyTest', data);
function adjustValue1(value)
{
data[0]['y'][0] = value;
Plotly.redraw('PlotlyTest');
}
According to this, using Plotly.redraw isn't the fastest method. But then what is?
-
Supposedly, using functions like
addTraces,relayout,update, etc. plot.ly/javascript/plotlyjs-function-reference/#plotly-restyle – abalter Commented May 2, 2016 at 13:27
2 Answers
Reset to default 1I have quickly thrown this together (well, it took a great deal of effort to find out how to do it; I've just modified some work I had done to suit this answer). The Plotly.animate() function is the quickest way to update traces, as far as I can tell.
update = {
x: data[0].x,
y: data[0].y,
opacity: 1 // You can do things like change the opacity too
};
Plotly.animate(div="graph", {
data: update,
traces: [0], /* With a bit of work, you can list any other traces you
want to update too (e.g. make a for loop over trace++ and set
update[trace] at each iteration) */
layout: {}
}, {
// These 2 make sure the plot updates as quickly as possible:
transition: {duration: 0},
frame: {duration: 0, redraw: false}
});
I found .react to be the fastest and it is pretty swift (I'm using v5.18). I have about 5000 points on many traces and just one trace is set to update with the slider. I break the slider into 100 intervals which Plotly knows as the sl.steps. The user doesn't see all these individual values however so while the transition from slider to float is "slightly discontinuous" it appears smooth. I then update on each of the small delta changes in slider.
The subsequent update of the trace is near instantaneous, so the user gets the sense that the data is moving smoothly with the slider motion. Below is the code trigged by event handler, should be self-explanatory.
var sl = SLIDER.layout.sliders[0] // all event info
var sla = sl.active // this is the hidden tick
var str_coeff = sl.steps[sla].label // string value
var temp_coeff = parseFloat(str_coeff) // the value I want
for (let i = 0 ; i < Nbase; i++) { // update base into chosen curve
SLIDER.data[dest_curve_id].y[i] = base_curve.y[i] + temp_coeff*(temp_curve.y[i] - 25.)
}
Plotly.react(SLIDER, SLIDER.data, SLIDER.layout, config); // and update curves