Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Discrete Aggregation
The aggregation algorithm depends on the aggregateByCategory property. In this demo, this property is set to true and applies the "sum" aggregation method for the groups specified in the dataSource.
If aggregateByCategory is false, the specified aggregation method is not applied. The first series point is displayed instead.
U.S. Energy Information Administration (Oct 2019)
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-chart id="chart" [dataSource]="dataSource">
<dxo-title text="Production of Crude Oil">
<dxo-subtitle text="(in Barrels)"></dxo-subtitle>
</dxo-title>
<dxo-common-series-settings argumentField="state" valueField="value" type="bar">
<dxo-aggregation enabled="true" method="sum"></dxo-aggregation>
</dxo-common-series-settings>
<dxo-argument-axis aggregateByCategory="true"></dxo-argument-axis>
<dxo-series-template nameField="year"></dxo-series-template>
</dx-chart>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule } from 'devextreme-angular';
import { Service, OilProductionItem } from './app.service';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service]
})
export class AppComponent {
dataSource: OilProductionItem[];
constructor(service: Service) {
this.dataSource = service.getOilProductionData();
}
}
@NgModule({
imports: [
BrowserModule,
DxChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart {
height: 440px;
}
import { Injectable } from '@angular/core';
export class OilProductionItem {
state: string;
month: string;
year: string;
value: number;
}
let oilProductionData: OilProductionItem[] = [
{ state: "Alaska", month: "Jan", year: "2016", value: 15985000 },
{ state: "Alaska", month: "Feb", year: "2016", value: 14713000 },
{ state: "Alaska", month: "Mar", year: "2016", value: 15842000 },
{ state: "Alaska", month: "Apr", year: "2016", value: 14665000 },
{ state: "Alaska", month: "May", year: "2016", value: 15658000 },
{ state: "Alaska", month: "Jun", year: "2016", value: 14103000 },
{ state: "Alaska", month: "Jul", year: "2016", value: 13584000 },
{ state: "Alaska", month: "Aug", year: "2016", value: 14265000 },
{ state: "Alaska", month: "Sep", year: "2016", value: 13598000 },
{ state: "Alaska", month: "Oct", year: "2016", value: 15383000 },
{ state: "Alaska", month: "Nov", year: "2016", value: 15433000 },
{ state: "Alaska", month: "Dec", year: "2016", value: 16148000 },
{ state: "Alaska", month: "Jan", year: "2017", value: 16055000 },
{ state: "Alaska", month: "Feb", year: "2017", value: 14434000 },
{ state: "Alaska", month: "Mar", year: "2017", value: 16300000 },
{ state: "Alaska", month: "Apr", year: "2017", value: 15759000 },
{ state: "Alaska", month: "May", year: "2017", value: 15734000 },
{ state: "Alaska", month: "Jun", year: "2017", value: 13843000 },
{ state: "Alaska", month: "Jul", year: "2017", value: 13102000 },
{ state: "Alaska", month: "Aug", year: "2017", value: 13971000 },
{ state: "Alaska", month: "Sep", year: "2017", value: 14465000 },
{ state: "Alaska", month: "Oct", year: "2017", value: 15705000 },
{ state: "Alaska", month: "Nov", year: "2017", value: 15297000 },
{ state: "Alaska", month: "Dec", year: "2017", value: 15883000 },
{ state: "Alaska", month: "Jan", year: "2018", value: 15739000 },
{ state: "Alaska", month: "Feb", year: "2018", value: 14367000 },
{ state: "Alaska", month: "Mar", year: "2018", value: 15878000 },
{ state: "Alaska", month: "Apr", year: "2018", value: 14922000 },
{ state: "Alaska", month: "May", year: "2018", value: 15367000 },
{ state: "Alaska", month: "Jun", year: "2018", value: 13521000 },
{ state: "Alaska", month: "Jul", year: "2018", value: 12237000 },
{ state: "Alaska", month: "Aug", year: "2018", value: 13259000 },
{ state: "Alaska", month: "Sep", year: "2018", value: 14143000 },
{ state: "Alaska", month: "Oct", year: "2018", value: 15083000 },
{ state: "Alaska", month: "Nov", year: "2018", value: 14919000 },
{ state: "Alaska", month: "Dec", year: "2018", value: 15366000 },
{ state: "Colorado", month: "Jan", year: "2016", value: 10326000 },
{ state: "Colorado", month: "Feb", year: "2016", value: 9484000 },
{ state: "Colorado", month: "Mar", year: "2016", value: 9906000 },
{ state: "Colorado", month: "Apr", year: "2016", value: 9505000 },
{ state: "Colorado", month: "May", year: "2016", value: 9667000 },
{ state: "Colorado", month: "Jun", year: "2016", value: 9285000 },
{ state: "Colorado", month: "Jul", year: "2016", value: 9965000 },
{ state: "Colorado", month: "Aug", year: "2016", value: 10042000 },
{ state: "Colorado", month: "Sep", year: "2016", value: 9742000 },
{ state: "Colorado", month: "Oct", year: "2016", value: 11183000 },
{ state: "Colorado", month: "Nov", year: "2016", value: 9595000 },
{ state: "Colorado", month: "Dec", year: "2016", value: 9417000 },
{ state: "Colorado", month: "Jan", year: "2017", value: 9297000 },
{ state: "Colorado", month: "Feb", year: "2017", value: 8386000 },
{ state: "Colorado", month: "Mar", year: "2017", value: 9568000 },
{ state: "Colorado", month: "Apr", year: "2017", value: 9841000 },
{ state: "Colorado", month: "May", year: "2017", value: 10487000 },
{ state: "Colorado", month: "Jun", year: "2017", value: 10147000 },
{ state: "Colorado", month: "Jul", year: "2017", value: 10980000 },
{ state: "Colorado", month: "Aug", year: "2017", value: 12039000 },
{ state: "Colorado", month: "Sep", year: "2017", value: 12187000 },
{ state: "Colorado", month: "Oct", year: "2017", value: 12951000 },
{ state: "Colorado", month: "Nov", year: "2017", value: 13095000 },
{ state: "Colorado", month: "Dec", year: "2017", value: 13918000 },
{ state: "Colorado", month: "Jan", year: "2018", value: 13962000 },
{ state: "Colorado", month: "Feb", year: "2018", value: 12467000 },
{ state: "Colorado", month: "Mar", year: "2018", value: 13966000 },
{ state: "Colorado", month: "Apr", year: "2018", value: 13924000 },
{ state: "Colorado", month: "May", year: "2018", value: 14215000 },
{ state: "Colorado", month: "Jun", year: "2018", value: 13119000 },
{ state: "Colorado", month: "Jul", year: "2018", value: 13986000 },
{ state: "Colorado", month: "Aug", year: "2018", value: 16075000 },
{ state: "Colorado", month: "Sep", year: "2018", value: 15951000 },
{ state: "Colorado", month: "Oct", year: "2018", value: 16890000 },
{ state: "Colorado", month: "Nov", year: "2018", value: 16487000 },
{ state: "Colorado", month: "Dec", year: "2018", value: 16775000 },
{ state: "North Dakota", month: "Jan", year: "2016", value: 34548000 },
{ state: "North Dakota", month: "Feb", year: "2016", value: 32252000 },
{ state: "North Dakota", month: "Mar", year: "2016", value: 34222000 },
{ state: "North Dakota", month: "Apr", year: "2016", value: 31055000 },
{ state: "North Dakota", month: "May", year: "2016", value: 32246000 },
{ state: "North Dakota", month: "Jun", year: "2016", value: 30595000 },
{ state: "North Dakota", month: "Jul", year: "2016", value: 31724000 },
{ state: "North Dakota", month: "Aug", year: "2016", value: 30263000 },
{ state: "North Dakota", month: "Sep", year: "2016", value: 28967000 },
{ state: "North Dakota", month: "Oct", year: "2016", value: 32144000 },
{ state: "North Dakota", month: "Nov", year: "2016", value: 30798000 },
{ state: "North Dakota", month: "Dec", year: "2016", value: 28995000 },
{ state: "North Dakota", month: "Jan", year: "2017", value: 30264000 },
{ state: "North Dakota", month: "Feb", year: "2017", value: 28714000 },
{ state: "North Dakota", month: "Mar", year: "2017", value: 31509000 },
{ state: "North Dakota", month: "Apr", year: "2017", value: 31208000 },
{ state: "North Dakota", month: "May", year: "2017", value: 31840000 },
{ state: "North Dakota", month: "Jun", year: "2017", value: 30693000 },
{ state: "North Dakota", month: "Jul", year: "2017", value: 32255000 },
{ state: "North Dakota", month: "Aug", year: "2017", value: 33437000 },
{ state: "North Dakota", month: "Sep", year: "2017", value: 32883000 },
{ state: "North Dakota", month: "Oct", year: "2017", value: 36309000 },
{ state: "North Dakota", month: "Nov", year: "2017", value: 35482000 },
{ state: "North Dakota", month: "Dec", year: "2017", value: 36085000 },
{ state: "North Dakota", month: "Jan", year: "2018", value: 36057000 },
{ state: "North Dakota", month: "Feb", year: "2018", value: 32501000 },
{ state: "North Dakota", month: "Mar", year: "2018", value: 35538000 },
{ state: "North Dakota", month: "Apr", year: "2018", value: 36290000 },
{ state: "North Dakota", month: "May", year: "2018", value: 38137000 },
{ state: "North Dakota", month: "Jun", year: "2018", value: 36479000 },
{ state: "North Dakota", month: "Jul", year: "2018", value: 39005000 },
{ state: "North Dakota", month: "Aug", year: "2018", value: 39648000 },
{ state: "North Dakota", month: "Sep", year: "2018", value: 40274000 },
{ state: "North Dakota", month: "Oct", year: "2018", value: 42674000 },
{ state: "North Dakota", month: "Nov", year: "2018", value: 41442000 },
{ state: "North Dakota", month: "Dec", year: "2018", value: 43485000 },
{ state: "New Mexico", month: "Jan", year: "2016", value: 11737000 },
{ state: "New Mexico", month: "Feb", year: "2016", value: 11551000 },
{ state: "New Mexico", month: "Mar", year: "2016", value: 12591000 },
{ state: "New Mexico", month: "Apr", year: "2016", value: 12144000 },
{ state: "New Mexico", month: "May", year: "2016", value: 12182000 },
{ state: "New Mexico", month: "Jun", year: "2016", value: 11679000 },
{ state: "New Mexico", month: "Jul", year: "2016", value: 12146000 },
{ state: "New Mexico", month: "Aug", year: "2016", value: 12167000 },
{ state: "New Mexico", month: "Sep", year: "2016", value: 12019000 },
{ state: "New Mexico", month: "Oct", year: "2016", value: 12655000 },
{ state: "New Mexico", month: "Nov", year: "2016", value: 12485000 },
{ state: "New Mexico", month: "Dec", year: "2016", value: 13036000 },
{ state: "New Mexico", month: "Jan", year: "2017", value: 12979000 },
{ state: "New Mexico", month: "Feb", year: "2017", value: 12391000 },
{ state: "New Mexico", month: "Mar", year: "2017", value: 13700000 },
{ state: "New Mexico", month: "Apr", year: "2017", value: 13423000 },
{ state: "New Mexico", month: "May", year: "2017", value: 14369000 },
{ state: "New Mexico", month: "Jun", year: "2017", value: 13318000 },
{ state: "New Mexico", month: "Jul", year: "2017", value: 13859000 },
{ state: "New Mexico", month: "Aug", year: "2017", value: 14257000 },
{ state: "New Mexico", month: "Sep", year: "2017", value: 15043000 },
{ state: "New Mexico", month: "Oct", year: "2017", value: 16202000 },
{ state: "New Mexico", month: "Nov", year: "2017", value: 15853000 },
{ state: "New Mexico", month: "Dec", year: "2017", value: 17204000 },
{ state: "New Mexico", month: "Jan", year: "2018", value: 16691000 },
{ state: "New Mexico", month: "Feb", year: "2018", value: 16345000 },
{ state: "New Mexico", month: "Mar", year: "2018", value: 19171000 },
{ state: "New Mexico", month: "Apr", year: "2018", value: 19320000 },
{ state: "New Mexico", month: "May", year: "2018", value: 20002000 },
{ state: "New Mexico", month: "Jun", year: "2018", value: 19471000 },
{ state: "New Mexico", month: "Jul", year: "2018", value: 20354000 },
{ state: "New Mexico", month: "Aug", year: "2018", value: 22052000 },
{ state: "New Mexico", month: "Sep", year: "2018", value: 22029000 },
{ state: "New Mexico", month: "Oct", year: "2018", value: 24024000 },
{ state: "New Mexico", month: "Nov", year: "2018", value: 23796000 },
{ state: "New Mexico", month: "Dec", year: "2018", value: 25704000 },
{ state: "Oklahoma", month: "Jan", year: "2016", value: 14137000 },
{ state: "Oklahoma", month: "Feb", year: "2016", value: 11959000 },
{ state: "Oklahoma", month: "Mar", year: "2016", value: 13406000 },
{ state: "Oklahoma", month: "Apr", year: "2016", value: 12533000 },
{ state: "Oklahoma", month: "May", year: "2016", value: 13236000 },
{ state: "Oklahoma", month: "Jun", year: "2016", value: 12455000 },
{ state: "Oklahoma", month: "Jul", year: "2016", value: 12442000 },
{ state: "Oklahoma", month: "Aug", year: "2016", value: 12910000 },
{ state: "Oklahoma", month: "Sep", year: "2016", value: 12323000 },
{ state: "Oklahoma", month: "Oct", year: "2016", value: 13088000 },
{ state: "Oklahoma", month: "Nov", year: "2016", value: 12778000 },
{ state: "Oklahoma", month: "Dec", year: "2016", value: 12809000 },
{ state: "Oklahoma", month: "Jan", year: "2017", value: 12555000 },
{ state: "Oklahoma", month: "Feb", year: "2017", value: 11806000 },
{ state: "Oklahoma", month: "Mar", year: "2017", value: 13570000 },
{ state: "Oklahoma", month: "Apr", year: "2017", value: 12822000 },
{ state: "Oklahoma", month: "May", year: "2017", value: 13296000 },
{ state: "Oklahoma", month: "Jun", year: "2017", value: 13485000 },
{ state: "Oklahoma", month: "Jul", year: "2017", value: 13696000 },
{ state: "Oklahoma", month: "Aug", year: "2017", value: 14104000 },
{ state: "Oklahoma", month: "Sep", year: "2017", value: 13749000 },
{ state: "Oklahoma", month: "Oct", year: "2017", value: 14736000 },
{ state: "Oklahoma", month: "Nov", year: "2017", value: 14872000 },
{ state: "Oklahoma", month: "Dec", year: "2017", value: 15215000 },
{ state: "Oklahoma", month: "Jan", year: "2018", value: 16434000 },
{ state: "Oklahoma", month: "Feb", year: "2018", value: 14768000 },
{ state: "Oklahoma", month: "Mar", year: "2018", value: 16820000 },
{ state: "Oklahoma", month: "Apr", year: "2018", value: 15941000 },
{ state: "Oklahoma", month: "May", year: "2018", value: 16330000 },
{ state: "Oklahoma", month: "Jun", year: "2018", value: 15682000 },
{ state: "Oklahoma", month: "Jul", year: "2018", value: 16700000 },
{ state: "Oklahoma", month: "Aug", year: "2018", value: 17431000 },
{ state: "Oklahoma", month: "Sep", year: "2018", value: 17200000 },
{ state: "Oklahoma", month: "Oct", year: "2018", value: 17861000 },
{ state: "Oklahoma", month: "Nov", year: "2018", value: 17406000 },
{ state: "Oklahoma", month: "Dec", year: "2018", value: 18113000 },
{ state: "Texas", month: "Jan", year: "2016", value: 103269000 },
{ state: "Texas", month: "Feb", year: "2016", value: 95491000 },
{ state: "Texas", month: "Mar", year: "2016", value: 100776000 },
{ state: "Texas", month: "Apr", year: "2016", value: 96368000 },
{ state: "Texas", month: "May", year: "2016", value: 97849000 },
{ state: "Texas", month: "Jun", year: "2016", value: 93931000 },
{ state: "Texas", month: "Jul", year: "2016", value: 97069000 },
{ state: "Texas", month: "Aug", year: "2016", value: 97037000 },
{ state: "Texas", month: "Sep", year: "2016", value: 93462000 },
{ state: "Texas", month: "Oct", year: "2016", value: 97647000 },
{ state: "Texas", month: "Nov", year: "2016", value: 94758000 },
{ state: "Texas", month: "Dec", year: "2016", value: 98003000 },
{ state: "Texas", month: "Jan", year: "2017", value: 98907000 },
{ state: "Texas", month: "Feb", year: "2017", value: 92400000 },
{ state: "Texas", month: "Mar", year: "2017", value: 102564000 },
{ state: "Texas", month: "Apr", year: "2017", value: 99595000 },
{ state: "Texas", month: "May", year: "2017", value: 105298000 },
{ state: "Texas", month: "Jun", year: "2017", value: 102763000 },
{ state: "Texas", month: "Jul", year: "2017", value: 106940000 },
{ state: "Texas", month: "Aug", year: "2017", value: 103967000 },
{ state: "Texas", month: "Sep", year: "2017", value: 106077000 },
{ state: "Texas", month: "Oct", year: "2017", value: 115887000 },
{ state: "Texas", month: "Nov", year: "2017", value: 115741000 },
{ state: "Texas", month: "Dec", year: "2017", value: 121005000 },
{ state: "Texas", month: "Jan", year: "2018", value: 120488000 },
{ state: "Texas", month: "Feb", year: "2018", value: 112244000 },
{ state: "Texas", month: "Mar", year: "2018", value: 129348000 },
{ state: "Texas", month: "Apr", year: "2018", value: 126677000 },
{ state: "Texas", month: "May", year: "2018", value: 130717000 },
{ state: "Texas", month: "Jun", year: "2018", value: 130759000 },
{ state: "Texas", month: "Jul", year: "2018", value: 135682000 },
{ state: "Texas", month: "Aug", year: "2018", value: 140226000 },
{ state: "Texas", month: "Sep", year: "2018", value: 139019000 },
{ state: "Texas", month: "Oct", year: "2018", value: 146462000 },
{ state: "Texas", month: "Nov", year: "2018", value: 145691000 },
{ state: "Texas", month: "Dec", year: "2018", value: 151761000 }
];
@Injectable()
export class Service {
getOilProductionData(): OilProductionItem[] {
return oilProductionData;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "system",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
},
'devextreme/localization.js': {
"esModule": true
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.1.0/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.5',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.11',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18',
'devextreme-angular': 'npm:devextreme-angular@20.2.5',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>