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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. How to turn off the interactive legend...

How to turn off the interactive legend...

...when toggleSeriesVisibility = false does not seem working? We want the legend, but series should not hide on a legend item click.

$(function () {
    $("#chart_div").ejChart({
      legend: { toggleSeriesVisibility: false },
      series: [
        { name: "Toyota", points: [{ x: "Jan", y: 1 }, { x: "Feb", y: 3.8 }] },
        { name: "Ford", points: [{ x: "Jan", y: 2.3 }, { x: "Feb", y: 1.2 }] }
      ],
    });
});



7 Replies
DD Dharanidharan Dharmasivam Syncfusion Team March 17, 2017 07:10 AM UTC

Hi Cristian, 

Thanks for contacting Syncfusion support. 

We have analyzed your query with provided code snippet and the toggleSeriesVisibility property is working fine at our end. We have prepared a sample with respect to your requirement. In this we are having two series and specified toggleSeriesVisibility property as false. Now the series will be visible, after clicked on the legend.  

Sample used for testing can be find from below link. 

Since we are not aware of your exact scenario on which the issue is reproduced, we would like to know the following details which will helpful in further analysis and provide you the solution sooner. 
·       Modify the attached sample or provide your sample with replication steps, 
·       Revert your current Essential Studio version. 
·       Browser and its version details. 

In addition, we would like to let you know that, your requirement can also be achieved as an workaround by using legendItemClick event. In this event we need to specify the cancel property as true, so that the series visibility will not be toggled. Find the code snippet below. 

[JS] 

$("#container").ejChart({ 
         //... 
          legendItemClick:"legendClick", 
}); 
function legendClick(sender){ 
           sender.cancel = true 
} 


Sample for reference can be find from below link. 

Thanks, 
Dharani. 


CS Cristian Scutaru March 17, 2017 02:09 PM UTC

Hi Dharani and thanks a lot for your reply and solution.

Just FYI, I see it's all about the different files we include. I cannot use ej.web.all.min.js, because it's over 10MB and I need just the chart support. Check my included files below:

1) http://codepen.io/cristiscu/pen/BWmvxv - for some reason, toggleSeriesVisibility does not work here.

2) http://codepen.io/cristiscu/pen/oZoJMG - similar version using legendItemClick, which works! (what changed is just the line I commented out, and the new one I uncommented)

So, I'll stick with the second solution, which is fine with my reduced set of included files.

Best Regards,
-Cristian

DD Dharanidharan Dharmasivam Syncfusion Team March 20, 2017 06:48 AM UTC

Hi Cristian, 
 
Thanks for your revert. 
 
We have analyzed your query with the provided sample. We found that, you have used Essential studio version 13.1.0.30, but we have provided support for toggleSeriesVisibility from version 13.3.0.12, so the property is not working in your sample. The current version of Essential studio is 15.1.0.37 and you can switch over to latest version of our products from below link,
To achieve your requirement in your version, you can use the 2nd solution provided by us in the previous update.
And if you want script files for the particular control you can use Syncfusion custom script generator. Please find the following link 
 http://csg.syncfusion.com/combine 

In the below steps we have explained how to use the custom script generator.  
1. Open the above link. 
2. In the page please select the controls which you are using in your project and select the version of the ej.web.all.min.js file.  
 
 

 
 



3. After selecting the controls, please click the generate button. 



 
 




4.Once the ej.web.all.min.js file is generated, please click the download button.




 
 



Now the download custom script will contain the source code of selected Syncfusion controls alone. And you can use that in your sample.

Thanks, 
Dharani. 


CS Cristian Scutaru March 21, 2017 10:12 PM UTC

Thanks a lot, Dharani.

Do you also publish individual versioned files on a CDN? I found it convenient the previous version was on one of your CDNs.

I'm interested only in ejChart and ejCircularGauge.

Best Regards,
Cristian

DD Dharanidharan Dharmasivam Syncfusion Team March 22, 2017 07:33 AM UTC

Hi Cristian, 
 
Thanks for your revert.  
As per your request, we have listed the CDN links for chart and circular gauge below. 
 
 
Also to render the chart control, you need to refer core, data and globalize scripts and to render circulargauge, you need to refer core script only. 
 
 
Since chart and circular gauge are data visualization, you need to use datavisualization/chart and datavisualization/cirulargauge in the above link. 
And If you need any web related controls like grid, then you need to use web/ej.grid.js in the above link. 

Note: 15.1.0.37 is the current version. You can use version with respect to your requirement. To know more on version details, follow the link below. 

If you are using 13.1.0.30 version, then use the below links and replace for other controls as stated above. 

Also in 13.1.0.30 version, to render chart control, you need to refer globalize. Find the link below 
 
If you still face any concerns, revert us the Essential studio product version you were using, which will be helpful for analyzing and to provide the exact solution sooner. 
 
Thanks, 
Dharani. 


CS Cristian Scutaru March 22, 2017 05:26 PM UTC

Thanks, Dharani. You're a life saver! :)

DD Dharanidharan Dharmasivam Syncfusion Team March 23, 2017 07:32 AM UTC

Hi Cristian, 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Dharani. 


Loader.
Live Chat Icon For mobile
Up arrow icon