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?

Answer 1

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