<!DOCTYPE html> <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; 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> <div id="myChart" class="chart--container"> <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; window.addEventListener('load', () => { let chartConfig = { type: "gauge", plot: { size: '100%', }, plotarea: { marginTop: '80px', }, scaleR2: { aperture: 180, minValue: 0, maxValue: 100, step: 10, center: { visible: false, center: { //Pivot Point } }, tick: { visible: false }, maxLabels: 9999, labels: ["", "VERY POOR", "", "POOR", "", "FAIR", "", "GOOD", "", "EXCELLENT", ""], item: { fontColor: "#0F1418", fontSize: 16, placement: "center", fontWeight: "600", fontStyle: "normal", offsetR: 0, _offsetY: -15, angle: "auto" //To adjust the angle of your scale labels. }, ring: { size: 1, borderWidth: 5, borderColor: "#FFFFFF", } }, scaleR: { aperture: 180, minValue: 0, maxValue: 100, step: 20, center: { size: 8, borderColor: "black" }, tick: { visible: false }, item: { "visible": false, }, ring: { size: 150, borderWidth: 5, borderColor: "#FFFFFF", "rules": [{ "rule": "%v >= 0 && %v < 20", "background-color": "#CF2020", "size": "260" }, { "rule": "%v >= 20 && %v < 40", "background-color": "#fbbb9d" }, { "rule": "%v >= 40 && %v < 60", "background-color": "#ffdf8f", }, { "rule": "%v >= 60 && %v < 80", "background-color": "#e9f099" }, { "rule": "%v >= 80 && %v <= 100", "background-color": "#9edca2" }, ] } }, "series": [{ "values": [0], csize: "13%", size: "90%", 'background-color': "#000000", //Needle Color }], }; let defaultSize = "225"; let selectSize = "260"; function updateRingSize(val) { zingchart.exec('myChart', 'setseriesvalues', { plotindex: 0, values: [val], update: false }); zingchart.exec('myChart', 'modify', { data: { scaleR: { ring: { "rules": [{ "rule": "%v >= 0 && %v < 20", "background-color": val >= 0 && val < 20 ? "#CF2020" : "#ec8383", "size": val >= 0 && val < 20 ? selectSize : defaultSize }, { "rule": "%v >= 20 && %v < 40", "background-color": val >= 20 && val < 40 ? "#F76420" : "#fbbb9d", "size": val >= 20 && val < 40 ? selectSize : defaultSize }, { "rule": "%v >= 40 && %v < 60", "background-color": val >= 40 && val < 60 ? "#FFBB10" : "#ffdf8f", "size": val >= 40 && val < 60 ? selectSize : defaultSize }, { "rule": "%v >= 60 && %v < 80", "background-color": val >= 60 && val < 80 ? "#CFDF28" : "#e9f099", "size": val >= 60 && val < 80 ? selectSize : defaultSize }, { "rule": "%v >= 80 && %v <= 100", "background-color": val >= 80 && val <= 100 ? "#42B74A" : "#9edca2", "size": val >= 80 && val <= 100 ? selectSize : defaultSize }, ] } } } }); } zingchart.render({ id: 'myChart', data: chartConfig, height: "100%", width: "100%" }); let button = document.querySelector('button'); button.addEventListener('click', () => { button.setAttribute('disabled', 'disabled'); let ringSize = 0; setInterval(() => { if (ringSize >= 100) ringSize = 0; updateRingSize(ringSize); ringSize += 1; }, 40); }); }); </script> </body> </html>
<!DOCTYPE html> <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> <div id="myChart" class="chart--container"> <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a> </div> </body> </html>
html, body, #myChart { background-color: white; 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; }
window.addEventListener('load', () => { let chartConfig = { type: "gauge", plot: { size: '100%', }, plotarea: { marginTop: '80px', }, scaleR2: { aperture: 180, minValue: 0, maxValue: 100, step: 10, center: { visible: false, center: { //Pivot Point } }, tick: { visible: false }, maxLabels: 9999, labels: ["", "VERY POOR", "", "POOR", "", "FAIR", "", "GOOD", "", "EXCELLENT", ""], item: { fontColor: "#0F1418", fontSize: 16, placement: "center", fontWeight: "600", fontStyle: "normal", offsetR: 0, _offsetY: -15, angle: "auto" //To adjust the angle of your scale labels. }, ring: { size: 1, borderWidth: 5, borderColor: "#FFFFFF", } }, scaleR: { aperture: 180, minValue: 0, maxValue: 100, step: 20, center: { size: 8, borderColor: "black" }, tick: { visible: false }, item: { "visible": false, }, ring: { size: 150, borderWidth: 5, borderColor: "#FFFFFF", "rules": [{ "rule": "%v >= 0 && %v < 20", "background-color": "#CF2020", "size": "260" }, { "rule": "%v >= 20 && %v < 40", "background-color": "#fbbb9d" }, { "rule": "%v >= 40 && %v < 60", "background-color": "#ffdf8f", }, { "rule": "%v >= 60 && %v < 80", "background-color": "#e9f099" }, { "rule": "%v >= 80 && %v <= 100", "background-color": "#9edca2" }, ] } }, "series": [{ "values": [0], csize: "13%", size: "90%", 'background-color': "#000000", //Needle Color }], }; let defaultSize = "225"; let selectSize = "260"; function updateRingSize(val) { zingchart.exec('myChart', 'setseriesvalues', { plotindex: 0, values: [val], update: false }); zingchart.exec('myChart', 'modify', { data: { scaleR: { ring: { "rules": [{ "rule": "%v >= 0 && %v < 20", "background-color": val >= 0 && val < 20 ? "#CF2020" : "#ec8383", "size": val >= 0 && val < 20 ? selectSize : defaultSize }, { "rule": "%v >= 20 && %v < 40", "background-color": val >= 20 && val < 40 ? "#F76420" : "#fbbb9d", "size": val >= 20 && val < 40 ? selectSize : defaultSize }, { "rule": "%v >= 40 && %v < 60", "background-color": val >= 40 && val < 60 ? "#FFBB10" : "#ffdf8f", "size": val >= 40 && val < 60 ? selectSize : defaultSize }, { "rule": "%v >= 60 && %v < 80", "background-color": val >= 60 && val < 80 ? "#CFDF28" : "#e9f099", "size": val >= 60 && val < 80 ? selectSize : defaultSize }, { "rule": "%v >= 80 && %v <= 100", "background-color": val >= 80 && val <= 100 ? "#42B74A" : "#9edca2", "size": val >= 80 && val <= 100 ? selectSize : defaultSize }, ] } } } }); } zingchart.render({ id: 'myChart', data: chartConfig, height: "100%", width: "100%" }); let button = document.querySelector('button'); button.addEventListener('click', () => { button.setAttribute('disabled', 'disabled'); let ringSize = 0; setInterval(() => { if (ringSize >= 100) ringSize = 0; updateRingSize(ringSize); ringSize += 1; }, 40); }); });