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>
<dx-chart
id="chart"
:data-source="dataSource"
>
<dx-title text="Production of Crude Oil">
<dx-subtitle text="(in Barrels)"/>
</dx-title>
<dx-common-series-settings
argument-field="state"
value-field="value"
type="bar"
>
<dx-aggregation
:enabled="true"
method="sum"
/>
</dx-common-series-settings>
<dx-argument-axis :aggregate-by-category="true"/>
<dx-series-template name-field="year"/>
</dx-chart>
</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 Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
components: { App },
template: '<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/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.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',
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js',
'devextreme': 'npm:devextreme@19.2',
'devextreme-vue': 'npm:devextreme-vue@19.2',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
meta: {
'*.vue': { loader: 'vue-loader' }
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});