Updating with no data does not clear old data from the chart.

[jgrund]

If a chart is populated with data and then update is called after the data has been emptied, the noData text will overlay the existing data.

Consider if the current data should be cleared from the chart as it can be confusing to see both at the same time.

To reproduce (altered from http://nvd3.org/ghpages/multiBar.html):

var chart;
var datas = data();

nv.addGraph(function() {
    chart = nv.models.multiBarChart();

    chart.xAxis
        .tickFormat(d3.format(',f'));

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    d3.select('#chart svg')
        .datum(datas)
      .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

window.setTimeout(function () {
  datas.length = 0;

  chart.update();
}, 3000);     

[m48u]

Same problem for me. What I did to fix that (but i think this is very hacky) is something similar to
$("#chart g.nv-multiBarChart").remove();
This will remove the complete chart but you'll get also a kind of flicker effect :(

Waiting for a proper fix 👍

[shabeer90]

I am Having the same issue but there is a solution for it, not exactly the same thou, found it on stackoverflow http://tinyurl.com/pccza6p

You can "hack" this by having an empty array that contains an empty array:

data2 = [{
    "key" : "A key",
    "values" : [[]]
}]; 

It then shows an empty chart , and you can show your No data message this way :

d3.select('#chart svg').append("text")
        .attr("x", "235")
        .attr("y", "35")
        .attr("dy", "-.7em")
        .attr("class", "nvd3 nv-noData")
        .style("text-anchor", "middle")
        .text("My Custom No Data Message");

Even I am after a proper solution for it, to show the noData text without it overlaying the existing data.

[jasadams]

+1

[heks]

+1

[bwinchester]

I can get this to work by updating my data object to an empty array: [] . Before we just had empty value sets and the old chart wouldn't clear, but making the data object completely empty cleared my chart and displayed the noData message.

[liptga]

I do simply this in my "update" function before calling the chart update function:

if ( data.length == 0 ) {
     d3.select('svg').html("");
}

//do normal chart update call here...

You may need to select your svg different way. In my case that was the only one in the frame.

[liquidpele]

This was a bug that was brought up in nvd3-community too... we should handle removing data from the chart better, currently all kinds of bad stuff happens.

[liquidpele]

Fixed by nvd3-community#63 and will likely be merged into the novus code.

[robinfhu]

Oh yeah I need to merge nvd3-community:development soon.

[liquidpele]

Should be fixed in dev branch now.

[moneytree-doug]

@liquidpele Thanks, Ill take a look tomorrow

[leocongote]

i have noticed that the library have the following code for detect if is empty the data array:
if ( angular.isArray( data ) && (data.length === 0 ) ) and the problem here is that (data.lenght===0) is false because the array is not zero , so what i did was to check if all the data[*].values are equal to zero, if this is true so we must empty the chart. here is the code:

inside the "checkElementID" function

var lengthArray=0;
data.forEach(function(d){
      if(d.values.length!=0){
        lengthArray=d.values.length;
     }
})
if ( angular.isArray( data ) && (data.length === 0 ||  lengthArray==0) )

what do you think about this solution?, it works for me.

Thanks for that amazing library!!!

[liquidpele]

Send us a pull request based on the current development branch ;)

[jufemaiz]

like

[jgrund]

Thanks! However, this fix takes care of removing the chart but does not clean up any existing tooltips.

[liquidpele]

This issue has been closed, please open a new issue for anything further, thanks!

[jgrund]

Thanks, opened: #998