CODEWITHSUNDEEP
d3.jsnvd3.js
martinpaulucci
martinpaulucci

Reputation: 2402

NVD3 - Showing empty chart instead of noData message

Is there a way to show an empty chart instead of the "No Data Available" message when there is no data to show?

http://jsfiddle.net/sammla/pYWkD/2/

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

];

Thanks!

Upvotes: 7

Views: 9890

Answers (3)

Doug Lee
Doug Lee

Reputation: 768

you can call noData and pass a string during the chart creation:

(coffeescript)

self.chart = nv.models.lineChart()
               .margin  left: 100, right: 100
               .useInteractiveGuideline true
               .transitionDuration 150
               .showLegend true
               .showYAxis true
               .showXAxis true
               .noData 'no data, there is'

Upvotes: 5

shabeer90
shabeer90

Reputation: 5151

The answer provided by Lars works well when you do not want to show the noData message on a chart when its empty.

Recently I had charts with content being loaded dynamically. I found a similar question to this Updating with no data does not clear old data from the chart.

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.

I was not able to find a clean solution to that, So here's what I did to overcome it :

Used Lars answer to empty the chart : 

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

And then added the code below.

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. But for now this works perfectly.

Hope it helps some one, trying to achieve the same thing.

Upvotes: 5

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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

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

Upvotes: 8

Related Questions