• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script 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%'
    });