<!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, #my-chart { background-color: white; font-family: sans-serif; height: 100%; width: 100%; } button { cursor: pointer; } user-input { align-items: center; column-gap: 10px; display: flex; justify-content: center; margin: 0 auto; } .chart--container { min-height: 530px; width: 100%; height: 100%; } .zc-ref { display: none; } #reset { display: block; margin: 10px auto 0; } </style> </head> <body> <user-input> <button id="thumbs-down">👎 (<span class="count">0</span>)</button> or <button id="thumbs-up">👍 (<span class="count">0</span>)</button> </user-input> <button id="reset">Reset</button> <div id="my-chart"></div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; const GOAL = 100; let myConfig = { type: 'gauge', title: { text: 'Sentiment Analysis', fontWeight: 400 }, plotarea: { marginTop: '80px', }, plot: { csize: '14%', size: '100%', valueBox: { placement: 'center', text: 'Neutral<br>(%0)', fontSize: 24, offsetY: 110, fontWeight: 400, color: '#0F1418' } }, scaleR: { aperture: 270, ring: { size: 55, 'rules': [{ 'rule': `%v >= ${-1 * GOAL} && %v < 0`, 'background-color': '#cdcdcd' }, { 'rule': `%v >= 0 && %v < ${GOAL}`, 'background-color': '#009b25' }] }, values: `${-1 * GOAL}:${GOAL}:1`, center: { size: 10, 'background-color': 'black', 'border-color': 'none' }, labels: ['-100%', ...new Array(199).fill(''), `100%`], item: { 'font-color': 'black', 'font-size': 24, 'font-weight': '400', 'offset-r': -120, 'offset-y': 60, //To adjust the placement of your scale labels. }, tick: { visible: false } }, series: [{ values: [0], csize: '10%', size: '100%', 'indicator': [10, 0, 0, 0, 0], backgroundColor: 'black', animation: { effect: 'ANIMATION_EXPAND_VERTICAL', method: 'ANIMATION_REGULAR_EASE_OUT', speed: 2500, } }, ] }; zingchart.render({ id: 'my-chart', data: myConfig, height: '100%', width: '100%' }); // Function to update the gauge value and background function updateGauge(value) { zingchart.exec('my-chart', 'setseriesvalues', { plotindex: 0, values: [value], update: false }); zingchart.exec('my-chart', 'modify', { data: { scaleR: { ring: { 'rules': [{ 'rule': `%v >= 0 && %v <= ${value}`, 'background-color': value == GOAL ? '#1bd161' : '#FFA300' }] } }, plot: value == GOAL ? { valueBox: { text: 'Goal Achieved! $%vk' } } : {}, }, }); } let thumbsUp = document.querySelector('#thumbs-up'); let thumbsUpCount = thumbsUp.querySelector('.count'); let thumbsDown = document.querySelector('#thumbs-down'); let thumbsDownCount = thumbsDown.querySelector('.count'); [thumbsUp, thumbsDown].forEach((btn) => { btn.addEventListener('click', () => { let count = btn.id === 'thumbs-up' ? thumbsUpCount : thumbsDownCount; count.innerHTML = `${Number(count.innerHTML) + 1}`; let numThumbsUp = Number(thumbsUpCount.innerHTML); let numThumbsDown = Number(thumbsDownCount.innerHTML); let value = 100 * ((numThumbsUp - numThumbsDown) / (numThumbsUp + numThumbsDown)); value = Math.round(value); let sentimentText = 'Neutral'; if (value >= 20) sentimentText = 'Slight Favor'; if (value >= 50) sentimentText = 'Favor'; if (value >= 80) sentimentText = 'Strong Favor'; if (value <= -20) sentimentText = 'Slight Disapproval'; if (value <= -50) sentimentText = 'Disapproval'; if (value <= -80) sentimentText = 'Strong Disapproval'; zingchart.exec('my-chart', 'setseriesvalues', { plotindex: 0, values: [value], update: false }); zingchart.exec('my-chart', 'modify', { data: { plot: { valueBox: { text: `${sentimentText}<br>(%${value})` } } } }); }); }); let resetBtn = document.querySelector('#reset'); resetBtn.addEventListener('click', (e) => { thumbsUpCount.innerHTML = '0'; thumbsDownCount.innerHTML = '0'; zingchart.exec('my-chart', 'setseriesvalues', { plotindex: 0, values: [0], update: false }); zingchart.exec('my-chart', 'modify', { data: { plot: { valueBox: { text: 'Neutral<br>(%0)' } } } }); }); </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> <user-input> <button id="thumbs-down">👎 (<span class="count">0</span>)</button> or <button id="thumbs-up">👍 (<span class="count">0</span>)</button> </user-input> <button id="reset">Reset</button> <div id="my-chart"></div> </body> </html>
html, body, #my-chart { background-color: white; font-family: sans-serif; height: 100%; width: 100%; } button { cursor: pointer; } user-input { align-items: center; column-gap: 10px; display: flex; justify-content: center; margin: 0 auto; } .chart--container { min-height: 530px; width: 100%; height: 100%; } .zc-ref { display: none; } #reset { display: block; margin: 10px auto 0; }
const GOAL = 100; let myConfig = { type: 'gauge', title: { text: 'Sentiment Analysis', fontWeight: 400 }, plotarea: { marginTop: '80px', }, plot: { csize: '14%', size: '100%', valueBox: { placement: 'center', text: 'Neutral<br>(%0)', fontSize: 24, offsetY: 110, fontWeight: 400, color: '#0F1418' } }, scaleR: { aperture: 270, ring: { size: 55, 'rules': [{ 'rule': `%v >= ${-1 * GOAL} && %v < 0`, 'background-color': '#cdcdcd' }, { 'rule': `%v >= 0 && %v < ${GOAL}`, 'background-color': '#009b25' }] }, values: `${-1 * GOAL}:${GOAL}:1`, center: { size: 10, 'background-color': 'black', 'border-color': 'none' }, labels: ['-100%', ...new Array(199).fill(''), `100%`], item: { 'font-color': 'black', 'font-size': 24, 'font-weight': '400', 'offset-r': -120, 'offset-y': 60, //To adjust the placement of your scale labels. }, tick: { visible: false } }, series: [{ values: [0], csize: '10%', size: '100%', 'indicator': [10, 0, 0, 0, 0], backgroundColor: 'black', animation: { effect: 'ANIMATION_EXPAND_VERTICAL', method: 'ANIMATION_REGULAR_EASE_OUT', speed: 2500, } }, ] }; zingchart.render({ id: 'my-chart', data: myConfig, height: '100%', width: '100%' }); // Function to update the gauge value and background function updateGauge(value) { zingchart.exec('my-chart', 'setseriesvalues', { plotindex: 0, values: [value], update: false }); zingchart.exec('my-chart', 'modify', { data: { scaleR: { ring: { 'rules': [{ 'rule': `%v >= 0 && %v <= ${value}`, 'background-color': value == GOAL ? '#1bd161' : '#FFA300' }] } }, plot: value == GOAL ? { valueBox: { text: 'Goal Achieved! $%vk' } } : {}, }, }); } let thumbsUp = document.querySelector('#thumbs-up'); let thumbsUpCount = thumbsUp.querySelector('.count'); let thumbsDown = document.querySelector('#thumbs-down'); let thumbsDownCount = thumbsDown.querySelector('.count'); [thumbsUp, thumbsDown].forEach((btn) => { btn.addEventListener('click', () => { let count = btn.id === 'thumbs-up' ? thumbsUpCount : thumbsDownCount; count.innerHTML = `${Number(count.innerHTML) + 1}`; let numThumbsUp = Number(thumbsUpCount.innerHTML); let numThumbsDown = Number(thumbsDownCount.innerHTML); let value = 100 * ((numThumbsUp - numThumbsDown) / (numThumbsUp + numThumbsDown)); value = Math.round(value); let sentimentText = 'Neutral'; if (value >= 20) sentimentText = 'Slight Favor'; if (value >= 50) sentimentText = 'Favor'; if (value >= 80) sentimentText = 'Strong Favor'; if (value <= -20) sentimentText = 'Slight Disapproval'; if (value <= -50) sentimentText = 'Disapproval'; if (value <= -80) sentimentText = 'Strong Disapproval'; zingchart.exec('my-chart', 'setseriesvalues', { plotindex: 0, values: [value], update: false }); zingchart.exec('my-chart', 'modify', { data: { plot: { valueBox: { text: `${sentimentText}<br>(%${value})` } } } }); }); }); let resetBtn = document.querySelector('#reset'); resetBtn.addEventListener('click', (e) => { thumbsUpCount.innerHTML = '0'; thumbsDownCount.innerHTML = '0'; zingchart.exec('my-chart', 'setseriesvalues', { plotindex: 0, values: [0], update: false }); zingchart.exec('my-chart', 'modify', { data: { plot: { valueBox: { text: 'Neutral<br>(%0)' } } } }); });