<!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>
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
}
]
}
});
});
.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;};
