Plotly update data

Question

Okay so i have the following code:

    var element = document.getElementById(scope.changeid);

function getData(division,redraw) {
    var employeeData = [];         


        

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

I found the answer to the question.

Apprently i needed to use:

 Plotly.newPlot(element,charData,layout);

instead of redraw