• 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 myConfig10 = {
    24.       "type": "gauge",
    25.       "scale-r": {
    26.         "aperture": 200,
    27.         "values": "0:100:20",
    28.         "center": {
    29.           "size": 5,
    30.           "background-color": "#66CCFF #FFCCFF",
    31.           "border-color": "none"
    32.         },
    33.         "markers": [ //Scale Markers
    34.           { //Line Marker 1
    35.             "type": "line",
    36.             "range": [5],
    37.             "line-color": "blue",
    38.             "line-width": 3,
    39.             "line-style": "solid",
    40.             "alpha": 1
    41.           },
    42.           { //Line Marker 2
    43.             "type": "line",
    44.             "range": [15],
    45.             "line-color": "purple",
    46.             "line-width": 2,
    47.             "line-style": "dashed",
    48.             "alpha": 1
    49.           },
    50.           { //Line Marker 3
    51.             "type": "line",
    52.             "range": [20],
    53.             "line-color": "red",
    54.             "line-width": 1,
    55.             "line-style": "dotted",
    56.             "alpha": 1
    57.           },
    58.           { //Area Marker 1
    59.             "type": "area",
    60.             "range": [30, 45],
    61.             "offset-start": 0.5,
    62.             "offset-end": 0.1,
    63.             "background-color": "orange",
    64.             "alpha": 0.7
    65.           },
    66.           { //Area Marker 2
    67.             "type": "area",
    68.             "range": [55, 65],
    69.             "offset-start": 0,
    70.             "offset-end": 0,
    71.             "background-color": "yellow",
    72.             "alpha": 0.7
    73.           },
    74.           { //Area Marker 3
    75.             "type": "area",
    76.             "range": [70, 90],
    77.             "offset-start": 0.8,
    78.             "offset-end": 0.1,
    79.             "background-color": "green",
    80.             "alpha": 0.7
    81.           }
    82.         ]
    83.       },
    84.       "plot": {
    85.         "csize": "5%",
    86.         "size": "100%",
    87.         "background-color": "#000000"
    88.       },
    89.       "series": [{
    90.         "values": [87]
    91.       }]
    92.     };
    93.  
    94.     zingchart.render({
    95.       id: 'myChart',
    96.       data: myConfig10,
    97.       height: "100%",
    98.       width: "100%"
    99.     });
    100.   </script>
    101. </body>
    102.  
    103. </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 myConfig10 = {
    2.   "type": "gauge",
    3.   "scale-r": {
    4.     "aperture": 200,
    5.     "values": "0:100:20",
    6.     "center": {
    7.       "size": 5,
    8.       "background-color": "#66CCFF #FFCCFF",
    9.       "border-color": "none"
    10.     },
    11.     "markers": [ //Scale Markers
    12.       { //Line Marker 1
    13.         "type": "line",
    14.         "range": [5],
    15.         "line-color": "blue",
    16.         "line-width": 3,
    17.         "line-style": "solid",
    18.         "alpha": 1
    19.       },
    20.       { //Line Marker 2
    21.         "type": "line",
    22.         "range": [15],
    23.         "line-color": "purple",
    24.         "line-width": 2,
    25.         "line-style": "dashed",
    26.         "alpha": 1
    27.       },
    28.       { //Line Marker 3
    29.         "type": "line",
    30.         "range": [20],
    31.         "line-color": "red",
    32.         "line-width": 1,
    33.         "line-style": "dotted",
    34.         "alpha": 1
    35.       },
    36.       { //Area Marker 1
    37.         "type": "area",
    38.         "range": [30, 45],
    39.         "offset-start": 0.5,
    40.         "offset-end": 0.1,
    41.         "background-color": "orange",
    42.         "alpha": 0.7
    43.       },
    44.       { //Area Marker 2
    45.         "type": "area",
    46.         "range": [55, 65],
    47.         "offset-start": 0,
    48.         "offset-end": 0,
    49.         "background-color": "yellow",
    50.         "alpha": 0.7
    51.       },
    52.       { //Area Marker 3
    53.         "type": "area",
    54.         "range": [70, 90],
    55.         "offset-start": 0.8,
    56.         "offset-end": 0.1,
    57.         "background-color": "green",
    58.         "alpha": 0.7
    59.       }
    60.     ]
    61.   },
    62.   "plot": {
    63.     "csize": "5%",
    64.     "size": "100%",
    65.     "background-color": "#000000"
    66.   },
    67.   "series": [{
    68.     "values": [87]
    69.   }]
    70. };
    71.  
    72. zingchart.render({
    73.   id: 'myChart',
    74.   data: myConfig10,
    75.   height: "100%",
    76.   width: "100%"
    77. });