Data aggregation in charts in an important feature and in the v18.1 release, we've significantly improved it. Let me explain.
These days with big data, data aggregation is important to organizations in many areas such as statistics, data analytics, planning, business strategies, etc. Data aggregation's main goal is to visualize large amounts of data in a more readable form.
The DevExtreme Chart widget has been providing data aggregation for several releases. However, the feature wasn't very flexibile because you could not:
- choose the aggregate function because only the median filter was available;
- change the aggreagtion intervals or configure aggregation differently for each series. In fact, all you could do is turn the feature on/off for the entire chart.
Here's what it looked like prior to v18.1:
$("#chart").dxChart({
dataSource: dataSource,
useAggregation: true,
...
series: [{}]
});
Improved Data Aggregation
In v18.1, we completely reworked the data aggregation feature to address these issues and expand its capabilities.
Now you can:
Here's how easy it to set a custom aggregation method with DevExtreme charts in v18.1:
$("#chart").dxChart({
dataSource: dataSource,
...
series: {
valueField: "carCount",
aggregation: {
enabled: true,
method: "max"
},
...
}
});
- specify different aggregation methods for different series:
$("#chart").dxChart({
dataSource: dataSource,
...
series: [{
valueField: "dailyIndex",
aggregation: {
enabled: true,
method: "avg"
},
...
}, {
valueField: "monthlyIndex",
...
}]
});
Use Synthetic Data Objects
Using a custom aggregate function, you can generate synthetic data objects for a series based on real data objects from the data source, as it is done in the following example for the range area series:
$("#chart").dxChart({
dataSource: dataSource,
...
series: [{
type: "rangeArea",
rangeValue1Field: "minTemp",
rangeValue2Field: "maxTemp",
aggregation: {
enabled: true,
method: "custom",
calculate: function (aggregationInfo, series) {
if (!aggregationInfo.data.length) {
return;
}
var temp = aggregationInfo.data.map(function (item) { return item.temp; }),
maxTemp = Math.max.apply(null, temp),
minTemp = Math.min.apply(null, temp);
return {
date: aggregationInfo.intervalStart,
maxTemp: maxTemp,
minTemp: minTemp
};
}
},
...
},
...
]
});
Manage Interval Length
We also provided the capability to manage the length of aggregation intervals. You can specify the length in pixels using the aggregationGroupWidth option or in axis units using the aggregationInterval option.
$("#chart").dxChart({
dataSource: dataSource,
argumentAxis: {
argumentType: "datetime",
aggregationInterval: "month"
},
...
series: {
valueField: "carCount",
aggregation: {
enabled: true,
method: "avg"
},
...
}
});
Are you looking forward to the improved data aggregation capabilities of the DevExtreme Charts? Drop me a line below.
Thanks!
Email: mharry@devexpress.com
Twitter: @mehulharry
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.