Change axis label in real-time on NVD3 chart using angular

Question

I am sure that this answer must be obvious, but I can't seem to find the answer anywhere. I have a chart which I am generating using krispo's angular-nvd3 which displays data in real-time (similar to the real-time example found here). In my application, I use a right-click context menu to change the data set that is currently on display. Thus far, it works very well. However, I am not sure how to update the axis label so that it properly indicates the data that is being displayed. The code for the controller is as follows:

(function() {
   angular.module('main').controller('mainPasCtlr', ['$scope', 'Data', 
                                     function($scope, Data) {

        var index = 0;
        var labels = ['Q','IA','f0', 'abs'];

        $scope.menuOptions =[['Q', function(){index = 0;}],
                             ['IA', function(){index = 1;}],
                             ['f0', function(){index = 2;}],
                             ['abs', function(){index = 3;}]];

        $scope.options = {
            chart : {type : 'lineChart',
                     height : 180,
                     margin : { top : 20,
                                right : 20,
                                bottom : 40,
                                left : 75
                     },
            x : function(d) {
                    return d.x;
                },
            y : function(d) {
                    return d.y;
                },
            useInteractiveGuideline : true,

            transitionDuration : 0,
            yAxis : { showMaxMin: false,
                      axisLabel: labels[index],
                      tickFormat : function(d) {return d3.format('.02f')(d); }
                    },
            xAxis : { axisLabel: 'Time',
                      tickFormat : function(d) { return d3.time.format('%X'(new Date(d)); }
                    }
           },
           title: { enable: false,
                    text: labels[index] + ' vs Time'
                  }
       };

       $scope.data = [ { values : [], key : 'Cell 1 '},
                       { values : [], key : 'Cell 2 '},
                       { values : [], key : 'Cell 3 '},
                       { values : [], key : 'Cell 4 '},
                       { values : [], key : 'Cell 5 '},
                      ];

       $scope.run = true;

       $scope.$on('dataAvailable', function() {

           for (var i = 0; i < 5; i++) {
               $scope.data[i].values = Data.pas.cell[i][labels[index]];
           }

        });

    }]);
})();

Is there some refresh function that I am missing that will redraw the entire plot?

Thanks, Matt

Answer 1

Soooo...turns out that this was fairly simple. angular-nvd3 handles this by watching the options object and refreshing the api via scope.api.refresh(). So, to update the axis label, I simply have to add the following code to adjust the menuOptions array so that it looks like

$scope.menuOptions =    [['Q', function(){
                                          index = 0;
                                          $scope.options.chart.yAxis.axisLabel = labels[index];
                                         }
                        ],
                        ['IA', function(){  
                                                  index = 1;
                                                  $scope.options.chart.yAxis.axisLabel = labels[index];
                                            }
                        ],
                        ['f0', function(){  
                                          index = 2;
                                          $scope.options.chart.yAxis.axisLabel = labels[index];
                                            }
                                ],
                        ['abs', function(){ 
                                                   index = 3;
                                                   $scope.options.chart.yAxis.axisLabel = labels[index];
                                            }
                        ]];

Probably a better way to do this, but this works.

Thanks, Matt