Your search did not match any results.
Range Selector

Customized Chart on Background

Documentation

This demo illustrates the ability of the RangeSelector to show the Chart with customized settings.

Copy to CodeSandBox
Apply
Reset
<template> <dx-range-selector id="range-selector" :data-source="dataSource" v-model="range" title="Select a Range in the CPU Usage History" > <dx-margin :left="15" :right="15" :top="50" /> <dx-scale :minor-tick-interval="0.5" :tick-interval="1" > <dx-label :customize-text="customizeText"/> </dx-scale> <dx-slider-marker :visible="false"/> <dx-background color="#808080"/> <dx-chart :top-indent="0.05" :bottom-indent="0.05" > <dx-series :width="3" color="#ffa500" type="line" argument-field="x" value-field="y" /> </dx-chart> </dx-range-selector> </template> <script> import { dataSource } from './data.js'; import { DxRangeSelector, DxMargin, DxScale, DxLabel, DxSliderMarker, DxBackground, DxChart, DxSeries } from 'devextreme-vue/range-selector'; export default { components: { DxRangeSelector, DxMargin, DxScale, DxLabel, DxSliderMarker, DxBackground, DxChart, DxSeries }, data() { return { dataSource, range: [0, 5] }; }, methods: { customizeText({ valueText }) { return `${valueText} s`; } } }; </script> <style scoped> #range-selector { height: 270px; } </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="dx-theme" data-theme="generic.light" 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 dataSource = [ { x: 0, y: 15 }, { x: 1, y: -1 }, { x: 2, y: 10 }, { x: 3, y: -3 }, { x: 4, y: 16 }, { x: 5, y: 0 }, { x: 6, y: 9 }, { x: 7, y: 3 }, { x: 8, y: 15 }, { x: 9, y: -1 }, { x: 10, y: 10 }, { x: 11, y: -3 }, { x: 12, y: 16 }, { x: 13, y: 0 }, { x: 14, y: 9 }, { x: 15, y: 3 }, { x: 16, y: 13 } ];
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 } });