Reputation: 4895
I'm currently using Angular NVD3 wrapper.
I can't find a way to catch the Click-Event on the stream legend (highlighted in red in the image below).
How to do that?
The goal is to keep unselected streams disabled even after a page reload.
Upvotes: 1
Views: 586
Reputation: 1520
You will have to set the legend status from a service and then use a callback service in nvd3 chart options to set the initial legend status based on the service.
Then, the legend click events need to be captured and the array from the service has to be changed accordingly. NVD3 already provides legend events to capture these.
I have put all these together in a plunker with angular routing to demonstrate how it works. You can navigate to another link and come back to the chart page and see that the legend status is persisted. Please check the plunker:
http://plnkr.co/edit/V0WRMHd2zpya0lsjfFPy?p=preview
Relevant code snippet below:
//legend events
legend: {
dispatch: {
//legend single click event
legendClick: function(e) {
/**below are the different scenarios and we are setting the array value accordingly. You can probably
make it dynamic by writing a for loop based on the number of streams you have, rather than hardcoding
**/
if(e.key == "Stream0" && e.disabled) {
console.log('Stream0 enabled');
getChartProperties[0]=0;
}
if(e.key == "Stream1" && e.disabled) {
console.log('Stream1 enabled');
getChartProperties[1]=0;
}
if(e.key == "Stream2" && e.disabled) {
console.log('Stream2 enabled');
getChartProperties[2]=0;
}
if(e.key == "Stream0" && !e.disabled) {
console.log('Stream0 disabled');
getChartProperties[0]=1;
}
if(e.key == "Stream1" && !e.disabled) {
console.log('Stream1 disabled');
getChartProperties[1]=1;
}
if(e.key == "Stream2" && !e.disabled) {
console.log('Stream2 disabled');
getChartProperties[2]=1;
}
console.log(getChartProperties);
},
//legend double click event
legendDblclick: function(e) {console.log(e)},
legendMouseover: function(e) {},
legendMouseout: function(e) {},
stateChange: function(e) {}
}
},
/**callback function to set the initial state of legend from the service "getChartProperties" which returns the
array . Below, disabled is set to [0,0,0] from service. Note that in javascript 0 is false, hence disabled
is [false,false,false], which means the legend is enabled. If its 1, then its disabled:true and the legens will be
disabled
**/
callback: function(chart){
chart.dispatch.changeState({disabled:getChartProperties})
}
}
};
Hope this solution is what you were looking for. You can use $rootScope as well to persist the variable in angularJS, but its not recommend as it pollutes global scope. Hence, I used a service . Let me know if you have any queries about the logic. You can add further logic to handle double click events as well in a similar way.
Note: When all 3 legends are disabled, NVD3 enables all the legends again , but the array is [1,1,1] and does not respond after that. You may have to handle that as well.
Upvotes: 1