• 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>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig12 = {
    24.       "graphset": [{
    25.           "type": "gauge",
    26.           "height": "100%",
    27.           "width": "30%",
    28.           "x": "0%",
    29.           "y": "0%",
    30.           "scale": {
    31.             "size-factor": "30%" //Modify your gauge chart size.
    32.           },
    33.           "scale-r": {
    34.             "aperture": 200,
    35.             "values": "0:100:20",
    36.             "center": {
    37.               "size": 5,
    38.               "background-color": "#66CCFF #FFCCFF",
    39.               "border-color": "none"
    40.             },
    41.             "ring": {
    42.               "size": 10,
    43.               "rules": [{
    44.                   "rule": "%v >= 0 && %v <= 20",
    45.                   "background-color": "red"
    46.                 },
    47.                 {
    48.                   "rule": "%v >= 20 && %v <= 40",
    49.                   "background-color": "orange"
    50.                 },
    51.                 {
    52.                   "rule": "%v >= 40 && %v <= 60",
    53.                   "background-color": "yellow"
    54.                 },
    55.                 {
    56.                   "rule": "%v >= 60 && %v <= 80",
    57.                   "background-color": "green"
    58.                 },
    59.                 {
    60.                   "rule": "%v >= 80 && %v <=100",
    61.                   "background-color": "blue"
    62.                 }
    63.               ]
    64.             },
    65.             "item": {
    66.               "offset-r": 0
    67.             },
    68.             "guide": {
    69.               "background-color": "#66CCFF #FFCCFF",
    70.               "alpha": 0.2
    71.             }
    72.           },
    73.           "plot": {
    74.             "csize": "5%",
    75.             "size": "100%",
    76.             "background-color": "#000000"
    77.           },
    78.           "series": [{
    79.             "values": [87]
    80.           }]
    81.         },
    82.         {
    83.           "type": "gauge",
    84.           "height": "100%",
    85.           "width": "70%",
    86.           "x": "30%",
    87.           "y": "0%",
    88.           "scale": {
    89.             "size-factor": "101%" //Modify your gauge chart size.
    90.           },
    91.           "scale-r": {
    92.             "aperture": 200,
    93.             "values": "0:100:20",
    94.             "center": {
    95.               "size": 5,
    96.               "background-color": "#66CCFF #FFCCFF",
    97.               "border-color": "none"
    98.             },
    99.             "ring": {
    100.               "size": 10,
    101.               "rules": [{
    102.                   "rule": "%v >= 0 && %v <= 20",
    103.                   "background-color": "red"
    104.                 },
    105.                 {
    106.                   "rule": "%v >= 20 && %v <= 40",
    107.                   "background-color": "orange"
    108.                 },
    109.                 {
    110.                   "rule": "%v >= 40 && %v <= 60",
    111.                   "background-color": "yellow"
    112.                 },
    113.                 {
    114.                   "rule": "%v >= 60 && %v <= 80",
    115.                   "background-color": "green"
    116.                 },
    117.                 {
    118.                   "rule": "%v >= 80 && %v <=100",
    119.                   "background-color": "blue"
    120.                 }
    121.               ]
    122.             },
    123.             "guide": {
    124.               "background-color": "#66CCFF #FFCCFF",
    125.               "alpha": 0.2
    126.             }
    127.           },
    128.           "plot": {
    129.             "csize": "5%",
    130.             "size": "100%",
    131.             "background-color": "#000000"
    132.           },
    133.           "series": [{
    134.             "values": [87]
    135.           }]
    136.         }
    137.       ]
    138.     };
    139.  
    140.     zingchart.render({
    141.       id: 'myChart',
    142.       data: myConfig12,
    143.       height: "100%",
    144.       width: "100%"
    145.     });
    146.   </script>
    147. </body>
    148.  
    149. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig12 = {
    2.   "graphset": [{
    3.       "type": "gauge",
    4.       "height": "100%",
    5.       "width": "30%",
    6.       "x": "0%",
    7.       "y": "0%",
    8.       "scale": {
    9.         "size-factor": "30%" //Modify your gauge chart size.
    10.       },
    11.       "scale-r": {
    12.         "aperture": 200,
    13.         "values": "0:100:20",
    14.         "center": {
    15.           "size": 5,
    16.           "background-color": "#66CCFF #FFCCFF",
    17.           "border-color": "none"
    18.         },
    19.         "ring": {
    20.           "size": 10,
    21.           "rules": [{
    22.               "rule": "%v >= 0 && %v <= 20",
    23.               "background-color": "red"
    24.             },
    25.             {
    26.               "rule": "%v >= 20 && %v <= 40",
    27.               "background-color": "orange"
    28.             },
    29.             {
    30.               "rule": "%v >= 40 && %v <= 60",
    31.               "background-color": "yellow"
    32.             },
    33.             {
    34.               "rule": "%v >= 60 && %v <= 80",
    35.               "background-color": "green"
    36.             },
    37.             {
    38.               "rule": "%v >= 80 && %v <=100",
    39.               "background-color": "blue"
    40.             }
    41.           ]
    42.         },
    43.         "item": {
    44.           "offset-r": 0
    45.         },
    46.         "guide": {
    47.           "background-color": "#66CCFF #FFCCFF",
    48.           "alpha": 0.2
    49.         }
    50.       },
    51.       "plot": {
    52.         "csize": "5%",
    53.         "size": "100%",
    54.         "background-color": "#000000"
    55.       },
    56.       "series": [{
    57.         "values": [87]
    58.       }]
    59.     },
    60.     {
    61.       "type": "gauge",
    62.       "height": "100%",
    63.       "width": "70%",
    64.       "x": "30%",
    65.       "y": "0%",
    66.       "scale": {
    67.         "size-factor": "101%" //Modify your gauge chart size.
    68.       },
    69.       "scale-r": {
    70.         "aperture": 200,
    71.         "values": "0:100:20",
    72.         "center": {
    73.           "size": 5,
    74.           "background-color": "#66CCFF #FFCCFF",
    75.           "border-color": "none"
    76.         },
    77.         "ring": {
    78.           "size": 10,
    79.           "rules": [{
    80.               "rule": "%v >= 0 && %v <= 20",
    81.               "background-color": "red"
    82.             },
    83.             {
    84.               "rule": "%v >= 20 && %v <= 40",
    85.               "background-color": "orange"
    86.             },
    87.             {
    88.               "rule": "%v >= 40 && %v <= 60",
    89.               "background-color": "yellow"
    90.             },
    91.             {
    92.               "rule": "%v >= 60 && %v <= 80",
    93.               "background-color": "green"
    94.             },
    95.             {
    96.               "rule": "%v >= 80 && %v <=100",
    97.               "background-color": "blue"
    98.             }
    99.           ]
    100.         },
    101.         "guide": {
    102.           "background-color": "#66CCFF #FFCCFF",
    103.           "alpha": 0.2
    104.         }
    105.       },
    106.       "plot": {
    107.         "csize": "5%",
    108.         "size": "100%",
    109.         "background-color": "#000000"
    110.       },
    111.       "series": [{
    112.         "values": [87]
    113.       }]
    114.     }
    115.   ]
    116. };
    117.  
    118. zingchart.render({
    119.   id: 'myChart',
    120.   data: myConfig12,
    121.   height: "100%",
    122.   width: "100%"
    123. });