<!DOCTYPE html> <html class="zc-html"> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style> html, body, #myChart { background-color: white; height: 100%; width: 100%; } button { cursor: pointer; display: block; margin: 0 auto; } button:disabled { cursor: not-allowed; } .chart--container { min-height: 530px; width: 100%; height: 100%; } .zc-ref { display: none; } </style> </head> <body> <button>Start Animation</button> <!-- CHART CONTAINER --> <div id="myChart"></div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; const GOAL = 500; let myConfig = { type: "gauge", title: { text: "Actual Sales vs Target", fontWeight: 400 }, plotarea: { marginTop: '80px', }, plot: { size: '100%', valueBox: { placement: 'center', text: 'Actual Sales vs Target<br>$%vk', fontSize: 24, offsetY: 50, fontWeight: 400, color: "#0F1418" } }, scaleR: { aperture: 180, ring: { size: 75, "rules": [{ "rule": `%v == 0`, "background-color": "#FFA300" }] }, values: `0:${GOAL}:1`, center: { size: 10, 'background-color': "#011CFF", 'border-color': "none" }, labels: ['$0', ...new Array(GOAL - 2).fill(''), `$${GOAL}k`], item: { 'font-color': "#0F1418", 'font-size': 24, 'font-weight': "400", 'offset-r': -65, 'offset-y': 20, //To adjust the placement of your scale labels. }, tick: { visible: false } }, series: [{ values: [0], csize: "10%", size: "90%", "indicator": [10, 0, 0, 0, 0], backgroundColor: "#011CFF", animation: { effect: 'ANIMATION_EXPAND_VERTICAL', method: 'ANIMATION_REGULAR_EASE_OUT', speed: 2500, } }, ] }; zingchart.render({ id: 'myChart', data: myConfig, height: "100%", width: "100%" }); // Function to update the gauge value and background function updateGauge(value) { zingchart.exec('myChart', 'setseriesvalues', { plotindex: 0, values: [value], update: false }); zingchart.exec('myChart', 'modify', { data: { scaleR: { ring: { "rules": [{ "rule": `%v >= 0 && %v < ${value}`, "background-color": value === GOAL ? "#31c458" : "#FFA300" }] } } } }); } let button = document.querySelector('button'); button.addEventListener('click', () => { button.setAttribute('disabled', 'disabled'); // Animate the gauge to a specific value let values = { current: 0, target: GOAL }; const interval = setInterval(() => { values.current += 5; if (values.current <= values.target) updateGauge(values.current); else clearInterval(interval); }, 5); // Update every 5ms }); </script> </body> </html>
<!DOCTYPE html> <html class="zc-html"> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <button>Start Animation</button> <!-- CHART CONTAINER --> <div id="myChart"></div> </body> </html>
html, body, #myChart { background-color: white; height: 100%; width: 100%; } button { cursor: pointer; display: block; margin: 0 auto; } button:disabled { cursor: not-allowed; } .chart--container { min-height: 530px; width: 100%; height: 100%; } .zc-ref { display: none; }
const GOAL = 500; let myConfig = { type: "gauge", title: { text: "Actual Sales vs Target", fontWeight: 400 }, plotarea: { marginTop: '80px', }, plot: { size: '100%', valueBox: { placement: 'center', text: 'Actual Sales vs Target<br>$%vk', fontSize: 24, offsetY: 50, fontWeight: 400, color: "#0F1418" } }, scaleR: { aperture: 180, ring: { size: 75, "rules": [{ "rule": `%v == 0`, "background-color": "#FFA300" }] }, values: `0:${GOAL}:1`, center: { size: 10, 'background-color': "#011CFF", 'border-color': "none" }, labels: ['$0', ...new Array(GOAL - 2).fill(''), `$${GOAL}k`], item: { 'font-color': "#0F1418", 'font-size': 24, 'font-weight': "400", 'offset-r': -65, 'offset-y': 20, //To adjust the placement of your scale labels. }, tick: { visible: false } }, series: [{ values: [0], csize: "10%", size: "90%", "indicator": [10, 0, 0, 0, 0], backgroundColor: "#011CFF", animation: { effect: 'ANIMATION_EXPAND_VERTICAL', method: 'ANIMATION_REGULAR_EASE_OUT', speed: 2500, } }, ] }; zingchart.render({ id: 'myChart', data: myConfig, height: "100%", width: "100%" }); // Function to update the gauge value and background function updateGauge(value) { zingchart.exec('myChart', 'setseriesvalues', { plotindex: 0, values: [value], update: false }); zingchart.exec('myChart', 'modify', { data: { scaleR: { ring: { "rules": [{ "rule": `%v >= 0 && %v < ${value}`, "background-color": value === GOAL ? "#31c458" : "#FFA300" }] } } } }); } let button = document.querySelector('button'); button.addEventListener('click', () => { button.setAttribute('disabled', 'disabled'); // Animate the gauge to a specific value let values = { current: 0, target: GOAL }; const interval = setInterval(() => { values.current += 5; if (values.current <= values.target) updateGauge(values.current); else clearInterval(interval); }, 5); // Update every 5ms });