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