Marc Rasmussen Marc Rasmussen - 5 months ago 37
AngularJS Question

Plotly update data

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:

enter image description here

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?

Answer

I found the answer to the question.

Apprently i needed to use:

 Plotly.newPlot(element,charData,layout);

instead of redraw