JavaScript/jQuery RangeSelector - chart.series.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 are aggregated by individual aggregation intervals (on continuous and logarithmic axes) or by categories (on discrete axes if aggregateByCategory is true).
The following list describes available aggregation methods per series type:
Line, bar, area, and Scatter series:
"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.
Bubble series:
- "avg"
Calculates the average of all point values in an interval.
- "avg"
Financial series:
- "ohlc"
Calculates the first open, last close, minimum low, and maximum high value in an interval.
- "ohlc"
Range series:
- "range"
Calculates the range of values in an interval.
- "range"
All series types:
- "custom"
Applies a custom aggregate function specified in the calculate property.
- "custom"
Use the ChartSeriesAggregationMethod enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Avg, Count, Max, Min, Ohlc, Range, Sum, and Custom.