Trigger function when series is set visible/hidden

[Bernd Schuhmacher]

Hi

I would like to trigger a function when the visibility of a series is changed by clicking on its name in the list below the chart.

Is this possible and if it is, how can this be achieved?

Regards

Bernd

[Durga Gopalakrishnan]

Hi Bernd, 

  

Thanks for using Syncfusion products. 

  

We have analyzed your query. Your requirement can be achieved by triggering the legendItemClick event. This event will be triggered by clicking the legend item. Find the code snippet below 

  

[Angular 2] 

  

<ej-chart (legendItemClick)='legendItemClick($event)'>  

</ej-chart>  

  

legendItemClick(sender) { 

       alert("SeriesIndex : "+sender.data.legendItem.Style.SeriesIndex); 

} 

  

For your reference we have attached the sample link below. In the sample we have 3 series and while clicking the series name, seriesIndex will be displayed in alert box. You can change the sample according to your requirement. 

 

Sample link: Attachment  

 

Please let us know if you have any concern. 

  

Regards, 

Durga G 

 

[Bernd Schuhmacher]

Hi

Thanks for the hint.

I checked this one already out and it works as expected. But If i need the state (visible or hidden) of the series I get the wrong in the moment the event is triggered. So I needed to set a timeout of some milliseconds around the part where I look for the visibility.

Is there a smarter way for getting the correct visibility?

Regards

Bernd

[Dharanidharan Dharmasivam]

Hi Bernd, 

 

Thanks for your revert. 

 

We have analyzed your query. Now we have modified the sample with respect to your scenario. Here we have displayed the state of each series in alert box using the legendItemClick event. Find the code snippet below. 

 

[Angular 2]  

   

<ej-chart (legendItemClick)='legendItemClick($event)'>   

</ej-chart>   

   

legendItemClick(sender) {  

      var value, str=""; 

        for (var i = 0; i < sender.model.series.length; i++) { 

            if (i == sender.data.legendItem.Style.SeriesIndex) 

                value = sender.model.series[i].visibility == "hidden" ? "visible" : "hidden"; 

            else 

                value = sender.model.series[i].visibility; 

            str += "\nSeries " + i + " : " + value; 

       } 

       alert(str); 

}  

 

 

Here we have toggled the visibility of the series using the index value(sender.data.legendItem.Style.SeriesIndex) obtained in the event and displayed in the alert box. 

 

Screenshot: 

 

You can change this with respect to your requirement. Sample for reference can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/132039/ze/customSample-1187712472  

 

Thanks, 

Dharani. 

[Bernd Schuhmacher]

Hi Dharani

This did the trick. Thanks for helping.

Bernd

[Dharanidharan Dharmasivam]

Hi Bernd, 

Thanks for the update. 

Kindly revert us, if you need further assistance. 

Thanks, 

Dharani.