Reseting chart data does not remove the old graph

[angularjs-nvd3-directives]

Reseting chart data does not remove the old graph

[sodoku]

[cmaurer]

@sodoku That seems messed up. Let me take a look.

[sodoku]

Thanks for your fast response. Any findings what the problem is allready?

[cmaurer]

It's the code that was put in to not need an id attribute. If it doesn't see an id attribute it creates one. That doesn't work so well for existing charts. Since d3 makes heavy use of selectors, being able to select the right chart is essential. I haven't tested it, but I suspect that if you added a unique id attr to the directive, it would work.

[cmaurer]

@sodoku
I have been looking at this for a little while. I don't have any smoking guns. What is weird is that if you reverse the data, it works fine. If you start with no data, and the 'clearData()' method adds data, it looks good.

So I am thinking, at this point, it is somewhere in the nvd3 / d3 code, or how I am calling it. I will continue to dig into it.

Chris

[sodoku]

@cmaurer thanks you very much for digging into it!

[julienmeyer]

Hello,
I had the same problem. You can find similar problem in nvd3 : novus/nvd3#349
To prevent this problem and waiting a real solution, I changed the "checkElementID" function to this one :

function checkElementID(scope, attrs, element, chart, data) {
        'use strict';
        var dataAttributeChartID; //randomly generated if id attribute doesn't exist
        if(!attrs.id){
            dataAttributeChartID = "chartid" + Math.floor(Math.random()*1000000001);
            angular.element(element).attr('data-chartid', dataAttributeChartID );    
            //if an id is not supplied, create a random id.
            if(d3.select('[data-chartid=' + dataAttributeChartID + '] svg').empty()) {
                d3.select('[data-chartid=' + dataAttributeChartID + ']').append('svg')
                .attr('height', scope.height)
                .attr('width', scope.width)
                .datum(data)
                .transition().duration((attrs.transitionduration === undefined ? 250 : (+attrs.transitionduration)))
                .call(chart);
            } else {
                d3.select('[data-chartid=' + dataAttributeChartID + '] svg')
                .attr('height', scope.height)
                .attr('width', scope.width)
                .datum(data)
                .transition().duration((attrs.transitionduration === undefined ? 250 : (+attrs.transitionduration)))
                .call(chart);  
            }
        } else {
            if(angular.isArray(data) && data.length == 0){
                d3.select('#' + attrs.id + ' svg').remove();
            }
            
            
            if(d3.select('#' + attrs.id + ' svg').empty()) {
                d3.select('#' + attrs.id)
                    .append('svg');
            }
            d3.select('#' + attrs.id + ' svg')
                    .attr('height', scope.height)
                    .attr('width', scope.width)
                    .datum(data)
                    .transition().duration((attrs.transitionduration === undefined ? 250 : (+attrs.transitionduration)))
                    .call(chart);
        }
        
    } 

The solution remove the svg graph if data is empty.
I can create a pull request if you want.

[cmaurer]

@julienmeyer
Please create a pull request. I would appreciate it.

Thanks,
Chris

[kunickiaj]

Similar issue here... my workaround was simply something like this:

if (data.length === 0) {
  d3.select(_.first(element)).select('.nvd3').remove();
}

This lets me clear the "old" chart if my new data is empty.

[KevinColemanInc]

@julienmeyer, when do you think you will create the pull request?

[julienmeyer]

Today ;-)
Sorry for the time it took...
#148

[cmaurer]

@julienmeyer No problem. I have been unable to focus recently as well (family, job, etc).

[jasadams]

pull request #148 only fixes the issue where the element has an "id" attribute. I recently opened pull request #205 for another reason but I believe that I have fixed this problem in that pull request.

[ravi]

Hello, is this issue resolved in any way? Even if I add an 'id' to the tag, my charts stop refreshing once I reset the data. I am using the latest version available via Bower. Any update appreciated. Thank you.

[abij]

@kunickiaj solution is a good workaround. How I use it:

.directive('myCoolChart', function () {
 return {
  restrict: 'A',
  replace: true,
  templateUrl: 'widgets/customChart.html',
  controller: function ($scope) {
    $scope.$watch('mydata', function(newValues) {
      if (!newValues) {
        $scope.chartData = [{'key': 'MyKey', 'values': []}];  // Empty -> No Data
      } else {
        $scope.chartData = [{'key': 'MyKey', 'values': newValues}];
      }
    });
    link: function(scope, el, attr) {
        scope.$watch('mydata', function(newValues) {
          if (!newValues) {
            d3.select(_.first(el)).select('.nvd3').remove();  // remove old graph
          }
        })
      }

[idrissou]

Same problem. Spent 3 hours pulling my hair from the top of my scalp with this, until I found this issue thread

[AlfredMan]

is apply() going to resolve this ? ^^''''

[umair-khanzada]

@julienmeyer in my case data is update not empty any trick for updated data ?