• 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.     ZC.LICENSE = ["bab21d016b2dadc18447d2a055f061e3"];
    11.   </script>
    12.  
    13.   <style>
    14.     .zc-body {
    15.       margin: 10px;
    16.       padding: 10px;
    17.       background-color: #fff;
    18.     }
    19.  
    20.     input,
    21.     button,
    22.     select,
    23.     textarea,
    24.     label {
    25.       font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    26.     }
    27.  
    28.     .zc-watermark {
    29.       display: none;
    30.     }
    31.  
    32.     ;
    33.   </style>
    34. </head>
    35.  
    36. <body class="zc-body">
    37.   <div>
    38.     <div id="zch"></div>
    39.     <div id="zcg" style="float:left"></div>
    40.     <div id="zcv" style="float:left"></div>
    41.   </div>
    42.  
    43.   <script>
    44.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    45.     let iCols = 100;
    46.     let iRows = 50;
    47.     let iSize = 5;
    48.  
    49.     let chartConfig = {
    50.       type: 'null',
    51.       backgroundColor: '#fff',
    52.       flat: true,
    53.       heatmap: {
    54.         alpha: 1,
    55.         blur: iSize,
    56.         brushType: 'square',
    57.         maxValue: 1,
    58.         minValue: 0,
    59.         size: iSize,
    60.       },
    61.     };
    62.  
    63.     function createArr(iCols, iRows) {
    64.       let aData = new Array(iCols);
    65.       for (let i = 0; i < aData.length; i++) {
    66.         aData[i] = new Array(iRows);
    67.       }
    68.       return aData;
    69.     }
    70.  
    71.     let aGrid = createArr(iCols, iRows);
    72.     let aHValues = [],
    73.       aVValues = [];
    74.     for (let i = 0; i < iCols; i++) {
    75.       aHValues[i] = 0;
    76.       for (let j = 0; j < iRows; j++) {
    77.         aGrid[i][j] = Math.floor(2 * Math.random());
    78.         if (aVValues[j] === null || typeof aVValues[j] === 'undefined') {
    79.           aVValues[j] = 0;
    80.         }
    81.         aHValues[i] += aGrid[i][j];
    82.         aVValues[j] += aGrid[i][j];
    83.       }
    84.     }
    85.  
    86.     zingchart.bind('zcg', 'load', function() {
    87.       step();
    88.     });
    89.  
    90.     function step() {
    91.       let i, j;
    92.       let aNextGrid = createArr(iCols, iRows);
    93.       aHValues = [];
    94.       aVValues = [];
    95.  
    96.       for (i = 0; i < iCols; i++) {
    97.         aHValues[i] = 0;
    98.         for (j = 0; j < iRows; j++) {
    99.           let iState = aGrid[i][j];
    100.           let iSum = 0;
    101.           let iNeighbors = countNeighbors(aGrid, i, j);
    102.  
    103.           if (iState === 0 && iNeighbors === 3) {
    104.             aNextGrid[i][j] = 1;
    105.           } else if (iState === 1 && (iNeighbors < 2 || iNeighbors > 3)) {
    106.             aNextGrid[i][j] = 0;
    107.           } else {
    108.             aNextGrid[i][j] = iState;
    109.           }
    110.  
    111.           aHValues[i] += aNextGrid[i][j];
    112.           if (aVValues[j] === null || typeof aVValues[j] === 'undefined') {
    113.             aVValues[j] = 0;
    114.           }
    115.           aVValues[j] += aNextGrid[i][j];
    116.         }
    117.       }
    118.  
    119.       aGrid = aNextGrid;
    120.  
    121.       let aData = [];
    122.       for (i = 0; i < iCols; i++) {
    123.         for (j = 0; j < iRows; j++) {
    124.           aData.push([i * iSize, j * iSize, aGrid[i][j]]);
    125.         }
    126.       }
    127.       zingchart.exec('zcg', 'heatmap.setdata', {
    128.         data: aData,
    129.       });
    130.  
    131.       zingchart.exec('zch', 'setseriesvalues', {
    132.         plotindex: 0,
    133.         values: aHValues,
    134.       });
    135.       zingchart.exec('zcv', 'setseriesvalues', {
    136.         plotindex: 0,
    137.         values: aVValues,
    138.       });
    139.  
    140.       window.setTimeout(step, 15);
    141.     }
    142.  
    143.     function countNeighbors(aGrid, iX, iY) {
    144.       let iSum = 0;
    145.       for (let i = -1; i < 2; i++) {
    146.         for (let j = -1; j < 2; j++) {
    147.           let iCol = (iX + i + iCols) % iCols;
    148.           let iRow = (iY + j + iRows) % iRows;
    149.           iSum += aGrid[iCol][iRow];
    150.         }
    151.       }
    152.       iSum -= aGrid[iX][iY];
    153.       return iSum;
    154.     }
    155.  
    156.     zingchart.loadModules('heatmap', function() {
    157.       zingchart.render({
    158.         id: 'zcg',
    159.         width: iCols * iSize,
    160.         height: iRows * iSize,
    161.         output: 'canvas',
    162.         data: chartConfig,
    163.         modules: 'heatmap',
    164.       });
    165.  
    166.       zingchart.render({
    167.         id: 'zch',
    168.         width: iCols * iSize,
    169.         height: '80px',
    170.         output: 'canvas',
    171.         data: {
    172.           flat: true,
    173.           type: 'area',
    174.           title: {
    175.             text: 'Game of Life using Heatmap module',
    176.             fontSize: '11px',
    177.             align: 'left',
    178.           },
    179.           plot: {
    180.             shadow: false,
    181.             aspect: 'stepped',
    182.             lineWidth: '1px',
    183.             maxNodes: 0,
    184.             maxTrackers: 0,
    185.           },
    186.           plotarea: {
    187.             margin: '20 0 0 0',
    188.           },
    189.           scaleX: {
    190.             visible: false,
    191.           },
    192.           scaleY: {
    193.             visible: false,
    194.           },
    195.           series: [{
    196.             values: aHValues,
    197.           }, ],
    198.         },
    199.       });
    200.  
    201.       zingchart.render({
    202.         id: 'zcv',
    203.         width: '80px',
    204.         height: iRows * iSize,
    205.         output: 'canvas',
    206.         data: {
    207.           type: 'varea',
    208.           flat: true,
    209.           plot: {
    210.             shadow: false,
    211.             aspect: 'stepped',
    212.             maxNodes: 0,
    213.             maxTrackers: 0,
    214.             lineWidth: '1px',
    215.           },
    216.           plotarea: {
    217.             margin: '0 20 0 0',
    218.           },
    219.           scaleX: {
    220.             mirrored: true,
    221.             visible: false,
    222.           },
    223.           scaleY: {
    224.             visible: false,
    225.           },
    226.           series: [{
    227.             values: aHValues,
    228.           }, ],
    229.         },
    230.       });
    231.     });
    232.   </script>
    233. </body>
    234.  
    235. </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.     ZC.LICENSE = ["bab21d016b2dadc18447d2a055f061e3"];
    11.   </script>
    12.  
    13. </head>
    14.  
    15. <body class="zc-body">
    16.   <div>
    17.     <div id="zch"></div>
    18.     <div id="zcg" style="float:left"></div>
    19.     <div id="zcv" style="float:left"></div>
    20.   </div>
    21.  
    22. </body>
    23.  
    24. </html>
    1. .zc-body {
    2.   margin: 10px;
    3.   padding: 10px;
    4.   background-color: #fff;
    5. }
    6.  
    7. input,
    8. button,
    9. select,
    10. textarea,
    11. label {
    12.   font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    13. }
    14.  
    15. .zc-watermark {
    16.   display: none;
    17. }
    18.  
    19. ;
    1. let iCols = 100;
    2. let iRows = 50;
    3. let iSize = 5;
    4.  
    5. let chartConfig = {
    6.   type: 'null',
    7.   backgroundColor: '#fff',
    8.   flat: true,
    9.   heatmap: {
    10.     alpha: 1,
    11.     blur: iSize,
    12.     brushType: 'square',
    13.     maxValue: 1,
    14.     minValue: 0,
    15.     size: iSize,
    16.   },
    17. };
    18.  
    19. function createArr(iCols, iRows) {
    20.   let aData = new Array(iCols);
    21.   for (let i = 0; i < aData.length; i++) {
    22.     aData[i] = new Array(iRows);
    23.   }
    24.   return aData;
    25. }
    26.  
    27. let aGrid = createArr(iCols, iRows);
    28. let aHValues = [],
    29.   aVValues = [];
    30. for (let i = 0; i < iCols; i++) {
    31.   aHValues[i] = 0;
    32.   for (let j = 0; j < iRows; j++) {
    33.     aGrid[i][j] = Math.floor(2 * Math.random());
    34.     if (aVValues[j] === null || typeof aVValues[j] === 'undefined') {
    35.       aVValues[j] = 0;
    36.     }
    37.     aHValues[i] += aGrid[i][j];
    38.     aVValues[j] += aGrid[i][j];
    39.   }
    40. }
    41.  
    42. zingchart.bind('zcg', 'load', function() {
    43.   step();
    44. });
    45.  
    46. function step() {
    47.   let i, j;
    48.   let aNextGrid = createArr(iCols, iRows);
    49.   aHValues = [];
    50.   aVValues = [];
    51.  
    52.   for (i = 0; i < iCols; i++) {
    53.     aHValues[i] = 0;
    54.     for (j = 0; j < iRows; j++) {
    55.       let iState = aGrid[i][j];
    56.       let iSum = 0;
    57.       let iNeighbors = countNeighbors(aGrid, i, j);
    58.  
    59.       if (iState === 0 && iNeighbors === 3) {
    60.         aNextGrid[i][j] = 1;
    61.       } else if (iState === 1 && (iNeighbors < 2 || iNeighbors > 3)) {
    62.         aNextGrid[i][j] = 0;
    63.       } else {
    64.         aNextGrid[i][j] = iState;
    65.       }
    66.  
    67.       aHValues[i] += aNextGrid[i][j];
    68.       if (aVValues[j] === null || typeof aVValues[j] === 'undefined') {
    69.         aVValues[j] = 0;
    70.       }
    71.       aVValues[j] += aNextGrid[i][j];
    72.     }
    73.   }
    74.  
    75.   aGrid = aNextGrid;
    76.  
    77.   let aData = [];
    78.   for (i = 0; i < iCols; i++) {
    79.     for (j = 0; j < iRows; j++) {
    80.       aData.push([i * iSize, j * iSize, aGrid[i][j]]);
    81.     }
    82.   }
    83.   zingchart.exec('zcg', 'heatmap.setdata', {
    84.     data: aData,
    85.   });
    86.  
    87.   zingchart.exec('zch', 'setseriesvalues', {
    88.     plotindex: 0,
    89.     values: aHValues,
    90.   });
    91.   zingchart.exec('zcv', 'setseriesvalues', {
    92.     plotindex: 0,
    93.     values: aVValues,
    94.   });
    95.  
    96.   window.setTimeout(step, 15);
    97. }
    98.  
    99. function countNeighbors(aGrid, iX, iY) {
    100.   let iSum = 0;
    101.   for (let i = -1; i < 2; i++) {
    102.     for (let j = -1; j < 2; j++) {
    103.       let iCol = (iX + i + iCols) % iCols;
    104.       let iRow = (iY + j + iRows) % iRows;
    105.       iSum += aGrid[iCol][iRow];
    106.     }
    107.   }
    108.   iSum -= aGrid[iX][iY];
    109.   return iSum;
    110. }
    111.  
    112. zingchart.loadModules('heatmap', function() {
    113.   zingchart.render({
    114.     id: 'zcg',
    115.     width: iCols * iSize,
    116.     height: iRows * iSize,
    117.     output: 'canvas',
    118.     data: chartConfig,
    119.     modules: 'heatmap',
    120.   });
    121.  
    122.   zingchart.render({
    123.     id: 'zch',
    124.     width: iCols * iSize,
    125.     height: '80px',
    126.     output: 'canvas',
    127.     data: {
    128.       flat: true,
    129.       type: 'area',
    130.       title: {
    131.         text: 'Game of Life using Heatmap module',
    132.         fontSize: '11px',
    133.         align: 'left',
    134.       },
    135.       plot: {
    136.         shadow: false,
    137.         aspect: 'stepped',
    138.         lineWidth: '1px',
    139.         maxNodes: 0,
    140.         maxTrackers: 0,
    141.       },
    142.       plotarea: {
    143.         margin: '20 0 0 0',
    144.       },
    145.       scaleX: {
    146.         visible: false,
    147.       },
    148.       scaleY: {
    149.         visible: false,
    150.       },
    151.       series: [{
    152.         values: aHValues,
    153.       }, ],
    154.     },
    155.   });
    156.  
    157.   zingchart.render({
    158.     id: 'zcv',
    159.     width: '80px',
    160.     height: iRows * iSize,
    161.     output: 'canvas',
    162.     data: {
    163.       type: 'varea',
    164.       flat: true,
    165.       plot: {
    166.         shadow: false,
    167.         aspect: 'stepped',
    168.         maxNodes: 0,
    169.         maxTrackers: 0,
    170.         lineWidth: '1px',
    171.       },
    172.       plotarea: {
    173.         margin: '0 20 0 0',
    174.       },
    175.       scaleX: {
    176.         mirrored: true,
    177.         visible: false,
    178.       },
    179.       scaleY: {
    180.         visible: false,
    181.       },
    182.       series: [{
    183.         values: aHValues,
    184.       }, ],
    185.     },
    186.   });
    187. });