Dynamic Series from the DataSource
In certain scenarios, you may need to add more series to the data source after you created the Chart. In this case, arrange your data source structure as follows:
[
{seriesName: series1, arg: arg11Value, val: value11 }
{seriesName: series1, arg: arg12Value, val: value12 }
...
{seriesName: seriesM, arg: argM1Value, val: valueM1 }
{seriesName: seriesM, arg: argM2Value, val: valueM2 }
...
]
Every object in the data source should correspond to a point in a single series.
This demo uses the structure displayed above to organize data:
{
year: 1970,
country: 'Saudi Arabia',
oil: 192.2,
}
To define series, use the commonSeriesSettings object to specify common settings for all series: the argumentField, the valueField, and the type.
Then, use the seriesTemplate configuration object to define a template for the series. Within this object, assign the data source field that specifies the series name to the nameField property.
If you need to specify individual values for properties of a particular series, assign a callback function to the customizeSeries property of the seriesTemplate object. This demo uses the customizeSeries function to display a line instead of a bar for year: 2009.
www.geohive.com
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"
palette="Violet"
>
<DxSeriesTemplate
:customize-series="customizeSeries"
name-field="year"
/>
<DxCommonSeriesSettings
argument-field="country"
value-field="oil"
type="bar"
/>
<DxTitle text="Oil Production">
<DxSubtitle text="(in millions tonnes)"/>
</DxTitle>
<DxLegend
vertical-alignment="bottom"
horizontal-alignment="center"
/>
<DxExport :enabled="true"/>
</DxChart>
</template>
<script>
import DxChart, {
DxLegend,
DxSeriesTemplate,
DxTitle,
DxSubtitle,
DxCommonSeriesSettings,
DxExport,
} from 'devextreme-vue/chart';
import { dataSource } from './data.js';
export default {
components: {
DxChart,
DxLegend,
DxSeriesTemplate,
DxTitle,
DxSubtitle,
DxCommonSeriesSettings,
DxExport,
},
data() {
return {
dataSource,
};
},
methods: {
customizeSeries(seriesName) {
return seriesName === 2009 ? { type: 'line', label: { visible: true }, color: '#ff3f7a' } : {};
},
},
};
</script>
<style>
#chart {
height: 440px;
width: 100%;
}
</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/22.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/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 dataSource = [
{
year: 1970,
country: 'Saudi Arabia',
oil: 192.2,
}, {
year: 1970,
country: 'USA',
oil: 533.5,
}, {
year: 1970,
country: 'Iran',
oil: 192.6,
}, {
year: 1970,
country: 'Mexico',
oil: 24.2,
}, {
year: 1980,
country: 'Saudi Arabia',
oil: 509.8,
}, {
year: 1980,
country: 'USA',
oil: 480.2,
}, {
year: 1980,
country: 'Iran',
oil: 74.3,
}, {
year: 1980,
country: 'Mexico',
oil: 107.2,
}, {
year: 1990,
country: 'Saudi Arabia',
oil: 342.6,
}, {
year: 1990,
country: 'USA',
oil: 416.6,
}, {
year: 1990,
country: 'Iran',
oil: 162.8,
}, {
year: 1990,
country: 'Mexico',
oil: 146.3,
}, {
year: 1990,
country: 'Russia',
oil: 515.9,
}, {
year: 2000,
country: 'Saudi Arabia',
oil: 456.3,
}, {
year: 2000,
country: 'USA',
oil: 352.6,
}, {
year: 2000,
country: 'Iran',
oil: 191.3,
}, {
year: 2000,
country: 'Mexico',
oil: 171.2,
}, {
year: 2000,
country: 'Russia',
oil: 323.3,
}, {
year: 2008,
country: 'Saudi Arabia',
oil: 515.3,
}, {
year: 2008,
country: 'USA',
oil: 304.9,
}, {
year: 2008,
country: 'Iran',
oil: 209.9,
}, {
year: 2008,
country: 'Mexico',
oil: 157.7,
}, {
year: 2008,
country: 'Russia',
oil: 488.5,
}, {
year: 2009,
country: 'Saudi Arabia',
oil: 459.5,
}, {
year: 2009,
country: 'USA',
oil: 325.3,
}, {
year: 2009,
country: 'Iran',
oil: 202.4,
}, {
year: 2009,
country: 'Mexico',
oil: 147.5,
}, {
year: 2009,
country: 'Russia',
oil: 494.2,
},
];
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.40/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.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.1.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.1.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.33/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.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',
// Prettier
'prettier/standalone': 'npm:prettier@2.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.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',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);