I have a nvd3 multibar chart (but the same problem occurs with a pie chart).
I want to save the status of the legend when the user enables or disables a series, by clicking on it in the legend. So I'm listening to stateChange events.
In the following example code there are two series. When the user clicks, say, on series1 to disable it, the console should log:
New State: {"disabled":[true,false]}
The problem starts occurring after refreshing the chart with new data from the server (simulated by setInterval in the code below). After the first refresh I always get a wrong event, i.e., values of the disabled attribute are messed up.
Maybe the way I refresh the graph is wrong?
Here the sample code:
var initialData = [
{ key: 'series1', values: [
{ x: 0, y: 10},
{ x: 1, y: 44}
]},
{ key: 'series2', values: [
{ x: 0, y: 25},
{ x: 1, y: 11}
]}
];
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.delay(0);
d3.select('#chart1 svg')
.datum(initialData)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
setInterval(function ()
{
var newDataFromServer = [
{ key: 'series1', values: [
{ x: 0, y: Math.floor((Math.random()*100)+1)},
{ x: 1, y: Math.floor((Math.random()*100)+1)}
]},
{ key: 'series2', values: [
{ x: 0, y: Math.floor((Math.random()*100)+1)},
{ x: 1, y: Math.floor((Math.random()*100)+1)}
]}
];
d3.select('#chart1 svg')
.datum(newDataFromServer)
.call(chart);
nv.utils.windowResize(chart.update);
}, 5000);
return chart;
});