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?
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');
}
I found the answer to the question.
Apprently i needed to use:
Plotly.newPlot(element,charData,layout);
instead of redraw
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]]);
}
The extendTraces function should be what you are aiming for. It can add data points to your graph and redraws it. In contrast to redraw (@Honghe.Wu Answer), you do not need to update the reference when using extendTraces.
[extendTraces] This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot.
https://plot.ly/javascript/plotlyjs-function-reference/#plotlyextendtraces
Example usage
// initialise some data beforehand
var y = [];
for (var i = 0; i < 20; i ++) {
y[i] = Math.random();
}
var trace = {
// x: x,
y: y,
type: 'bar',
};
var data = [trace];
// create the plotly graph
Plotly.newPlot('graph', data);
setInterval(function() {
// add data to the trace via function call
Plotly.extendTraces('graph', { y: [[getData()]] }, [0]);
// y.push(getData()); Plotly.redraw('graph'); //similar effect
}, 400);
function getData() {
return Math.random();
}
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.