We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trigger function when series is set visible/hidden

Thread ID:

Created:

Updated:

Platform:

Replies:

132039 Aug 9,2017 11:34 AM UTC Aug 14,2017 11:50 AM UTC Angular 5
loading
Tags: ejChart
Bernd Schuhmacher
Asked On August 9, 2017 11:34 AM UTC

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 [Syncfusion]
Replied On August 10, 2017 09:47 AM UTC

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
Replied On August 10, 2017 11:46 AM UTC

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 [Syncfusion]
Replied On August 11, 2017 12:21 PM UTC

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. 
 
Thanks, 
Dharani. 


Bernd Schuhmacher
Replied On August 14, 2017 05:14 AM UTC

Hi Dharani


This did the trick. Thanks for helping.

Bernd


Dharanidharan Dharmasivam [Syncfusion]
Replied On August 14, 2017 11:50 AM UTC

Hi Bernd, 

Thanks for the update. 

Kindly revert us, if you need further assistance. 

Dharani. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;