Vue Gauges - Variable Number of Bars

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.

Backend API

<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 productsRef" :data="p" :key="p.name" v-model:value="p.active" :text="p.name" /> </div> </div> </div> </template> <script setup lang="ts"> import { ref, watch } from 'vue'; import { DxBarGauge, DxLabel } from 'devextreme-vue/bar-gauge'; import { DxCheckBox } from 'devextreme-vue/check-box'; import { products } from './data.ts'; const productsRef = ref(products); const getActiveItems = () => products.filter((p) => p.active).map((p) => p.count); const values = ref(getActiveItems()); const format = { type: 'fixedPoint', precision: 0, }; watch(() => productsRef, () => { values.value = getActiveItems(); }, { deep: true, }); </script> <style> #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>

export const products = [{ name: 'Hammers', count: 41, active: true, }, { name: 'Shovels', 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, }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>