Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
To [aggregate](/Documentation/Guide/UI_Components/Chart/Data_Aggregation/) points on discrete axes, follow the steps below.
<!--split-->

1. Enable aggregation.
You can enable data aggregation for the following series:
Multiple data points within a data set can be attributed to the same category. DevExtreme Chart can [aggregate](/Documentation/Guide/UI_Components/Chart/Data_Aggregation/) such points and display one value per category in each series.

- Individual series
Assign `true` to the [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/).[aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/).[enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/#enabled) property.
This demo displays monthly crude oil production in six US states. The Chart creates a series for each year, so every series contains twelve values per state. Without aggregation, the Chart draws these values as twelve overlapping bars in the same position. Aggregation replaces them with a single bar.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, sounds like a bug. Correct me if my edit is wrong.

Suggested change
This demo displays monthly crude oil production in six US states. The Chart creates a series for each year, so every series contains twelve values per state. Without aggregation, the Chart draws these values as twelve overlapping bars in the same position. Aggregation replaces them with a single bar.
This demo displays monthly crude oil production in six US states. The Chart creates a series for each year, so that every series contains twelve values per state. Without aggregation, the Chart draws these values as twelve stacked bars in the same position. Aggregation replaces them with a single bar.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Overlapping" is the correct word here, "Stacked" bars are a separate concept: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StackedBarSeries/


- All series of a specific type
Assign `true` to the `aggregaion.enabled` property that belongs to the configuration object of a [specific series type](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/).

- All series in the Chart
Assign `true` to the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/).[aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/).[enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#enabled) property.
<!--split-->

Individual series aggregation settings have priority over common aggregation settings in the component. For example, you can enable aggregation for all series and disable it for a specific series.
Use the options below the Chart to modify aggregation settings as follows:

In this demo, data aggregation is enabled for all series.
- **Aggregation enabled**
Clear this checkbox to display source data. All twelve monthly bars overlap and look like a single bar as tall as the highest monthly value. The tooltip displays the month for the bar under the mouse pointer, and this month changes as you move the pointer along the bar.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about this?

Suggested change
Clear this checkbox to display source data. All twelve monthly bars overlap and look like a single bar as tall as the highest monthly value. The tooltip displays the month for the bar under the mouse pointer, and this month changes as you move the pointer along the bar.
Uncheck this checkbox to display original (source) data as stacked bars. The tooltip displays the bar's month on hover.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is not quite accurate. Each bar you see in this demo is in fact 12 overlapping bars (one for each month of the year). Tooltips are displayed for individual months only (when aggregation is disabled)


2. Specify an aggregation [method](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#method) (optional).
In this demo, the `sum` method is used.
- **Method**
Select the aggregation method used to display bars: average, sum, or minimum. Gray bars in the background display the monthly maximum for comparison when average or minimum is selected.

You can apply common aggregation settings to all series. Activate [aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/).[enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#enabled) in [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) and specify an aggregation [method](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#method). Individual [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/) settings override these common settings. In this demo, the gray series always use the *"max"* aggregation method.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
You can apply common aggregation settings to all series. Activate [aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/).[enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#enabled) in [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) and specify an aggregation [method](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#method). Individual [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/) settings override these common settings. In this demo, the gray series always use the *"max"* aggregation method.
You can apply common aggregation settings to all series. Activate [aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/).[enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#enabled) option in [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) and specify an aggregation [method](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/aggregation/#method). Individual [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/) settings override these common settings.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "gray series" here refers to the background bar, should we not describe it here?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've mentioned this in the previous paragraph. I don't think we should repeat the idea.

Loading