• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </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%' 
    });