Edit this page

Hide Series of the Pie Chart by Filtering the Grid

Environment

Product Version 2017.3 1026
Product Progress Kendo UI Grid Progress Kendo UI Chart

Description

How can I hide series from the Pie Chart by filtering the Grid and vice versa?

Solution

To hide the Chart series by filtering the Grid:

  1. In the filter event handler of the Grid, based on the filters, programmatically click on the legend labels of the Chart.
  2. In the legendItemClick event handler of the Chart, based on the hidden series, filter the Grid.
<div id="grid"></div>
<div id="chart"></div>
<script>
    var hiddenChartSeries = [];
    var chartCategories = ["Category 1", "Category 2"]; //add all the categories here

    $("#grid").kendoGrid({
        columns: [{
                field: "type",
                filterable: {
                    operators: {
                        string: {
                            neq: "Not equal to"
                        }
                    }
                }
            },
            {
                field: "value",
                filterable: false
            }
        ],
        dataSource: [{
                type: "Category 1",
                value: 1
            },
            {
                type: "Category 2",
                value: 2
            }
        ],
        filterable: true,
        filter: function(e) {
            if (e.filter) {
                var chart = $("#chart").data("kendoChart");
                var grid = e.sender;
                var filters = e.filter.filters;
                var itemsToClick = [];

                filters.forEach(function(e) {
                    var currIndex = chartCategories.indexOf(e.value);
                    var hiddenCharSeriesCurrIndex = hiddenChartSeries.indexOf(currIndex);

                    if (hiddenCharSeriesCurrIndex === -1) {
                        itemsToClick.push(currIndex);
                        hiddenChartSeries.push(currIndex);
                    }
                });

                itemsToClick.forEach(function(e) {
                    //debugger;
                    chart._legendItemClick(0, e);
                });
            } else {
                var chart = $("#chart").data("kendoChart");
                hiddenChartSeries.forEach(function(e) {
                    chart._legendItemClick(0, e);
                });
                hiddenChartSeries = [];
            }
        }
    });
    $("#chart").kendoChart({
        series: [{
            type: "pie",
            categoryField: "type",
            data: [{
                    type: "Category 1",
                    value: 1
                },
                {
                    type: "Category 2",
                    value: 2
                }
            ]
        }],
        legendItemClick: function(e) {
            var dataSource = $("#grid").data("kendoGrid").dataSource;
            var text = e.text;
            var dsFilter = dataSource.filter();
            var newFilter = {
                field: "type",
                operator: "neq",
                value: text
            };
            var removeFilterIndex = -1;
            var pointIndex = e.pointIndex;
            var hiddenCharSeriesCurrIndex = hiddenChartSeries.indexOf(pointIndex);

            if (hiddenCharSeriesCurrIndex === -1) {
                hiddenChartSeries.push(pointIndex)
            } else {
                hiddenChartSeries.splice(hiddenCharSeriesCurrIndex, 1)
            }

            if (dsFilter) {
                var currFilters = dsFilter.filters;
                currFilters.forEach(function(e) {
                    if (e.value === text) {
                        removeFilterIndex = currFilters.indexOf(e);
                    }
                });

                if (removeFilterIndex === -1) {
                    currFilters.push(newFilter);
                } else {
                    currFilters.splice(removeFilterIndex, 1);
                }
                dataSource.filter(currFilters);
            } else {
                dataSource.filter(newFilter)
            }
        }
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy