• 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,
        #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);
      });
    });