Hide Series of the Pie Chart by Filtering the Grid
Environment
Product Version | 2017.3 1026 | |
Product | Progress® Kendo UI® Grid for jQuery | Progress® Kendo UI® Chart for jQuery |
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:
- In the
filter
event handler of the Grid, based on the filters, programmatically click on the legend labels of the Chart. - 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>