Invert the Legend Interaction

[dojchek]

Hello FusionCharts,

 

Is there a nice way to invert the 'chart interactivity'? Current/default functionality is when you click on a legend item (displayed) it hides it's related series and I'm looking for the opposite functionality - Show only the series of a clicked legend item, while hiding all the others. It should work this way no matter if the item is displayed or hidden (visible=1 or visible=0).

 

I have a work-around but not happy with it's performance - I simply change the data on legend click event, so that only the clicked one is visible (<dataset .. visible='1' >) while keeping the others on <dataset .. visible='0' >.

However, this gets slow with lots of series/legend items, since I have to modify the data (with visible attr) and re-render the chart every time the user clicks on a legend item. 

 

It would be nice if the functionality used by fusioncharts to hide/show series on legend click would be provided as API (maybe it's already there?).

 

[Akash Biswas]

Hi,

 

The current functionality of Legend interactivity in any Multi-series chart, is when you click on a legend item it hides/shows its respective series, irrespective of other series are hidden/shown.

 

Your requirement is to show the series(Example - A series), only when its respective legend is clicked.

Then on legend item click of another series(Example - B series), its series( will be shown, hiding the previous series A.

 

This could be achieved with the below mentioned way :

 

1. Initially, all the series dataset must be set to visible - false.

2. On "legendItemClicked" event function, first fetch the dataSource from the sender property of the "eventObj". Then iterate through all the dataset objects and set the "visible" attribute to "0" to hide all the series.

Then, only the clicked Legend series is enabled using the dataSet index using "dataObj" event parameter.

 

 

 

 

 

Example : eventObj.sender.args.dataSource.dataset[dataObj.legendItemIndex].visible = 1;

 

3. Finally, set the modified "sender.args.dataSource"  using the API method "setJSONData()" as below :

eventObj.sender.setJSONData(eventObj.sender.args.dataSource);

 

Please find a sample fiddle implementing your required functionality using the above technique : http://jsfiddle.net/Akash008/yg6o91gf/2/

 

Find the links below for further references :

Event : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events.html#event-legendItemClicked

API method : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setJSONData

 

Thanks,

Akash.

[dojchek]

Thank you very much Akash!

 

I was doing basically the same as you described, but with larger datasets it can get slow in perf (time needed to render the chart with setJsonData()). I will definitely use this approach, but will have to tweak it a bit more..

The other thing I need here is to enable adding up more series with ctrl+click on legend item (forgot to mention that one in first post).

So the complete functionality I need is:

1) Click on legend item - shows the clicked series and hides the rest

2) ctrl + click on legend item  - shows the clicked series and doesn't hide the rest (very similar to the default behavior).

 

I already have an idea how to implement this, although the ctrl+click event is not supported by fusioncharts API, right?

 

Thank you!

[Prerana]

Hello,

 

This is Prerana stepping in for Akash.

 

The sample provided in the previous response was just a workaround.

 

The ctrl+click event is not supported by FusionCharts.

 

Hope this will help.