• 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.  
    17.     .control-bar {
    18.       margin: 0 auto;
    19.       padding: 0 0 1rem;
    20.       display: flex;
    21.       align-items: center;
    22.       justify-content: center;
    23.     }
    24.  
    25.     .control-bar.loaded {
    26.       display: flex !important;
    27.       opacity: 1;
    28.     }
    29.  
    30.     .control-bar>div {
    31.       display: flex;
    32.       align-items: center;
    33.     }
    34.  
    35.     .control-bar>*+* {
    36.       margin-left: 10px;
    37.     }
    38.  
    39.     .control-bar span {
    40.       margin-left: 7px;
    41.       display: inline-block;
    42.     }
    43.  
    44.     .control-bar select {
    45.       min-width: 45px;
    46.       height: 40px;
    47.       background: #fff;
    48.       border: 1px solid #ebebeb;
    49.       border-radius: 4px;
    50.     }
    51.  
    52.     .control-bar .sel-wide {
    53.       min-width: 60px;
    54.     }
    55.  
    56.     .control-bar button {
    57.       min-width: 45px;
    58.       height: 40px;
    59.       cursor: pointer;
    60.       color: #fff;
    61.       background: #074361;
    62.       border: 1px solid #074361;
    63.       border-radius: 4px;
    64.     }
    65.   </style>
    66. </head>
    67.  
    68. <body>
    69.   <div data-jsref="control-bar" class="control-bar">
    70.     <div>
    71.       <span>Heat Map Type: &nbsp;</span>
    72.       <select data-jsref="aspect">
    73.         <option value="brightness">brightness</option>
    74.         <option value="size">size</option>
    75.         <option value="vertical">vertical</option>
    76.         <option value="horizontal">horizontal</option>
    77.         <option value="none">none</option>
    78.       </select>
    79.       <span>aspect</span>
    80.     </div>
    81.     <button data-jsref="renderBtn">Render</button>
    82.   </div>
    83.   </div>
    84.   <div id='myChart'></div>
    85.   <script>
    86.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DOM ELEMENTS
    87.     // -----------------------------
    88.     var controlBar = document.querySelector('[data-jsref="control-bar"]');
    89.     var aspect = document.querySelector('[data-jsref="aspect"]');
    90.     var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    91.  
    92.     var myConfig = {
    93.       "type": "heatmap",
    94.       "plotarea": {
    95.         "margin": "dynamic"
    96.       },
    97.       "plot": {
    98.         "aspect": aspect.value
    99.       },
    100.       "series": [{
    101.           "values": [59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20]
    102.         },
    103.         {
    104.           "values": [34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42]
    105.         },
    106.         {
    107.           "values": [90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31]
    108.         },
    109.         {
    110.           "values": [23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21]
    111.         },
    112.         {
    113.           "values": [43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15]
    114.         },
    115.         {
    116.           "values": [51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17]
    117.         },
    118.         {
    119.           "values": [12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62]
    120.         },
    121.         {
    122.           "values": [15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31]
    123.         }
    124.       ]
    125.     };
    126.  
    127.     renderBtn.addEventListener('click', render);
    128.  
    129.     zingchart.render({
    130.       id: 'myChart',
    131.       data: myConfig,
    132.       height: "100%",
    133.       width: "100%"
    134.     });
    135.  
    136.     function render() {
    137.       zingchart.exec('myChart', 'modify', {
    138.         object: 'plot',
    139.         data: {
    140.           aspect: aspect.value
    141.         }
    142.       });
    143.     }
    144.   </script>
    145. </body>
    146.  
    147. </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 data-jsref="control-bar" class="control-bar">
    13.     <div>
    14.       <span>Heat Map Type: &nbsp;</span>
    15.       <select data-jsref="aspect">
    16.         <option value="brightness">brightness</option>
    17.         <option value="size">size</option>
    18.         <option value="vertical">vertical</option>
    19.         <option value="horizontal">horizontal</option>
    20.         <option value="none">none</option>
    21.       </select>
    22.       <span>aspect</span>
    23.     </div>
    24.     <button data-jsref="renderBtn">Render</button>
    25.   </div>
    26.   </div>
    27.   <div id='myChart'></div>
    28. </body>
    29.  
    30. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    7.  
    8. .control-bar {
    9.   margin: 0 auto;
    10.   padding: 0 0 1rem;
    11.   display: flex;
    12.   align-items: center;
    13.   justify-content: center;
    14. }
    15.  
    16. .control-bar.loaded {
    17.   display: flex !important;
    18.   opacity: 1;
    19. }
    20.  
    21. .control-bar>div {
    22.   display: flex;
    23.   align-items: center;
    24. }
    25.  
    26. .control-bar>*+* {
    27.   margin-left: 10px;
    28. }
    29.  
    30. .control-bar span {
    31.   margin-left: 7px;
    32.   display: inline-block;
    33. }
    34.  
    35. .control-bar select {
    36.   min-width: 45px;
    37.   height: 40px;
    38.   background: #fff;
    39.   border: 1px solid #ebebeb;
    40.   border-radius: 4px;
    41. }
    42.  
    43. .control-bar .sel-wide {
    44.   min-width: 60px;
    45. }
    46.  
    47. .control-bar button {
    48.   min-width: 45px;
    49.   height: 40px;
    50.   cursor: pointer;
    51.   color: #fff;
    52.   background: #074361;
    53.   border: 1px solid #074361;
    54.   border-radius: 4px;
    55. }
    1. // DOM ELEMENTS
    2. // -----------------------------
    3. var controlBar = document.querySelector('[data-jsref="control-bar"]');
    4. var aspect = document.querySelector('[data-jsref="aspect"]');
    5. var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    6.  
    7. var myConfig = {
    8.   "type": "heatmap",
    9.   "plotarea": {
    10.     "margin": "dynamic"
    11.   },
    12.   "plot": {
    13.     "aspect": aspect.value
    14.   },
    15.   "series": [{
    16.       "values": [59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20]
    17.     },
    18.     {
    19.       "values": [34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42]
    20.     },
    21.     {
    22.       "values": [90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31]
    23.     },
    24.     {
    25.       "values": [23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21]
    26.     },
    27.     {
    28.       "values": [43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15]
    29.     },
    30.     {
    31.       "values": [51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17]
    32.     },
    33.     {
    34.       "values": [12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62]
    35.     },
    36.     {
    37.       "values": [15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31]
    38.     }
    39.   ]
    40. };
    41.  
    42. renderBtn.addEventListener('click', render);
    43.  
    44. zingchart.render({
    45.   id: 'myChart',
    46.   data: myConfig,
    47.   height: "100%",
    48.   width: "100%"
    49. });
    50.  
    51. function render() {
    52.   zingchart.exec('myChart', 'modify', {
    53.     object: 'plot',
    54.     data: {
    55.       aspect: aspect.value
    56.     }
    57.   });
    58. }