• 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.     body {
    17.       margin: 10px;
    18.       padding: 10px;
    19.     }
    20.  
    21.     *,
    22.     input,
    23.     button,
    24.     select,
    25.     textarea,
    26.     label {
    27.       font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    28.     }
    29.   </style>
    30. </head>
    31.  
    32. <body>
    33.   <div id="zc"></div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     var cdata = {
    37.       type: 'radar',
    38.       heatmap: {
    39.         graph: {
    40.           keyScale: 'scale-k',
    41.           valScale: 'scale-v'
    42.         },
    43.         brushType: 'circle',
    44.         size: '10px',
    45.         composite: true,
    46.         blur: '70px',
    47.         alpha: 1,
    48.         tooltip: {
    49.           decimals: 1
    50.         }
    51.       },
    52.       plotarea: {
    53.         margin: 10
    54.       },
    55.       scale: {
    56.         sizeFactor: 0.9
    57.       },
    58.       scaleV: {
    59.         offsetStart: 40,
    60.         offsetEnd: 0,
    61.         values: '0:100:25'
    62.       },
    63.       scaleK: {
    64.         aspect: 'circle',
    65.         values: '0:355:5',
    66.         maxItems: 12
    67.       },
    68.       tooltip: {},
    69.       plot: {},
    70.       series: [{}]
    71.     };
    72.  
    73.     var MAX = 100;
    74.     var aData = [];
    75.     zingchart.bind('zc', 'load', function() {
    76.       var l, k, v;
    77.       var iMaxPoints = 512;
    78.       for (l = 0; l < iMaxPoints; l++) {
    79.         k = 5 * Math.round(((iMaxPoints - l) % 355) / 5);
    80.         v = 5 * Math.round((l % 100) / 5);
    81.         aData.push([k, v, MAX]);
    82.       }
    83.       zingchart.exec('zc', 'heatmap.setdata', {
    84.         data: aData
    85.       });
    86.     });
    87.  
    88.     zingchart.loadModules('heatmap', function() {
    89.       zingchart.render({
    90.         id: 'zc',
    91.         width: 500,
    92.         height: 500,
    93.         output: 'svg',
    94.         data: cdata,
    95.         modules: 'heatmap,color-scale'
    96.       });
    97.     });
    98.   </script>
    99. </body>
    100.  
    101. </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.   <div id="zc"></div>
    19. </body>
    20.  
    21. </html>
    1. body {
    2.   margin: 10px;
    3.   padding: 10px;
    4. }
    5.  
    6. *,
    7. input,
    8. button,
    9. select,
    10. textarea,
    11. label {
    12.   font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    13. }
    1. var cdata = {
    2.   type: 'radar',
    3.   heatmap: {
    4.     graph: {
    5.       keyScale: 'scale-k',
    6.       valScale: 'scale-v'
    7.     },
    8.     brushType: 'circle',
    9.     size: '10px',
    10.     composite: true,
    11.     blur: '70px',
    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.   var l, k, v;
    42.   var iMaxPoints = 512;
    43.   for (l = 0; l < iMaxPoints; l++) {
    44.     k = 5 * Math.round(((iMaxPoints - l) % 355) / 5);
    45.     v = 5 * Math.round((l % 100) / 5);
    46.     aData.push([k, v, MAX]);
    47.   }
    48.   zingchart.exec('zc', 'heatmap.setdata', {
    49.     data: aData
    50.   });
    51. });
    52.  
    53. zingchart.loadModules('heatmap', function() {
    54.   zingchart.render({
    55.     id: 'zc',
    56.     width: 500,
    57.     height: 500,
    58.     output: 'svg',
    59.     data: cdata,
    60.     modules: 'heatmap,color-scale'
    61.   });
    62. });