Select All / Deselect all legend items

4 posts, 0 answers
  1. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 11 Mar 2014 Link to this post

    I'm working with a RadHtmlChart that has a lot of series running through it, and frequently, our users will want to be able to quickly select or deselect all the series in the legends, and then select the series they actually want to see.

    I was wondering, how would I go about implementing  "select all" and "deselect all" options for the legend on the chart?
  2. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 13 Mar 2014 in reply to Chase Link to this post

    So, I just figured this out myself. Since there aren't any public facing methods for the legendItemClick event, I had to use private methods (not the best practice), but hey, it works:

    <script type="text/javascript">
            function legendDeselectAll() {
                var chart = $find("Chart");
                if (chart != null) {
                    for (counter = 0; counter < chart._chartObject.options.series.length; counter++) {
                        if (chart._chartObject.options.series[counter].visible) {
                            chart._chartObject._legendItemClick(counter);
                        }
                    }
                }
            }

            function legendSelectAll() {
                var chart = $find("Chart");
                if (chart != null) {
                    for (counter = 0; counter < chart._chartObject.options.series.length; counter++) {
                        if (!chart._chartObject.options.series[counter].visible) {
                            chart._chartObject._legendItemClick(counter);
                        }
                    }
                }
            }
        </script>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 14 Mar 2014 Link to this post

    Hi Chase,

    The mentioned approach for hiding chart series on the client is a reasonable way. Another approach could be to set the visible property and the repaint the chart. For example:
    function legendDeselectAll() {
        var chart = $find("Chart");
        if (chart != null) {
            for (counter = 0; counter < chart._chartObject.options.series.length; counter++) {
                if (chart._chartObject.options.series[counter].visible) {
                    chart._chartObject.options.series[counter].visible = false;
                    //chart._chartObject._legendItemClick(counter);
                }
            }
            chart.repaint();
        }
    }

    You may also find interesting this feedback item.

    Regards,
    Danail Vasilev
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  5. Gabriel
    Gabriel avatar
    4 posts
    Member since:
    Apr 2014

    Posted 08 May 2014 Link to this post

    Hi Danail,

    Just to point out that even if your adjustments make the script to run faster, and indeed when you put, lets say in a CheckBox, the DeselectAll all series are deselected, when you try to activate not by the function, just a particular Series by clicking in the legend on the chart, the first time you try to do this you have to double click in legend to accomplish this task, I don't know if there is an internal flag that doesn't know that the series is not visible, so I'll keep by now Chase's code.

    Greetings
    Gabriel
Back to Top