RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/Chart/Data_Aggregation/ below:

Vue Chart - Data Aggregation

If the Chart contains many series points, displaying all of them may slow down its performance. In this case, it is better to aggregate the series points or replace a group of them with a single point. This aggregated series point conveys a summary of several points, which also facilitates analysis of large datasets. This article discusses steps to configure data aggregation in the Chart.

Multiple Series Demo Financial Series Demo

Enable Data Aggregation

You can enable data aggregation for individual series, all series of a specific type, or for all series in the Chart. The following code demonstrates all the three cases:

jQuery

$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonSeriesSettings: {
            // Enables data aggregation for all series in the Chart
            aggregation: {
                enabled: true
            },
            fullstackedbar: {
                // Enables data aggregation for all Full-Stacked Bar series
                aggregation: {
                    enabled: true
                }
            }
        },
        series: [{
            // Enables data aggregation for an individual series
            aggregation: {
                enabled: true
            }
        }, {
            // ...
        }]
    });
});

Angular

<dx-chart ... >
    <dxo-common-series-settings>
        <!-- Enables data aggregation for all series in the Chart -->
        <dxo-aggregation
            [enabled]="true">
        </dxo-aggregation>

        <dxo-fullstackedbar>
            <!-- Enables data aggregation for all Full-Stacked Bar series -->
            <dxo-aggregation
                [enabled]="true">
            </dxo-aggregation>
        </dxo-fullstackedbar>

    </dxo-common-series-settings>

    <dxi-series>
        <!-- Enables data aggregation for an individual series -->
        <dxo-aggregation
            [enabled]="true">
        </dxo-aggregation>
    </dxi-series>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

<template> 
    <DxChart ... >
        <DxCommonSeriesSettings ...
            :fullstackedbar="fullStackedBarSettings"> <!-- Enables data aggregation for all Full-Stacked Bar series -->
            <DxAggregation :enabled="true"/> <!-- Enables data aggregation for all series in the Chart -->
        </DxCommonSeriesSettings>
        <DxSeries>
            <DxAggregation :enabled="true"/> <!-- Enables data aggregation for an individual series -->
        </DxSeries>
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxCommonSeriesSettings,
        DxSeries,
        DxAggregation
    },
    data() {
        return {
            fullStackedBarSettings: { aggregation: { enabled: true } }
        };
    }
}
</script>

React

import React from 'react';
import Chart, {
    CommonSeriesSettings,
    Series,
    Aggregation
} from 'devextreme-react/chart';

const fullStackedBarSettings = { aggregation: { enabled: true } };

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <CommonSeriesSettings ...
                    fullstackedbar={fullStackedBarSettings}> {/* Enables data aggregation for all Full-Stacked Bar series */}
                    <Aggregation enabled={true} /> {/* Enables data aggregation for all series in the Chart */}
                </CommonSeriesSettings>
                <Series>
                    <Aggregation enabled={true} /> {/* Enables data aggregation for an individual series */}
                </Series>
            </Chart>
        );
    }
}

export default App;

NOTE

You can configure data aggregation to reduce the number of rendered component elements. This can improve Chart performance on large datasets. For more information on how to improve component performance, refer to the following topic:

Enhance Performance on Large Datasets

Specify the Aggregation Interval

Series points are grouped for aggregation using intervals: those points that fall within the same interval on the argument axis get aggregated together. You can specify the length of the intervals in axis units (numbers or dates) or pixels, or aggregate points by categories:

Axis units (only for axes of continuous and logarithmic types)
Specify the argumentAxis.aggregationInterval property.

jQuery

$(function() {
    $("#unitInterval").dxChart({
        // ...
        argumentAxis: {
            // A new interval every 100 units
            aggregationInterval: 100,
        }
    });
    $("#dayInterval").dxChart({
        // ...
        argumentAxis: {
            // A new interval every day
            aggregationInterval: "day",
        }
    });
    $("#fiveDayInterval").dxChart({
        // ...
        argumentAxis: {
            // A new interval every five days
            aggregationInterval: { days: 5 }
        }
    });
});

Angular

<dx-chart>
    <!-- A new interval every 100 units -->
    <dxo-argument-axis ... [aggregationInterval]="100">
    </dxo-argument-axis>
</dx-chart>
<dx-chart>
    <!-- A new interval every day -->
    <dxo-argument-axis ... aggregationInterval="day">
    </dxo-argument-axis>
</dx-chart>
<dx-chart>
    <dxo-argument-axis ... >
        <!-- A new interval every five days -->
        <dxo-aggregation-interval [days]="5">
        </dxo-aggregation-interval>
    </dxo-argument-axis>
</dx-chart>

Vue

<template> 
    <DxChart ... >
        <!-- A new interval every 100 units -->
        <DxArgumentAxis ... :aggregation-interval="100">
        </DxArgumentAxis>
    </DxChart>
    <DxChart ... >
        <!-- A new interval every day -->
        <DxArgumentAxis ... aggregation-interval="day">
        </DxArgumentAxis>
    </DxChart>
    <DxChart ... >
        <DxArgumentAxis ... >
            <!-- A new interval every five days -->
            <DxAggregationInterval :days="5" />
        </DxArgumentAxis>
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxAggregationInterval
    }
}
</script>

React

import React from 'react';
import Chart, {
    ArgumentAxis,
    AggregationInterval
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <>
                <Chart ... >
                    <!-- A new interval every 100 units -->
                    <ArgumentAxis ... aggregationInterval={100} >
                    </ArgumentAxis>
                </Chart>
                <Chart ... >
                    <!-- A new interval every day -->
                    <ArgumentAxis ... aggregationInterval="day">
                    </ArgumentAxis>
                </Chart>
                <Chart ... >
                    <ArgumentAxis ... >
                        <!-- A new interval every five days -->
                        <AggregationInterval days={5} />
                    </ArgumentAxis>
                </Chart>
            </>
        );
    }
}

export default App;

Pixels (only for axes of continuous and logarithmic types)
Specify the argumentAxis.aggregationGroupWidth property.

jQuery

$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // A new interval every 100 pixels
            aggregationGroupWidth: 100
        }
    });
});

Angular

<dx-chart ... >
    <!-- A new interval every 100 pixels -->
    <dxo-argument-axis ... [aggregationGroupWidth]="100">
    </dxo-argument-axis>
</dx-chart>

Vue

<template> 
    <DxChart ... >
        <!-- A new interval every 100 pixels -->
        <DxArgumentAxis ... :aggregation-group-width="100"/>
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxArgumentAxis
    }
}
</script>

React

import React from 'react';
import Chart, {
    ArgumentAxis
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <!-- A new interval every 100 pixels -->
                <ArgumentAxis ... aggregationGroupWidth={100} />
            </Chart>
        );
    }
}

export default App;

Categories
You can enable aggregation by category only for discrete argument axes. Group data before assigning to the component's dataSource to aggregate it by category. You do not need to specify any additional properties to set up aggregation by category.

Choose the Aggregation Method

Aggregation methods specify how series points should be aggregated. DevExtreme provides the most commonly used aggregation methods out of the box. To use one, specify a series' aggregation.method property. In its description, you will find the full list of provided aggregation methods. Note that different series types have different aggregation methods available.

The following code shows how to specify aggregation methods for each series individually. Data aggregation is enabled for all series in the commonSeriesSettings object.

jQuery

$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonSeriesSettings: {
            aggregation: {
                enabled: true
            }
        },
        series: [{
            // ...
            type: "line",
            aggregation: {
                method: "min"
            }
        }, {
            // ...
            type: "bar",
            aggregation: {
                method: "max"
            }
        }]
    });
});

Angular

<dx-chart ... >
    <dxo-common-series-settings ... >
        <dxo-aggregation
            [enabled]="true">
        </dxo-aggregation>
    </dxo-common-series-settings>

    <dxi-series type="line" ... >
        <dxo-aggregation
            method="min">
        </dxo-aggregation>
    </dxi-series>

    <dxi-series type="bar" ... >
        <dxo-aggregation
            method="max">
        </dxo-aggregation>
    </dxi-series>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

<template> 
    <DxChart ... >
        <DxCommonSeriesSettings ... >
            <DxAggregation :enabled="true"/>
        </DxCommonSeriesSettings>
        <DxSeries ...
            type="line">
            <DxAggregation method="min"/>
        </DxSeries>
        <DxSeries ...
            type="bar">
            <DxAggregation method="max"/>
        </DxSeries>
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxCommonSeriesSettings,
        DxSeries,
        DxAggregation
    }
}
</script>

React

import React from 'react';
import Chart, {
    CommonSeriesSettings,
    Series,
    Aggregation
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <CommonSeriesSettings ... >
                    <Aggregation enabled={true} />
                </CommonSeriesSettings>
                <Series ...
                    type="line">
                    <Aggregation method="min" />
                </Series>
                <Series ...
                    type="bar">
                    <Aggregation method="max" />
                </Series>
            </Chart>
        );
    }
}

export default App;

View Demo

You can implement a custom aggregate function instead of using an out-of-the-box aggregation method.

Implement a Custom Aggregate Function

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".

View Demo

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

jQuery

$(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

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

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

<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

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;

Feel free to share topic-related thoughts here. If you have technical questions, please create a support ticket in the DevExpress Support Center. Thank you for the feedback!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4