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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filters on chart

Thread ID:





126066 Sep 21,2016 01:21 PM UTC Sep 24,2016 04:39 AM UTC ASP.NET MVC 3
Tags: Chart
indrani Gajjarapu
Asked On September 21, 2016 01:21 PM UTC

I am trying to apply filters on charts. I am able to hide the series on the chart according to the selected value in the dropdown filter. However, I cant hide the  particular series in the legend which in turn displays the hidden series when clicked. I could do it statically by using VisibleOnLegend, but my requirement is to hide a series based on the value of the Dropdown filter in jquery change function.

The line  " chart.model.legend.visible = false;"  hides the legend for all the series present in the chart.
function onload()
            var chart = $("#KS2vsA8Chart").ejChart("instance");
            $("#serieschange").on('change'function () {
                var SelVal = $(this).val();
                if (SelVal === "Gender") {
                    chart.model.legend.visible = false;
                    chart.model.series[1].visibility = "hidden";

Please suggest me a way to hide the legend of the selected series.
Thank you.

Saravana Kumar Kanagavel [Syncfusion]
Replied On September 22, 2016 02:16 PM UTC

Hi Indrani,  
Thanks for contacting Syncfusion Support. 
We have analyzed your query and created a sample based on your requirement . Please refer the code example below for show or hide the series when selecting the dropdown value. 
$('#filterSeries').change(function () { 
        window.dropdownValue = $("#filterSeries option:selected").text(); 
        var chart = $("#container").ejChart("instance"); 
        if( window.dropdownValue == "Male") 
            chart.model.series[0].visibility = "hidden"; 
            chart.model.series[1].visibility = "visible"; 
        else if( window.dropdownValue == "Female") 
            chart.model.series[0].visibility = "visible"; 
            chart.model.series[1].visibility = "hidden"; 
        else if( window.dropdownValue == "Both") 
            chart.model.series[0].visibility = "hidden"; 
            chart.model.series[1].visibility = "hidden"; 
        chart.model.legendBoundsCalculate = "render"; 
In the above code, we have hidden the series based on the selecting the drop down value. 
And also if you want to remove the particular legend item while selected series is hidden, then you can use “legendBoundsCalculate” event. 
Please refer the code example below 
function render(sender) //legendBoundCalculate event triggered 
        if (window.dropdownValue == "Male") 
            sender.model.legendCollection.splice(0, 1); 
        else if (window.dropdownValue == "Female") 
            sender.model.legendCollection.splice(1, 1); 
            sender.model.legendCollection.splice(0, 2);    
In the above code, we are triggering “legendBoundsCalculate” event .In the event, we have remove the legend item on legend collection. 
And you can find the sample from the below location. 
Please find the outputs of the sample below 
Please let us know if you have any concern.  
Saravana Kumar K 


indrani Gajjarapu
Replied On September 23, 2016 11:23 AM UTC

Thank you. That worked like a champ..


Dharanidharan Dharmasivam [Syncfusion]
Replied On September 24, 2016 04:39 AM UTC

Hi Indrani, 

Thanks for your update. Kindly revert us, if you require any further assistance. 



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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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