20 Implement a Custom Aggregate Function.md

When implementing a custom aggregate function, use the aggregationInfo object that is passed to it as the first argument. This object contains information on the aggregation interval for which the function is called and the data objects that fall within this interval. In addition, you can access the Series object, which is passed to the function as the second argument.

To apply the function, assign it to the series' aggregation.calculate property and set the aggregation.method property to "custom".

#include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/PointsAggregation/" }

In the following code, a custom aggregation function implements the median filter algorithm:

---

jQuery

<!--JavaScript-->
$(function() {
    $("#chartContainer").dxChart({
        dataSource: [
            { argument: 1, value: 10 },
            // ...
        ],
        series: [{
            argumentField: "argument",
            valueField: "value",
            aggregation: {
                enabled: true,
                method: "custom",
                calculate: function (aggregationInfo) {
                    if (aggregationInfo.data.length) {
                        return {
                            argument: aggregationInfo.intervalStart,
                            value: aggregationInfo.data[Math.floor(aggregationInfo.data.length / 2)].value
                        };
                    }
                }
                
            }
        }]
    });
});

Angular

<!--HTML-->
<dx-chart [dataSource]="data">
    <dxi-chart-series
        argumentField="argument"
        valueField="value">
        <dxo-chart-aggregation
            [enabled]="true"
            method="custom"
            [calculate]="calcMedianFilter">
        </dxo-chart-aggregation>
    </dxi-chart-series>
</dx-chart>

<!--TypeScript-->
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    data = [
        { argument: 1, value: 10 },
        // ...
    ];
    calcMedianFilter (aggregationInfo) {
        if (aggregationInfo.data.length) {
            return {
                argument: aggregationInfo.intervalStart,
                value: aggregationInfo.data[Math.floor(aggregationInfo.data.length / 2)].value
            };
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

<!-- tab: App.vue -->
<template> 
    <DxChart ...
        :data-source="data">
        <DxSeries
            argument-field="argument"
            value-field="value">
            <DxAggregation
                :enabled="true"
                :calculate="calcMedianFilter"
                method="custom"
            />
        </DxSeries>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxAggregation
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxAggregation
    },

    data() {
        return {
            data: [
                { argument: 1, value: 10 },
                // ...
            ]
        };
    },

    methods: {
        calcMedianFilter(aggregationInfo) {
            if(aggregationInfo.data.length) {
                return {
                    argument: aggregationInfo.intervalStart,
                    value: aggregationInfo.data[Math.floor(aggregationInfo.data.length / 2)].value
                };
            }
        }
    }
}
</script>

React

<!-- tab: App.js -->
import React from 'react';
import Chart, {
    Series,
    Aggregation
} from 'devextreme-react/chart';

const data = [
    { argument: 1, value: 10 },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Chart ...
                dataSource={data}>
                <Series
                    argumentField="argument"
                    valueField="value">
                    <Aggregation
                        enabled={true}
                        calculate={calcMedianFilter}
                        method="custom"
                    />
                </Series>
            </Chart>
        );
    }
}

function calcMedianFilter(aggregationInfo) {
    if(aggregationInfo.data.length) {
        return {
            argument: aggregationInfo.intervalStart,
            value: aggregationInfo.data[Math.floor(aggregationInfo.data.length / 2)].value
        };
    }
}

export default App;

---