Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Discrete Data
Documentation
This example demonstrates how to visualize discrete data using the PolarChart UI component. Months in the data source form discrete categories that divide the PolarChart. In addition, you can spot the difference between series types. Use the drop-down menu below the PolarChart to change the applied series type.
www.weather.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>
<div>
<div class="long-title">
<h3>Average temperature in London</h3>
</div>
<div id="chart-demo">
<DxPolarChart
id="radarChart"
:data-source="dataSource"
>
<DxCommonSeriesSettings :type="currentType"/>
<DxSeries
value-field="day"
name="Day"
color="#ba4d51"
/>
<DxSeries
value-field="night"
name="Night"
color="#5f8b95"
/>
<DxMargin
:top="50"
:bottom="50"
:left="100"
/>
</DxPolarChart>
<div class="center">
<div>Series Type</div>
<DxSelectBox
:width="200"
:data-source="types"
v-model:value="currentType"
/>
</div>
</div>
</div>
</template>
<script>
import {
DxPolarChart,
DxCommonSeriesSettings,
DxSeries,
DxMargin
} from 'devextreme-vue/polar-chart';
import DxSelectBox from 'devextreme-vue/select-box';
import { types, dataSource } from './data.js';
export default {
components: {
DxSelectBox,
DxPolarChart,
DxCommonSeriesSettings,
DxSeries,
DxMargin
},
data() {
return {
types,
dataSource,
currentType: types[0]
};
}
};
</script>
<style>
#chart-demo {
height: 600px;
}
#radarChart {
height: 500px;
}
#chart-demo > .center {
text-align: center;
}
#chart-demo > .center > div,
#chart-demo > .center > .dx-widget {
display: inline-block;
vertical-align: middle;
}
.long-title h3 {
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
</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.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/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 types = ['scatter', 'line', 'area', 'bar', 'stackedbar'];
export const dataSource = [{
arg: 'January',
day: 6,
night: 2
}, {
arg: 'February',
day: 7,
night: 2
}, {
arg: 'March',
day: 10,
night: 3
}, {
arg: 'April',
day: 14,
night: 5
}, {
arg: 'May',
day: 18,
night: 8
}, {
arg: 'June',
day: 21,
night: 11
}, {
arg: 'July',
day: 22,
night: 13
}, {
arg: 'August',
day: 22,
night: 13
}, {
arg: 'September',
day: 19,
night: 11
}, {
arg: 'October',
day: 15,
night: 8
}, {
arg: 'November',
day: 10,
night: 5
}, {
arg: 'December',
day: 7,
night: 3
}];
System.config({
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
'devextreme/localization.js': {
"esModule": true
},
},
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.5',
'devextreme-vue': 'npm:devextreme-vue@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/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/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
}
});