<!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></style>
</head>
<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    window.feed = function(callback) {
      var tick = {};
      tick.plot0 = Math.ceil(Math.random() * 200);
      callback(JSON.stringify(tick));
    };
    var myConfig = {
      "type": "gauge",
      "refresh": {
        "type": "feed",
        "transport": "js",
        "url": "feed()",
        "interval": 500,
        "resetTimeout": 1000
      },
      "scaleR": {
        //"aperture":200,
        "values": "0:200:20",
        "center": {
          //Pivot Point 
          "size": 5,
          "background-color": "#66CCFF #FFCCFF",
          "border-color": "none"
        },
        "ring": {
          //Ring with Rules 
          //"size":10,
          "rules": [{
              "rule": "%v >= 0 && %v <= 20",
              "background-color": "red"
            },
            {
              "rule": "%v >= 20 && %v <= 40",
              "background-color": "orange"
            },
            {
              "rule": "%v >= 40 && %v <= 60",
              "background-color": "yellow"
            },
            {
              "rule": "%v >= 60 && %v <= 80",
              "background-color": "blue"
            },
            {
              "rule": "%v >= 80 && %v <=100",
              "background-color": "green"
            }
          ]
        },
        "_labels": [
          20,
          40,
          60,
          80,
          100,
          120,
          140,
          160,
          180,
          200
        ],
        "item": {
          //Scale Label Styling 
          "font-color": "purple",
          "font-family": "Georgia, serif",
          "font-size": 12,
          "font-weight": "bold",
          //or "normal" 
          "font-style": "normal",
          //or "italic" 
          "offset-r": -20,
          "angle": "auto"
        },
        "guide": {
          //Specify your gauge chart's background color(s). 
          "background-color": "#66CCFF #FFCCFF",
          "alpha": 0.2
        },
        "tick": {
          "line-color": "#66CCFF",
          "line-style": "solid",
          //solid,dashed,or dotted 
          "line-width": 3,
          "size": 15,
          "placement": "inner"
          //outer,inner,or cross
        },
        "minor-ticks": 4,
        //Specify the NUMBER of minor tick marks. 
        "minor-tick": {
          //And then STYLE your minor tick markers. 
          "line-color": "#FFFFFF",
          "line-style": "solid",
          //solid,dashed,or dotted 
          "line-width": 2,
          "size": 10,
          "placement": "inner"
          //outer,inner,or cross
        }
      },
      "plot": {
        "csize": "5%",
        "size": "100%",
        "background-color": "#000000",
        "animation": {
          //Animation object 
          "effect": 2,
          "method": 0,
          "sequence": 4 //"speed":500
        },
        "value-box": {
          "height": 15,
          "width": 75,
          "text": "%v",
          "placement": "center",
          "font-color": 'black',
          "font-size": 80,
          "shadow": 0,
          "offsetX": -2,
          "offsetY": 25
        }
      },
      "series": [{
        "values": [
          0
        ]
      }]
    };
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });
  </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>
  <div id='myChart'></div>
</body>
</html>
       
      
        window.feed = function(callback) {
  var tick = {};
  tick.plot0 = Math.ceil(Math.random() * 200);
  callback(JSON.stringify(tick));
};
var myConfig = {
  "type": "gauge",
  "refresh": {
    "type": "feed",
    "transport": "js",
    "url": "feed()",
    "interval": 500,
    "resetTimeout": 1000
  },
  "scaleR": {
    //"aperture":200,
    "values": "0:200:20",
    "center": {
      //Pivot Point 
      "size": 5,
      "background-color": "#66CCFF #FFCCFF",
      "border-color": "none"
    },
    "ring": {
      //Ring with Rules 
      //"size":10,
      "rules": [{
          "rule": "%v >= 0 && %v <= 20",
          "background-color": "red"
        },
        {
          "rule": "%v >= 20 && %v <= 40",
          "background-color": "orange"
        },
        {
          "rule": "%v >= 40 && %v <= 60",
          "background-color": "yellow"
        },
        {
          "rule": "%v >= 60 && %v <= 80",
          "background-color": "blue"
        },
        {
          "rule": "%v >= 80 && %v <=100",
          "background-color": "green"
        }
      ]
    },
    "_labels": [
      20,
      40,
      60,
      80,
      100,
      120,
      140,
      160,
      180,
      200
    ],
    "item": {
      //Scale Label Styling 
      "font-color": "purple",
      "font-family": "Georgia, serif",
      "font-size": 12,
      "font-weight": "bold",
      //or "normal" 
      "font-style": "normal",
      //or "italic" 
      "offset-r": -20,
      "angle": "auto"
    },
    "guide": {
      //Specify your gauge chart's background color(s). 
      "background-color": "#66CCFF #FFCCFF",
      "alpha": 0.2
    },
    "tick": {
      "line-color": "#66CCFF",
      "line-style": "solid",
      //solid,dashed,or dotted 
      "line-width": 3,
      "size": 15,
      "placement": "inner"
      //outer,inner,or cross
    },
    "minor-ticks": 4,
    //Specify the NUMBER of minor tick marks. 
    "minor-tick": {
      //And then STYLE your minor tick markers. 
      "line-color": "#FFFFFF",
      "line-style": "solid",
      //solid,dashed,or dotted 
      "line-width": 2,
      "size": 10,
      "placement": "inner"
      //outer,inner,or cross
    }
  },
  "plot": {
    "csize": "5%",
    "size": "100%",
    "background-color": "#000000",
    "animation": {
      //Animation object 
      "effect": 2,
      "method": 0,
      "sequence": 4 //"speed":500
    },
    "value-box": {
      "height": 15,
      "width": 75,
      "text": "%v",
      "placement": "center",
      "font-color": 'black',
      "font-size": 80,
      "shadow": 0,
      "offsetX": -2,
      "offsetY": 25
    }
  },
  "series": [{
    "values": [
      0
    ]
  }]
};
zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: '100%'
});