JavaScript/jQuery Chart - argumentAxis.aggregationInterval
Specifies the length of aggregation intervals in axis units. Applies only to axes of continuous and logarithmic types.
For data aggregation, the argument axis is divided into intervals. Series points that fall within the same interval get aggregated together. The aggregationInterval option defines the length of each interval.
If the axis displays numbers, assign a number to this option. For example, an aggregationInterval of 100 produces the following intervals: 0 to 100, 100 to 200, 200 to 300, etc. If the axis displays date-time values, set this option to one of the accepted string values. Alternatively, you can set it to an object that contains one of the fields described in this section.
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: {
// Interval of one day
aggregationInterval: "day",
// Interval of five days
aggregationInterval: { days: 5 }
}
});
});Angular
<dx-chart ... >
<dxo-argument-axis
aggregationInterval="day"> <!-- Interval of one day -->
<dxo-aggregation-interval
[days]="5"> <!-- Interval of five days -->
</dxo-aggregation-interval>
</dxo-argument-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
<template>
<DxChart ... >
<DxArgumentAxis
aggregation-interval="day"> <!-- Interval of one day -->
<DxAggregationInterval
:days="5" /> <!-- Interval of five days -->
</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 ... >
<ArgumentAxis
aggregationInterval={"day"}> {/* Interval of one day */}
<AggregationInterval
days={5} /> {/* Interval of five days */}
</ArgumentAxis>
</Chart>
);
}
}
export default App; On a logarithmic axis, intervals are calculated based on powers. For example, if the logarithmBase is 10 and the aggregationInterval is 1, the following intervals are produced: 100 to 101, 101 to 102, 102 to 103, etc. If the aggregationInterval becomes 2, intervals become longer: 100 to 102, 102 to 104, 104 to 106, etc.
When using the widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, you can specify this option using the VizTimeInterval enum. This enum accepts the same values, but they start with an upper-case letter, for example, "day" becomes Day.
See Also
days
Specifies the time interval measured in days. Accepts integer values. Available only for an axis/scale that displays date-time values.
hours
Specifies the time interval measured in hours. Accepts integer values. Available only for an axis/scale that displays date-time values.
milliseconds
Specifies the time interval measured in milliseconds. Accepts integer values. Available only for an axis/scale that displays date-time values.
minutes
Specifies the time interval measured in minutes. Accepts integer values. Available only for an axis/scale that displays date-time values.
months
Specifies the time interval measured in months. Accepts integer values. Available only for an axis/scale that displays date-time values.
quarters
Specifies the time interval measured in quarters. Accepts integer values. Available only for an axis/scale that displays date-time values.
seconds
Specifies the time interval measured in seconds. Accepts integer values. Available only for an axis/scale that displays date-time values.
weeks
Specifies the time interval measured in weeks. Accepts integer values. Available only for an axis/scale that displays date-time values.
years
Specifies the time interval measured in years. Accepts integer values. Available only for an axis/scale that displays date-time values.