Gauge Chart - Sentiment Meter

<!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)'
        }
      }
    }
  });
});