Variable Number of Bars

Documentation

This demo shows how to use the API of the BarGauge to change the number of indicated values at runtime. For this purpose, an array of new values is passed as the parameter of the value method.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Copy to CodeSandBox

Apply

Reset

<template> <div> <div class="long-title"> <h3>Sampling by Goods</h3> </div> <div id="gauge-demo"> <DxBarGauge id="gauge" ref="gauge" :start-value="0" :end-value="50" :values="values" > <DxLabel :format="format" /> </DxBarGauge> <div id="panel"> <DxCheckBox v-for="p in products" :data="p" :key="p.name" :value.sync="p.active" :text="p.name" /> </div> </div> </div> </template> <script> import { products } from './data.js'; import { DxBarGauge, DxLabel } from 'devextreme-vue/bar-gauge'; import { DxCheckBox } from 'devextreme-vue/check-box'; export default { components: { DxBarGauge, DxLabel, DxCheckBox }, data() { return { products: products, format: { type: 'fixedPoint', precision: 0 } }; }, computed: { values: function() { return products.filter(p=>p.active).map(p=>p.count); } }, }; </script> <style scoped> #gauge-demo { height: 440px; width: 100%; } #gauge { width: 80%; height: 100%; margin-top: 20px; float: left; } #panel { width: 150px; text-align: left; margin-top: 20px; float: left; } .dx-checkbox { margin-bottom: 10px; display: block; } .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; } </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/20.1.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/20.1.7/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 products = [{ name: 'Hummers', count: 41, active: true }, { name: 'Shovers', count: 32, active: true }, { name: 'Ladders', count: 13, active: true }, { name: 'Watering cans', count: 48, active: true }, { name: 'Screwdrivers', count: 24, active: true }, { name: 'Nail pullers', count: 8, active: true }, { name: 'Drills', count: 19, active: true }];

System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, 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@20.1', 'devextreme-vue': 'npm:devextreme-vue@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.14', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true } });