Hello Telerik Team,
I have signed up for a Trial of Kendo UI JS to check out whether your product will solve a business case we are trying to build with a web application.
I have an issue with filtering on the values of the graphs.
Please have a look at the following screenshot:
chart before filtering
Here, you can see an unfiltered view of an example chart.
This chart's data comes from a web interface, and for this particular example it is:
[{"Date":"2018-01-02","Name":"Karol","Points":"2","CalculatedValue":"2","CreatedAt":"05/20/2018"},
{"Date":"2018-01-02","Name":"Karol","Points":"6","CalculatedValue":"6","CreatedAt":"05/20/2018"},
{"Date":"2018-01-02","Name":"Peter","Points":"4","CalculatedValue":"4","CreatedAt":"05/20/2018"},
{"Date":"2018-01-06","Name":"Matthew","Points":"8","CalculatedValue":"8","CreatedAt":"05/20/2018"}]
My aggregate is "sum", so for example on 2018-01-02 for "Karol" the sum is 8.
Whenever I want to filter on values greater than 6 on the WHOLE chart suddenly the values of "Karol" are no longer visible. This _makes_ sense becuase there is no single point of data that is greater than 6 for Karol, but since my aggregate is sum, I would have expected for Kendo UI to filter aggregates, and therefore still show me the values for Karol.
chart after filtering
Please look at my setup for the DS and the Chart. Could you please tell me how should I set up the filtering in order to filter on actual aggregate values, instead of their base fractions?
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "/xx/xxxxx",
data: {
id: xxx
},
dataType: "json",
type: "post"
}
},
group: {
field: "Name",
aggregates: [
{ field: "CalculatedValue", aggregate: "sum" }
]
},
sort: {
field: "Date",
dir: "asc"
},
schema: {
model: {
fields: {
CalculatedValue: {
type: "number"
},
CreatedAt: {
type: "date",
format: "{0:dd/MM/yyyy}"
},
"Date": {
type: "date",
format: "{0:yyyy-MM-dd}"
}
}
}
}
,
filter: [
]
});
$("#chart-div-calc-148-_25392").kendoChart({
theme: "moonlight",
dataSource: ds,
seriesColors: [
"#0C6BC1", "#06CAEA", "#F7A9F7", "#A00B00", "#FF9900", "#EDED11", "#00E000", "#00722E", "#CF00E9",
"#7427D8", "#072DE8", "#FFFFFF", "#878787", "#F43F00"
],
title: {
text: "Filter",
align: "left"
},
legend: {
position: "right",
cursor: "pointer",
orientation: "vertical"
},
series: [
{
type: "line",
field: "CalculatedValue",
style: "smooth",
name: "#= group.value #",
categoryField: "Date",
aggregate: "sum",
labels: {
visible: false,
format: "{0:N2}"
}
}
],
tooltip: {
visible: true,
shared: false,
format: "{0:N2}",
template: '${series.name}: <b style="font-size: 1.1em"> ${value}</b>'
//template: '#= kendo.format("{0:d-MMM-yyyy}", category)#',
//template: "${series}: ${value}"
},
valueAxis: {
labels: {
format: "{0:N0}"
},
title: {
text: ""
}
},
pannable: {
lock: "y"
},
zoomable: {
},
render: function(e) {
var loading = $('#chart-loading-148-_25392', e.sender.element.parent());
console.dir(this);
var totalmax = -6666 + (this._model._plotArea.valueAxis.totalMax * 0.01);
if ($(this).data('putPlots') == null) {
var axisNames = ["valueAxis"];
var options = {};
for (var i = 0; i < axisNames.length; i++) {
options[axisNames[i]] = { plotBands: [{
from: -6666,
to: totalmax,
color: '#00FF00',
opacity: 1
}] };
}
console.dir(options);
$(this).data('putPlots', true);
this.setOptions(options);
}
kendo.ui.progress(loading, false);
},
categoryAxis: {
majorGridLines: {
visible: false
},
categoryField: "Date"
,type: "date",
baseUnit: "days",
//baseUnitStep: "auto",
baseUnit: "days"
,
labels: {
format: "dd-MMM-yyyy",
weekStartDay: 1,
rotation: "auto"
}
}
});
}
Thank you in advance for looking into it
3 Answers, 1 is accepted
Thank you for the details.
In general, the Kendo UI DataSource and the widgets bound to it does not support filtering by aggregate. This could only be achieved by using custom logic on the server. This will require sending the desired aggregate value, performing a sum operation on the group and only returning the group to the client.
The main reason is that filtering by aggregate will change the displayed data and this will result in changing the aggregates.
Let me know if you need additional information on this matter.
Regards,
Stefan
Progress Telerik
Rank 1
Dear Stefan,
Thank you very much for having looked into my request. The problem with the server approach is that we work with highly customized (thus not pre-defined) data. We're trying to create a platform where customers can upload ANY kind of data and create KPIs from them. This means that it's extremely difficult to perform the reconciliation on the server, because the server is not aware of the data types per se. It would be a huge performance hit if we were to go down that path, and frankly, pretty much impossible for us to do at this time.
Is there any work-around that you can think of on the client side to do it? I'm sure there are other business cases where it would be beneficial for Kendo UI to have WYSIWYF (what you see is what you filter)
Thank you kindly for your answer on this query.
I do understand the scenario when the data type can be different.
Achieving this on the client will be possible, but it will require the same approach.
One array of aggregated data has to be created, then the filter should be applied over that array. Then based on the data left after the filtering, the actual Chart data has to be filtered based on the fields left after the aggregation array is filtered.
We do understand that will require additional code which has to be written, but currently, the Chart and the DataSource in specific, does not handle aggregates filtering automatically.
Regards,
Stefan
Progress Telerik