Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Discrete Aggregation
The aggregation algorithm depends on the aggregateByCategory option. In this demo, this option 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.
<template>
<DxChart
id="chart"
:data-source="dataSource"
>
<DxTitle text="Production of Crude Oil">
<DxSubtitle text="(in Barrels)"/>
</DxTitle>
<DxCommonSeriesSettings
argument-field="state"
value-field="value"
type="bar"
>
<DxAggregation
:enabled="true"
method="sum"
/>
</DxCommonSeriesSettings>
<DxArgumentAxis :aggregate-by-category="true"/>
<DxSeriesTemplate name-field="year"/>
</DxChart>
</template>
<script>
import DxChart, {
DxArgumentAxis,
DxTitle,
DxSubtitle,
DxCommonSeriesSettings,
DxAggregation,
DxSeriesTemplate
} from 'devextreme-vue/chart';
import { oilProductionData } from './data.js';
export default {
components: {
DxChart,
DxArgumentAxis,
DxTitle,
DxSubtitle,
DxCommonSeriesSettings,
DxAggregation,
DxSeriesTemplate
},
data() {
return {
dataSource: oilProductionData
};
}
};
</script>
<style>
#chart {
height: 440px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
export const oilProductionData = [
{ 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 }
];
System.config({
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'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.4',
'devextreme-vue': 'npm:devextreme-vue@20.2.4',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.7/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js'
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});