• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["bab21d016b2dadc18447d2a055f061e3"];
      </script>
    
      <style>
        .zc-body {
          margin: 10px;
          padding: 10px;
          background-color: #fff;
        }
    
        *,
        input,
        button,
        select,
        textarea,
        label {
          font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
        }
    
        .zc-watermark {
          display: none;
        }
    
        ;
      </style>
    </head>
    
    <body class="zc-body">
      <div>
        <div id="zch"></div>
        <div id="zcg" style="float:left"></div>
        <div id="zcv" style="float:left"></div>
      </div>
    
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var iCols = 100;
        var iRows = 50;
        var iSize = 5;
    
        var cdata = {
          type: "null",
          backgroundColor: "#fff",
          flat: true,
          heatmap: {
            alpha: 1,
            minValue: 0,
            maxValue: 1,
            brushType: 'square',
            size: iSize,
            blur: iSize
          }
        };
    
        function createArr(iCols, iRows) {
          var aData = new Array(iCols);
          for (var i = 0; i < aData.length; i++) {
            aData[i] = new Array(iRows);
          }
          return aData;
        };
    
        var aGrid = createArr(iCols, iRows);
        var aHValues = [],
          aVValues = [];
        for (var i = 0; i < iCols; i++) {
          aHValues[i] = 0;
          for (var j = 0; j < iRows; j++) {
            aGrid[i][j] = Math.floor(2 * Math.random());
            if (aVValues[j] === null || typeof(aVValues[j]) === 'undefined') {
              aVValues[j] = 0;
            }
            aHValues[i] += aGrid[i][j];
            aVValues[j] += aGrid[i][j];
          }
        }
    
        zingchart.bind('zcg', 'load', function() {
          step();
        });
    
        function step() {
          var i, j;
          var aNextGrid = createArr(iCols, iRows);
          aHValues = [];
          aVValues = [];
    
          for (i = 0; i < iCols; i++) {
            aHValues[i] = 0;
            for (j = 0; j < iRows; j++) {
              var iState = aGrid[i][j];
              var iSum = 0;
              var iNeighbors = countNeighbors(aGrid, i, j);
    
              if (iState === 0 && iNeighbors === 3) {
                aNextGrid[i][j] = 1;
              } else if (iState === 1 && (iNeighbors < 2 || iNeighbors > 3)) {
                aNextGrid[i][j] = 0;
              } else {
                aNextGrid[i][j] = iState;
              }
    
              aHValues[i] += aNextGrid[i][j];
              if (aVValues[j] === null || typeof(aVValues[j]) === 'undefined') {
                aVValues[j] = 0;
              }
              aVValues[j] += aNextGrid[i][j];
            }
          }
    
          aGrid = aNextGrid;
    
          var aData = [];
          for (i = 0; i < iCols; i++) {
            for (j = 0; j < iRows; j++) {
              aData.push([i * iSize, j * iSize, aGrid[i][j]])
            }
          }
          zingchart.exec('zcg', 'heatmap.setdata', {
            data: aData
          });
    
          zingchart.exec('zch', 'setseriesvalues', {
            plotindex: 0,
            values: aHValues
          });
          zingchart.exec('zcv', 'setseriesvalues', {
            plotindex: 0,
            values: aVValues
          });
    
          window.setTimeout(step, 15);
        }
    
        function countNeighbors(aGrid, iX, iY) {
          var iSum = 0;
          for (var i = -1; i < 2; i++) {
            for (var j = -1; j < 2; j++) {
              var iCol = (iX + i + iCols) % iCols;
              var iRow = (iY + j + iRows) % iRows;
              iSum += aGrid[iCol][iRow];
            }
          }
          iSum -= aGrid[iX][iY];
          return iSum;
        };
    
        zingchart.loadModules('heatmap', function() {
          zingchart.render({
            id: 'zcg',
            width: iCols * iSize,
            height: iRows * iSize,
            output: 'canvas',
            data: cdata,
            modules: 'heatmap'
          });
    
          zingchart.render({
            id: 'zch',
            width: iCols * iSize,
            height: 80,
            output: 'canvas',
            data: {
              flat: true,
              type: 'area',
              title: {
                text: 'Game of Life using Heatmap module',
                fontSize: 11,
                align: 'left'
              },
              plotarea: {
                margin: '20 0 0 0'
              },
              plot: {
                shadow: false,
                aspect: 'stepped',
                lineWidth: 1,
                maxNodes: 0,
                maxTrackers: 0
              },
              scaleX: {
                visible: false
              },
              scaleY: {
                visible: false
              },
              series: [{
                values: aHValues
              }]
            }
          });
    
          zingchart.render({
            id: 'zcv',
            width: 80,
            height: iRows * iSize,
            output: 'canvas',
            data: {
              type: 'varea',
              flat: true,
              plotarea: {
                margin: '0 20 0 0'
              },
              plot: {
                shadow: false,
                aspect: 'stepped',
                maxNodes: 0,
                maxTrackers: 0,
                lineWidth: 1
              },
              scaleX: {
                mirrored: true,
                visible: false
              },
              scaleY: {
                visible: false
              },
              series: [{
                values: aHValues
              }]
            }
          });
    
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["bab21d016b2dadc18447d2a055f061e3"];
      </script>
    
    </head>
    
    <body class="zc-body">
      <div>
        <div id="zch"></div>
        <div id="zcg" style="float:left"></div>
        <div id="zcv" style="float:left"></div>
      </div>
    
    </body>
    
    </html>
    .zc-body {
      margin: 10px;
      padding: 10px;
      background-color: #fff;
    }
    
    *,
    input,
    button,
    select,
    textarea,
    label {
      font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    }
    
    .zc-watermark {
      display: none;
    }
    
    ;
    var iCols = 100;
    var iRows = 50;
    var iSize = 5;
    
    var cdata = {
      type: "null",
      backgroundColor: "#fff",
      flat: true,
      heatmap: {
        alpha: 1,
        minValue: 0,
        maxValue: 1,
        brushType: 'square',
        size: iSize,
        blur: iSize
      }
    };
    
    function createArr(iCols, iRows) {
      var aData = new Array(iCols);
      for (var i = 0; i < aData.length; i++) {
        aData[i] = new Array(iRows);
      }
      return aData;
    };
    
    var aGrid = createArr(iCols, iRows);
    var aHValues = [],
      aVValues = [];
    for (var i = 0; i < iCols; i++) {
      aHValues[i] = 0;
      for (var j = 0; j < iRows; j++) {
        aGrid[i][j] = Math.floor(2 * Math.random());
        if (aVValues[j] === null || typeof(aVValues[j]) === 'undefined') {
          aVValues[j] = 0;
        }
        aHValues[i] += aGrid[i][j];
        aVValues[j] += aGrid[i][j];
      }
    }
    
    zingchart.bind('zcg', 'load', function() {
      step();
    });
    
    function step() {
      var i, j;
      var aNextGrid = createArr(iCols, iRows);
      aHValues = [];
      aVValues = [];
    
      for (i = 0; i < iCols; i++) {
        aHValues[i] = 0;
        for (j = 0; j < iRows; j++) {
          var iState = aGrid[i][j];
          var iSum = 0;
          var iNeighbors = countNeighbors(aGrid, i, j);
    
          if (iState === 0 && iNeighbors === 3) {
            aNextGrid[i][j] = 1;
          } else if (iState === 1 && (iNeighbors < 2 || iNeighbors > 3)) {
            aNextGrid[i][j] = 0;
          } else {
            aNextGrid[i][j] = iState;
          }
    
          aHValues[i] += aNextGrid[i][j];
          if (aVValues[j] === null || typeof(aVValues[j]) === 'undefined') {
            aVValues[j] = 0;
          }
          aVValues[j] += aNextGrid[i][j];
        }
      }
    
      aGrid = aNextGrid;
    
      var aData = [];
      for (i = 0; i < iCols; i++) {
        for (j = 0; j < iRows; j++) {
          aData.push([i * iSize, j * iSize, aGrid[i][j]])
        }
      }
      zingchart.exec('zcg', 'heatmap.setdata', {
        data: aData
      });
    
      zingchart.exec('zch', 'setseriesvalues', {
        plotindex: 0,
        values: aHValues
      });
      zingchart.exec('zcv', 'setseriesvalues', {
        plotindex: 0,
        values: aVValues
      });
    
      window.setTimeout(step, 15);
    }
    
    function countNeighbors(aGrid, iX, iY) {
      var iSum = 0;
      for (var i = -1; i < 2; i++) {
        for (var j = -1; j < 2; j++) {
          var iCol = (iX + i + iCols) % iCols;
          var iRow = (iY + j + iRows) % iRows;
          iSum += aGrid[iCol][iRow];
        }
      }
      iSum -= aGrid[iX][iY];
      return iSum;
    };
    
    zingchart.loadModules('heatmap', function() {
      zingchart.render({
        id: 'zcg',
        width: iCols * iSize,
        height: iRows * iSize,
        output: 'canvas',
        data: cdata,
        modules: 'heatmap'
      });
    
      zingchart.render({
        id: 'zch',
        width: iCols * iSize,
        height: 80,
        output: 'canvas',
        data: {
          flat: true,
          type: 'area',
          title: {
            text: 'Game of Life using Heatmap module',
            fontSize: 11,
            align: 'left'
          },
          plotarea: {
            margin: '20 0 0 0'
          },
          plot: {
            shadow: false,
            aspect: 'stepped',
            lineWidth: 1,
            maxNodes: 0,
            maxTrackers: 0
          },
          scaleX: {
            visible: false
          },
          scaleY: {
            visible: false
          },
          series: [{
            values: aHValues
          }]
        }
      });
    
      zingchart.render({
        id: 'zcv',
        width: 80,
        height: iRows * iSize,
        output: 'canvas',
        data: {
          type: 'varea',
          flat: true,
          plotarea: {
            margin: '0 20 0 0'
          },
          plot: {
            shadow: false,
            aspect: 'stepped',
            maxNodes: 0,
            maxTrackers: 0,
            lineWidth: 1
          },
          scaleX: {
            mirrored: true,
            visible: false
          },
          scaleY: {
            visible: false
          },
          series: [{
            values: aHValues
          }]
        }
      });
    
    });