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

Answer 1

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: [...]
    }

Answer 2

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.

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();

Answer 4

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 });