• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script nonce="undefined">
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.   </script>
    11.  
    12.   <script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
    13.   </script>
    14.  
    15.   <style>
    16.     html,
    17.     body {
    18.       margin: 0;
    19.       padding: 0;
    20.       width: 100%;
    21.       height: 100%;
    22.     }
    23.  
    24.     .chart--container {
    25.       min-height: 150px;
    26.       width: 100%;
    27.       height: 100%;
    28.     }
    29.  
    30.     #zc {
    31.       width: 100%;
    32.       min-height: 500px;
    33.       max-height: 650px;
    34.     }
    35.  
    36.     .zc-ref {
    37.       display: none;
    38.     }
    39.   </style>
    40. </head>
    41.  
    42. <body>
    43.   <!-- CHART CONTAINER -->
    44.   <div id="zc" class="chart--container">
    45.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    46.   </div>
    47.   <script>
    48.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    49.     var cdata = {
    50.       type: 'radar',
    51.       heatmap: {
    52.         graph: {
    53.           keyScale: 'scale-k',
    54.           valScale: 'scale-v'
    55.         },
    56.         brushType: 'circle',
    57.         size: '15px',
    58.         composite: true,
    59.         blur: 70,
    60.         alpha: 1,
    61.         tooltip: {
    62.           decimals: 1
    63.         }
    64.       },
    65.       plotarea: {
    66.         margin: 10
    67.       },
    68.       scale: {
    69.         sizeFactor: 0.9
    70.       },
    71.       scaleV: {
    72.         offsetStart: 40,
    73.         offsetEnd: 0,
    74.         values: '0:100:25'
    75.       },
    76.       scaleK: {
    77.         aspect: 'circle',
    78.         values: '0:355:5',
    79.         maxItems: 12
    80.       },
    81.       tooltip: {},
    82.       plot: {},
    83.       series: [{}]
    84.     };
    85.  
    86.     var MAX = 100;
    87.     var aData = [];
    88.     zingchart.bind('zc', 'load', function() {
    89.       window.setInterval(function() {
    90.         var l, k, v;
    91.         var iMaxPoints = 512;
    92.         if (aData.length === 0) {
    93.           for (l = 0; l < iMaxPoints; l++) {
    94.             k = 5 * Math.round(ZC._r_(0, 355) / 5);
    95.             v = 5 * Math.round(ZC._r_(10, 100) / 5);
    96.             aData.push([k, v, MAX * Math.random()]);
    97.           }
    98.         } else {
    99.           for (l = aData.length - 1; l >= 0; l--) {
    100.             aData[l][2] = Math.min(MAX, aData[l][2] - (MAX / 19) + (MAX / 20) * Math.random());
    101.             if (aData[l][2] <= 0) {
    102.               aData.splice(l, 1);
    103.             }
    104.           }
    105.           for (l = 0; l < iMaxPoints - aData.length; l++) {
    106.             k = 5 * Math.round(ZC._r_(0, 355) / 5);
    107.             v = 5 * Math.round(ZC._r_(10, 100) / 5);
    108.             aData.push([k, v, MAX * Math.random()]);
    109.           }
    110.         }
    111.         zingchart.exec('zc', 'heatmap.setdata', {
    112.           data: aData
    113.         });
    114.       }, 15);
    115.     });
    116.  
    117.     zingchart.loadModules('heatmap', function() {
    118.       zingchart.render({
    119.         id: 'zc',
    120.         width: '100%',
    121.         height: '100%',
    122.         output: 'svg',
    123.         data: cdata,
    124.         modules: 'heatmap,color-scale'
    125.       });
    126.     });
    127.   </script>
    128. </body>
    129.  
    130. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script>
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.   </script>
    11.  
    12.   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
    13.   </script>
    14.  
    15. </head>
    16.  
    17. <body>
    18.   <!-- CHART CONTAINER -->
    19.   <div id="zc" class="chart--container">
    20.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    21.   </div>
    22. </body>
    23.  
    24. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. #zc {
    16.   width: 100%;
    17.   min-height: 500px;
    18.   max-height: 650px;
    19. }
    20.  
    21. .zc-ref {
    22.   display: none;
    23. }
    1. var cdata = {
    2.   type: 'radar',
    3.   heatmap: {
    4.     graph: {
    5.       keyScale: 'scale-k',
    6.       valScale: 'scale-v'
    7.     },
    8.     brushType: 'circle',
    9.     size: '15px',
    10.     composite: true,
    11.     blur: 70,
    12.     alpha: 1,
    13.     tooltip: {
    14.       decimals: 1
    15.     }
    16.   },
    17.   plotarea: {
    18.     margin: 10
    19.   },
    20.   scale: {
    21.     sizeFactor: 0.9
    22.   },
    23.   scaleV: {
    24.     offsetStart: 40,
    25.     offsetEnd: 0,
    26.     values: '0:100:25'
    27.   },
    28.   scaleK: {
    29.     aspect: 'circle',
    30.     values: '0:355:5',
    31.     maxItems: 12
    32.   },
    33.   tooltip: {},
    34.   plot: {},
    35.   series: [{}]
    36. };
    37.  
    38. var MAX = 100;
    39. var aData = [];
    40. zingchart.bind('zc', 'load', function() {
    41.   window.setInterval(function() {
    42.     var l, k, v;
    43.     var iMaxPoints = 512;
    44.     if (aData.length === 0) {
    45.       for (l = 0; l < iMaxPoints; l++) {
    46.         k = 5 * Math.round(ZC._r_(0, 355) / 5);
    47.         v = 5 * Math.round(ZC._r_(10, 100) / 5);
    48.         aData.push([k, v, MAX * Math.random()]);
    49.       }
    50.     } else {
    51.       for (l = aData.length - 1; l >= 0; l--) {
    52.         aData[l][2] = Math.min(MAX, aData[l][2] - (MAX / 19) + (MAX / 20) * Math.random());
    53.         if (aData[l][2] <= 0) {
    54.           aData.splice(l, 1);
    55.         }
    56.       }
    57.       for (l = 0; l < iMaxPoints - aData.length; l++) {
    58.         k = 5 * Math.round(ZC._r_(0, 355) / 5);
    59.         v = 5 * Math.round(ZC._r_(10, 100) / 5);
    60.         aData.push([k, v, MAX * Math.random()]);
    61.       }
    62.     }
    63.     zingchart.exec('zc', 'heatmap.setdata', {
    64.       data: aData
    65.     });
    66.   }, 15);
    67. });
    68.  
    69. zingchart.loadModules('heatmap', function() {
    70.   zingchart.render({
    71.     id: 'zc',
    72.     width: '100%',
    73.     height: '100%',
    74.     output: 'svg',
    75.     data: cdata,
    76.     modules: 'heatmap,color-scale'
    77.   });
    78. });