How to disable some streams by default in a nvd3 Simple Line Chart?

Question

I have several lines and I know that clicking on the "dot" in the legend will hide/show it.

However, I need to start with some of the lines being disabled and not displayed, and the user will have to click on the dot in the legend to show it on the graph.

(eg. I graph the number of questions on stackoverflow per language, but with C, PHP and javascript disabled by default). the graph only shows python, ruby... but on the legend, you have all the languages, including C, PHP and js with these 3 being disabled.

I haven't found a method/attribute for each data serie to set the default show/hide status. Am I missing something?

Deflagrate

Answer 1

For each of your data series that you want disabled, just do:

series.disabled=true

nvd3 does not do everything, but if you are willing to peruse the code it is actually quite flexible. I discovered this by finding this line in the source of several of the chart models:

state.disabled = data.map(function(d) { return !!d.disabled });

Martica

Answer 2

After reading this answer I still had to do some more reading in order for me to understand how to set a stream disabled from my JSON data-stream for the graphs.

The example below is what solved it for me disabled: true

    {
    key: "something",
    disabled: true,
    values: [...]
    }

Derisible

Answer 3

You can change which streams are enabled/disabled by using the chart.state() object. For example:

// Assuming your chart is called 'chart'
var state = chart.state();

for(var i=0; i < state.disabled.length; i++) {
  state.disabled[i] = ...LOGIC RETURNING TRUE OR FALSE...;
}

chart.dispatch.changeState(state);
chart.update();

Mateusz

This works great. One question though - what do you call chart.update() for? For my chart with a couple thousand data points, it is measurably faster not to call update, and it still seems to work just fine. – Rao

@EugeneBeresovsky Yes, you are correct. in lineChart.js, I searched for dispatch.on('changeState' and found that chart.update(); is already called. There is no need to call it again. – Otten

Answer 4

You could start out with a hidden chart and try something like this:

// Array of series you want to hide
var hidden = [0, 2];

// Dispatch click event to each element
var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true);
d3.select('.nv-legend')
  .selectAll('.nv-series')
  .filter(function(d, i){return hidden.indexOf(i) !== -1;})
  .node()
  .dispatchEvent(e);

Once this finishes, unhide your chart and the series will be disabled.

Ardent