JavaScript/jQuery RangeSelector - chart.series.aggregation
Displaying all the points of a Chart with many series points can affect performance. In this case, 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.
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).
The following list describes available aggregation methods for 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"