Gauge Chart - Rating (Animated)

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