• Edit
  • Download
  • <!DOCTYPE html>
    <html class="zc-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;
          height: 100%;
          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>
      <!-- CHART CONTAINER -->
      <div id="myChart"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        const GOAL = 500;
        let myConfig = {
          type: "gauge",
          title: {
            text: "Actual Sales vs Target",
            fontWeight: 400
          },
          plotarea: {
            marginTop: '80px',
          },
          plot: {
            size: '100%',
            valueBox: {
              placement: 'center',
              text: 'Actual Sales vs Target<br>$%vk',
              fontSize: 24,
              offsetY: 50,
              fontWeight: 400,
              color: "#0F1418"
            }
          },
          scaleR: {
            aperture: 180,
            ring: {
              size: 75,
              "rules": [{
                "rule": `%v == 0`,
                "background-color": "#FFA300"
              }]
            },
            values: `0:${GOAL}:1`,
            center: {
              size: 10,
              'background-color': "#011CFF",
              'border-color': "none"
            },
            labels: ['$0', ...new Array(GOAL - 2).fill(''), `$${GOAL}k`],
            item: {
              'font-color': "#0F1418",
              'font-size': 24,
              'font-weight': "400",
              'offset-r': -65,
              'offset-y': 20, //To adjust the placement of your scale labels.
            },
            tick: {
              visible: false
            }
          },
          series: [{
            values: [0],
            csize: "10%",
            size: "90%",
            "indicator": [10, 0, 0, 0, 0],
            backgroundColor: "#011CFF",
            animation: {
              effect: 'ANIMATION_EXPAND_VERTICAL',
              method: 'ANIMATION_REGULAR_EASE_OUT',
              speed: 2500,
            }
          }, ]
        };
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: "100%",
          width: "100%"
        });
        // Function to update the gauge value and background
        function updateGauge(value) {
          zingchart.exec('myChart', 'setseriesvalues', {
            plotindex: 0,
            values: [value],
            update: false
          });
          zingchart.exec('myChart', 'modify', {
            data: {
              scaleR: {
                ring: {
                  "rules": [{
                    "rule": `%v >= 0 && %v < ${value}`,
                    "background-color": value === GOAL ? "#31c458" : "#FFA300"
                  }]
                }
              }
            }
          });
        }
        let button = document.querySelector('button');
        button.addEventListener('click', () => {
          button.setAttribute('disabled', 'disabled');
          // Animate the gauge to a specific value
          let values = {
            current: 0,
            target: GOAL
          };
          const interval = setInterval(() => {
            values.current += 5;
            if (values.current <= values.target)
              updateGauge(values.current);
            else
              clearInterval(interval);
          }, 5); // Update every 5ms
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html class="zc-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>
      <!-- CHART CONTAINER -->
      <div id="myChart"></div>
    </body>
    
    </html>
    html,
    body,
    #myChart {
      background-color: white;
      height: 100%;
      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;
    }
    const GOAL = 500;
    let myConfig = {
      type: "gauge",
      title: {
        text: "Actual Sales vs Target",
        fontWeight: 400
      },
      plotarea: {
        marginTop: '80px',
      },
      plot: {
        size: '100%',
        valueBox: {
          placement: 'center',
          text: 'Actual Sales vs Target<br>$%vk',
          fontSize: 24,
          offsetY: 50,
          fontWeight: 400,
          color: "#0F1418"
        }
      },
      scaleR: {
        aperture: 180,
        ring: {
          size: 75,
          "rules": [{
            "rule": `%v == 0`,
            "background-color": "#FFA300"
          }]
        },
        values: `0:${GOAL}:1`,
        center: {
          size: 10,
          'background-color': "#011CFF",
          'border-color': "none"
        },
        labels: ['$0', ...new Array(GOAL - 2).fill(''), `$${GOAL}k`],
        item: {
          'font-color': "#0F1418",
          'font-size': 24,
          'font-weight': "400",
          'offset-r': -65,
          'offset-y': 20, //To adjust the placement of your scale labels.
        },
        tick: {
          visible: false
        }
      },
      series: [{
        values: [0],
        csize: "10%",
        size: "90%",
        "indicator": [10, 0, 0, 0, 0],
        backgroundColor: "#011CFF",
        animation: {
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_REGULAR_EASE_OUT',
          speed: 2500,
        }
      }, ]
    };
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: "100%",
      width: "100%"
    });
    // Function to update the gauge value and background
    function updateGauge(value) {
      zingchart.exec('myChart', 'setseriesvalues', {
        plotindex: 0,
        values: [value],
        update: false
      });
      zingchart.exec('myChart', 'modify', {
        data: {
          scaleR: {
            ring: {
              "rules": [{
                "rule": `%v >= 0 && %v < ${value}`,
                "background-color": value === GOAL ? "#31c458" : "#FFA300"
              }]
            }
          }
        }
      });
    }
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
      button.setAttribute('disabled', 'disabled');
      // Animate the gauge to a specific value
      let values = {
        current: 0,
        target: GOAL
      };
      const interval = setInterval(() => {
        values.current += 5;
        if (values.current <= values.target)
          updateGauge(values.current);
        else
          clearInterval(interval);
      }, 5); // Update every 5ms
    });