• 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.       height: 100%;
    13.       width: 100%;
    14.     }
    15.  
    16.     #myChart {
    17.       height: 100%;
    18.       width: 100%;
    19.       min-height: 150px;
    20.     }
    21.  
    22.     .zc-ref {
    23.       display: none;
    24.     }
    25.   </style>
    26. </head>
    27.  
    28. <body>
    29.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    32.     window.feed = function(callback) {
    33.       var tick = {};
    34.       tick.plot0 = Math.ceil(350 + (Math.random() * 500));
    35.       callback(JSON.stringify(tick));
    36.     };
    37.  
    38.     var myConfig = {
    39.       type: "gauge",
    40.       globals: {
    41.         fontSize: 25
    42.       },
    43.       plotarea: {
    44.         marginTop: 80
    45.       },
    46.       plot: {
    47.         size: '100%',
    48.         valueBox: {
    49.           placement: 'center',
    50.           text: '%v', //default
    51.           fontSize: 35,
    52.           rules: [{
    53.               rule: '%v >= 700',
    54.               text: '%v<br>EXCELLENT'
    55.             },
    56.             {
    57.               rule: '%v < 700 && %v > 640',
    58.               text: '%v<br>Good'
    59.             },
    60.             {
    61.               rule: '%v < 640 && %v > 580',
    62.               text: '%v<br>Fair'
    63.             },
    64.             {
    65.               rule: '%v <  580',
    66.               text: '%v<br>Bad'
    67.             }
    68.           ]
    69.         }
    70.       },
    71.       tooltip: {
    72.         borderRadius: 5
    73.       },
    74.       scaleR: {
    75.         aperture: 180,
    76.         minValue: 300,
    77.         maxValue: 850,
    78.         step: 50,
    79.         center: {
    80.           visible: false
    81.         },
    82.         tick: {
    83.           visible: false
    84.         },
    85.         item: {
    86.           offsetR: 0,
    87.           rules: [{
    88.             rule: '%i == 9',
    89.             offsetX: 15
    90.           }]
    91.         },
    92.         labels: ['300', '', '', '', '', '', '580', '640', '700', '750', '', '850'],
    93.         ring: {
    94.           size: 50,
    95.           rules: [{
    96.               rule: '%v <= 580',
    97.               backgroundColor: '#E53935'
    98.             },
    99.             {
    100.               rule: '%v > 580 && %v < 640',
    101.               backgroundColor: '#EF5350'
    102.             },
    103.             {
    104.               rule: '%v >= 640 && %v < 700',
    105.               backgroundColor: '#FFA726'
    106.             },
    107.             {
    108.               rule: '%v >= 700',
    109.               backgroundColor: '#29B6F6'
    110.             }
    111.           ]
    112.         }
    113.       },
    114.       refresh: {
    115.         type: "feed",
    116.         transport: "js",
    117.         url: "feed()",
    118.         interval: 1500,
    119.         resetTimeout: 1000
    120.       },
    121.       series: [{
    122.         values: [755], // starting value
    123.         backgroundColor: 'black',
    124.         indicator: [10, 10, 10, 10, 0.75],
    125.         animation: {
    126.           effect: 2,
    127.           method: 1,
    128.           sequence: 4,
    129.           speed: 900
    130.         },
    131.       }]
    132.     };
    133.  
    134.     zingchart.render({
    135.       id: 'myChart',
    136.       data: myConfig,
    137.       height: 500,
    138.       width: '100%'
    139.     });
    140.   </script>
    141. </body>
    142.  
    143. </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'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5. }
    6.  
    7. #myChart {
    8.   height: 100%;
    9.   width: 100%;
    10.   min-height: 150px;
    11. }
    12.  
    13. .zc-ref {
    14.   display: none;
    15. }
    1. window.feed = function(callback) {
    2.   var tick = {};
    3.   tick.plot0 = Math.ceil(350 + (Math.random() * 500));
    4.   callback(JSON.stringify(tick));
    5. };
    6.  
    7. var myConfig = {
    8.   type: "gauge",
    9.   globals: {
    10.     fontSize: 25
    11.   },
    12.   plotarea: {
    13.     marginTop: 80
    14.   },
    15.   plot: {
    16.     size: '100%',
    17.     valueBox: {
    18.       placement: 'center',
    19.       text: '%v', //default
    20.       fontSize: 35,
    21.       rules: [{
    22.           rule: '%v >= 700',
    23.           text: '%v<br>EXCELLENT'
    24.         },
    25.         {
    26.           rule: '%v < 700 && %v > 640',
    27.           text: '%v<br>Good'
    28.         },
    29.         {
    30.           rule: '%v < 640 && %v > 580',
    31.           text: '%v<br>Fair'
    32.         },
    33.         {
    34.           rule: '%v <  580',
    35.           text: '%v<br>Bad'
    36.         }
    37.       ]
    38.     }
    39.   },
    40.   tooltip: {
    41.     borderRadius: 5
    42.   },
    43.   scaleR: {
    44.     aperture: 180,
    45.     minValue: 300,
    46.     maxValue: 850,
    47.     step: 50,
    48.     center: {
    49.       visible: false
    50.     },
    51.     tick: {
    52.       visible: false
    53.     },
    54.     item: {
    55.       offsetR: 0,
    56.       rules: [{
    57.         rule: '%i == 9',
    58.         offsetX: 15
    59.       }]
    60.     },
    61.     labels: ['300', '', '', '', '', '', '580', '640', '700', '750', '', '850'],
    62.     ring: {
    63.       size: 50,
    64.       rules: [{
    65.           rule: '%v <= 580',
    66.           backgroundColor: '#E53935'
    67.         },
    68.         {
    69.           rule: '%v > 580 && %v < 640',
    70.           backgroundColor: '#EF5350'
    71.         },
    72.         {
    73.           rule: '%v >= 640 && %v < 700',
    74.           backgroundColor: '#FFA726'
    75.         },
    76.         {
    77.           rule: '%v >= 700',
    78.           backgroundColor: '#29B6F6'
    79.         }
    80.       ]
    81.     }
    82.   },
    83.   refresh: {
    84.     type: "feed",
    85.     transport: "js",
    86.     url: "feed()",
    87.     interval: 1500,
    88.     resetTimeout: 1000
    89.   },
    90.   series: [{
    91.     values: [755], // starting value
    92.     backgroundColor: 'black',
    93.     indicator: [10, 10, 10, 10, 0.75],
    94.     animation: {
    95.       effect: 2,
    96.       method: 1,
    97.       sequence: 4,
    98.       speed: 900
    99.     },
    100.   }]
    101. };
    102.  
    103. zingchart.render({
    104.   id: 'myChart',
    105.   data: myConfig,
    106.   height: 500,
    107.   width: '100%'
    108. });