Filters on chart

[indrani Gajjarapu]

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";
                    chart.redraw();
                }
               
            });
        }

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

Thank you.

[Saravana Kumar Kanagavel]

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. 

 

[JS] 

$('#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"; 

        chart.redraw(); 

    }); 

 

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 

[JS] 

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); 

        else 

            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. 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/126066/ze/Sample54376541 

  

Please find the outputs of the sample below 

 

 

 

 

 

 

Please let us know if you have any concern.  

 

Regards, 

Saravana Kumar K 

 

[indrani Gajjarapu]

Thank you. That worked like a champ..

Cheers!!!

[Dharanidharan Dharmasivam]

Hi Indrani, 

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

Thanks, 

Dharani.