Plotly update data
33,445
Solution 1
I found the answer to the question.
Apprently i needed to use:
Plotly.newPlot(element,charData,layout);
instead of redraw
Solution 2
Plotly.redraw(gd)
is the right way.
But you call Plotly.redraw
incorrectly.
The right way is update the data
object, instead of new a data
object.
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');
}
Solution 3
According to a Plotly community moderator (see the first answer here), Plotly.restyle
is faster than Plotly.redraw
and Plotly.newPlot
.
Example taken from the link:
var data = [{
x: ['VALUE 1'], // in reality I have more values...
y: [20],
type: 'bar'
}];
Plotly.newPlot('PlotlyTest', data);
function adjustValue1(value)
{
Plotly.restyle('PlotlyTest', 'y', [[value]]);
}
Comments
-
Marc Rasmussen over 1 year
Okay so i have the following code:
var element = document.getElementById(scope.changeid); function getData(division,redraw) { var employeeData = []; if (!division) { $http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) { processData(response,redraw); }); } else { $http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) { processData(response,redraw); }) } } function processData(data,redraw) { var y = [], x1 = [], x2 = []; data.forEach(function (item) { y.push(item.user.profile.firstname); x1.push(item.current_level); x2.push(item.expected); }); var charData = [{ x: x1, y: y, type: 'bar', orientation: 'h', name: 'Nuværende' }, { x: x2, y: y, type: 'bar', orientation: 'h', name: 'Forventet' }], layout = { barmode: 'stack', legend: { traceorder: 'reversed', orientation: 'h' } }; if(!redraw){ Plotly.plot(element, charData, layout); } else { Plotly.redraw(element,charData,layout); } } scope.$watch('divisionId', function (newValue, oldValue) { if (newValue) { getData(newValue.id,true); } }, true); getData(null,false);
Which creates the following chart:
Now as you can see ive added a
watcher
scope.$watch('divisionId', function (newValue, oldValue) { if (newValue) { getData(newValue.id,true); } }, true);
Now when i trigger this it should update the chart and call
Plotly.redraw(element,charData,layout);
However when it does this the chart does not change at all. There is no error in the console so i am not quite sure what to do?