aggregation
If the Chart contains many series points, displaying all of them may lower its performance. In this case, it is better to aggregate the series points, or replace a group of them with a single point. The group includes only those points that fall within the same interval on the argument axis. See aggregationInterval and aggregationGroupWidth for details on dividing the axis into intervals. Alternatively, series points can be aggregated by categories.
The Chart provides several aggregation methods, which differ depending on the series type, and a capability to implement a custom aggregate function. To enable data aggregation for the series, set the aggregation.enabled property to true.
See Also
- Points Aggregation Demo: Multi-Series Chart | Financial Chart
- Data Aggregation
- autoHidePointMarkers
calculate
Specifies a custom aggregate function. Applies only if the aggregation method is "custom".
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
series: [{
// ...
aggregation: {
enabled: true,
method: "custom",
calculate: function (aggregationInfo, series) {
var dataObjects = aggregationInfo.data;
var result = { }; // or [ ]
// ...
// Aggregate the data objects here
// ...
return result;
}
}
}]
});
});Angular
<dx-chart ... >
<dxi-series ... >
<dxo-aggregation
[enabled]="true"
method="custom"
[calculate]="customAggregateFunc">
</dxo-aggregation>
</dxi-series>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
customAggregateFunc (aggregationInfo, series) {
let dataObjects = aggregationInfo.data;
let result = { }; // or [ ]
// ...
// Aggregate the data objects here
// ...
return result;
};
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
<template>
<DxChart ... >
<DxSeries ... >
<DxAggregation
:calculate="customAggregateFunc"
/>
</DxSeries>
</DxChart>
</template>
<script>
import DxChart, {
DxSeries,
DxAggregation
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxSeries,
DxAggregation
},
methods: {
customAggregateFunc (aggregationInfo, series) {
const dataObjects = aggregationInfo.data;
let result = { }; // or [ ]
// ...
// Aggregate the data objects here
// ...
return result;
}
}
}
</script>React
import React from 'react';
import Chart, {
Series,
Aggregation
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<Series ... >
<Aggregation
calculate={this.customAggregateFunc}
/>
</Series>
</Chart>
);
}
customAggregateFunc (aggregationInfo, series) {
let dataObjects = aggregationInfo.data;
let result = { }; // or [ ]
// Aggregate the data objects here
return result;
}
}
export default App;method
Series points get aggregated by individual aggregation intervals. The following list describes aggregation methods available for series of the Full-Stacked Spline Area type:
"avg"
Calculates the average of all point values in an interval."count"
Calculates the number of points in an interval."max"
Calculates the maximum point value in an interval."min"
Calculates the minimum point value in an interval."sum"
Calculates the sum of all point values in an interval."custom"
Applies a custom aggregate function specified in the calculate property.