• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     window.feed = function(callback) {
    17.       var tick = {};
    18.       tick.plot0 = Math.ceil(Math.random() * 200);
    19.       callback(JSON.stringify(tick));
    20.     };
    21.  
    22.  
    23.     var myConfig = {
    24.       "type": "gauge",
    25.       "refresh": {
    26.         "type": "feed",
    27.         "transport": "js",
    28.         "url": "feed()",
    29.         "interval": 500,
    30.         "resetTimeout": 1000
    31.       },
    32.       "scaleR": {
    33.         //"aperture":200,
    34.         "values": "0:200:20",
    35.         "center": {
    36.           //Pivot Point 
    37.           "size": 5,
    38.           "background-color": "#66CCFF #FFCCFF",
    39.           "border-color": "none"
    40.         },
    41.         "ring": {
    42.           //Ring with Rules 
    43.           //"size":10,
    44.           "rules": [{
    45.               "rule": "%v >= 0 && %v <= 20",
    46.               "background-color": "red"
    47.             },
    48.             {
    49.               "rule": "%v >= 20 && %v <= 40",
    50.               "background-color": "orange"
    51.             },
    52.             {
    53.               "rule": "%v >= 40 && %v <= 60",
    54.               "background-color": "yellow"
    55.             },
    56.             {
    57.               "rule": "%v >= 60 && %v <= 80",
    58.               "background-color": "blue"
    59.             },
    60.             {
    61.               "rule": "%v >= 80 && %v <=100",
    62.               "background-color": "green"
    63.             }
    64.           ]
    65.         },
    66.         "_labels": [
    67.           20,
    68.           40,
    69.           60,
    70.           80,
    71.           100,
    72.           120,
    73.           140,
    74.           160,
    75.           180,
    76.           200
    77.         ],
    78.         "item": {
    79.           //Scale Label Styling 
    80.           "font-color": "purple",
    81.           "font-family": "Georgia, serif",
    82.           "font-size": 12,
    83.           "font-weight": "bold",
    84.           //or "normal" 
    85.           "font-style": "normal",
    86.           //or "italic" 
    87.           "offset-r": -20,
    88.           "angle": "auto"
    89.         },
    90.         "guide": {
    91.           //Specify your gauge chart's background color(s). 
    92.           "background-color": "#66CCFF #FFCCFF",
    93.           "alpha": 0.2
    94.         },
    95.         "tick": {
    96.           "line-color": "#66CCFF",
    97.           "line-style": "solid",
    98.           //solid,dashed,or dotted 
    99.           "line-width": 3,
    100.           "size": 15,
    101.           "placement": "inner"
    102.           //outer,inner,or cross
    103.         },
    104.         "minor-ticks": 4,
    105.         //Specify the NUMBER of minor tick marks. 
    106.         "minor-tick": {
    107.           //And then STYLE your minor tick markers. 
    108.           "line-color": "#FFFFFF",
    109.           "line-style": "solid",
    110.           //solid,dashed,or dotted 
    111.           "line-width": 2,
    112.           "size": 10,
    113.           "placement": "inner"
    114.           //outer,inner,or cross
    115.         }
    116.       },
    117.       "plot": {
    118.         "csize": "5%",
    119.         "size": "100%",
    120.         "background-color": "#000000",
    121.         "animation": {
    122.           //Animation object 
    123.           "effect": 2,
    124.           "method": 0,
    125.           "sequence": 4 //"speed":500
    126.         },
    127.         "value-box": {
    128.           "height": 15,
    129.           "width": 75,
    130.           "text": "%v",
    131.           "placement": "center",
    132.           "font-color": 'black',
    133.           "font-size": 80,
    134.           "shadow": 0,
    135.           "offsetX": -2,
    136.           "offsetY": 25
    137.         }
    138.       },
    139.       "series": [{
    140.         "values": [
    141.           0
    142.         ]
    143.       }]
    144.     };
    145.  
    146.  
    147.  
    148.     zingchart.render({
    149.       id: 'myChart',
    150.       data: myConfig,
    151.       height: 400,
    152.       width: '100%'
    153.     });
    154.   </script>
    155. </body>
    156.  
    157. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. window.feed = function(callback) {
    2.   var tick = {};
    3.   tick.plot0 = Math.ceil(Math.random() * 200);
    4.   callback(JSON.stringify(tick));
    5. };
    6.  
    7.  
    8. var myConfig = {
    9.   "type": "gauge",
    10.   "refresh": {
    11.     "type": "feed",
    12.     "transport": "js",
    13.     "url": "feed()",
    14.     "interval": 500,
    15.     "resetTimeout": 1000
    16.   },
    17.   "scaleR": {
    18.     //"aperture":200,
    19.     "values": "0:200:20",
    20.     "center": {
    21.       //Pivot Point 
    22.       "size": 5,
    23.       "background-color": "#66CCFF #FFCCFF",
    24.       "border-color": "none"
    25.     },
    26.     "ring": {
    27.       //Ring with Rules 
    28.       //"size":10,
    29.       "rules": [{
    30.           "rule": "%v >= 0 && %v <= 20",
    31.           "background-color": "red"
    32.         },
    33.         {
    34.           "rule": "%v >= 20 && %v <= 40",
    35.           "background-color": "orange"
    36.         },
    37.         {
    38.           "rule": "%v >= 40 && %v <= 60",
    39.           "background-color": "yellow"
    40.         },
    41.         {
    42.           "rule": "%v >= 60 && %v <= 80",
    43.           "background-color": "blue"
    44.         },
    45.         {
    46.           "rule": "%v >= 80 && %v <=100",
    47.           "background-color": "green"
    48.         }
    49.       ]
    50.     },
    51.     "_labels": [
    52.       20,
    53.       40,
    54.       60,
    55.       80,
    56.       100,
    57.       120,
    58.       140,
    59.       160,
    60.       180,
    61.       200
    62.     ],
    63.     "item": {
    64.       //Scale Label Styling 
    65.       "font-color": "purple",
    66.       "font-family": "Georgia, serif",
    67.       "font-size": 12,
    68.       "font-weight": "bold",
    69.       //or "normal" 
    70.       "font-style": "normal",
    71.       //or "italic" 
    72.       "offset-r": -20,
    73.       "angle": "auto"
    74.     },
    75.     "guide": {
    76.       //Specify your gauge chart's background color(s). 
    77.       "background-color": "#66CCFF #FFCCFF",
    78.       "alpha": 0.2
    79.     },
    80.     "tick": {
    81.       "line-color": "#66CCFF",
    82.       "line-style": "solid",
    83.       //solid,dashed,or dotted 
    84.       "line-width": 3,
    85.       "size": 15,
    86.       "placement": "inner"
    87.       //outer,inner,or cross
    88.     },
    89.     "minor-ticks": 4,
    90.     //Specify the NUMBER of minor tick marks. 
    91.     "minor-tick": {
    92.       //And then STYLE your minor tick markers. 
    93.       "line-color": "#FFFFFF",
    94.       "line-style": "solid",
    95.       //solid,dashed,or dotted 
    96.       "line-width": 2,
    97.       "size": 10,
    98.       "placement": "inner"
    99.       //outer,inner,or cross
    100.     }
    101.   },
    102.   "plot": {
    103.     "csize": "5%",
    104.     "size": "100%",
    105.     "background-color": "#000000",
    106.     "animation": {
    107.       //Animation object 
    108.       "effect": 2,
    109.       "method": 0,
    110.       "sequence": 4 //"speed":500
    111.     },
    112.     "value-box": {
    113.       "height": 15,
    114.       "width": 75,
    115.       "text": "%v",
    116.       "placement": "center",
    117.       "font-color": 'black',
    118.       "font-size": 80,
    119.       "shadow": 0,
    120.       "offsetX": -2,
    121.       "offsetY": 25
    122.     }
    123.   },
    124.   "series": [{
    125.     "values": [
    126.       0
    127.     ]
    128.   }]
    129. };
    130.  
    131.  
    132.  
    133. zingchart.render({
    134.   id: 'myChart',
    135.   data: myConfig,
    136.   height: 400,
    137.   width: '100%'
    138. });