Plotly update data

Question

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?

Are you using plotly.js in an Angular Directive? – Nicholas Marshall Dec 10 '15 at 18:04 — Nicholas Marshall, Dec 10 '15 at 18:04

score 21 · Answer 1 · edited Feb 12 '23 at 15:37

21

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');
}

Ref: http://www.mzan.com/article/35946484-most-performant-way-to-update-graph-with-new-data-with-plotly.shtml

edited Feb 12 '23 at 15:37

Falko

17,076
13
60
105

answered Sep 20 '16 at 12:00

Honghe.Wu

5,899
6
36
47

4

The link is broken – Andrei Oct 06 '18 at 13:04
link is no longer broken – dangel Oct 08 '22 at 01:57

score 17 · Accepted Answer · answered Aug 20 '15 at 15:22

17

I found the answer to the question.

Apprently i needed to use:

 Plotly.newPlot(element,charData,layout);

instead of redraw

answered Aug 20 '15 at 15:22

Marc Rasmussen

19,771
79
203
364

6

This works, but is probably not the best solution, there must be another way. – Christophe Roussy Jun 10 '16 at 11:57
2

Hmmm... http://www.mzan.com/article/35946484-most-performant-way-to-update-graph-with-new-data-with-plotly.shtml – Christophe Roussy Jun 10 '16 at 12:18
2

@ChristopheRoussy link is dead. – RedShift Sep 19 '17 at 14:15
1

@RedShift quick google on url yields: https://community.plot.ly/t/what-is-the-most-performant-way-to-update-a-graph-with-new-data/639 – Christophe Roussy Sep 19 '17 at 15:28
this is not good, you will lose any events attached – Matteo Jul 26 '22 at 17:52
I believe the best option is to use extendTraces. Check my answer for details below. – Andrei Aug 03 '22 at 07:01

score 4 · Answer 3 · answered Nov 10 '18 at 17:54

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]]);
}

score 1 · Answer 4 · answered Oct 06 '18 at 13:15

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();
}

Plotly update data

4 Answers4

Linked