<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
<option value="100000">100.000</option>
<option value="50000">50.000</option>
<option value="10000">10.000</option>
<option value="5000">5.000</option>
<option value="1000">1.000</option>
<option value="500">500</option>
</select> people)
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'null',
backgroundColor: '#fff',
flat: true,
colorScale: {
alpha: 0.8,
aspect: 'gradient',
backgroundColor: null,
gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
item: {
color: 'red',
mediaRules: [{
maxWidth: 400,
color: 'blue'
}]
},
},
heatmap: {
alpha: 1,
tooltip: {
decimals: 0,
thousandsSeparator: '.',
text: '~ %value people'
},
sortData: true,
async: true,
brushType: 'square',
size: 3,
blur: 1
},
tooltip: {
callout: true,
calloutPosition: 'bottom',
calloutWidth: 10,
calloutHeight: 6,
fontSize: 11,
padding: '5 10',
},
shapes: [{
type: 'zingchart.maps',
options: {
id: 'mapmain',
name: 'fra',
scale: true,
zooming: false,
panning: false,
scrolling: false,
style: {
flat: true,
controls: {
visible: false
},
borderAlpha: 0.1,
borderColor: '#fff',
label: {
overlap: false,
text: '%long-text'
},
hoverState: {
visible: false,
backgroundColor: 'none',
shadowAlpha: 0.2,
shadowDistance: 2,
shadow: true,
shadowColor: '#333'
}
}
}
}]
};
zingchart.bind('myChart', 'load', function() {
paintHeatmap();
});
window.paintHeatmap = function(iMax, bSmallBrush) {
var aData = [];
var iMaxPop = 0;
for (var i = 0; i < FR_POP_2010.length; i++) {
if (iMax && FR_POP_2010[i][2] > iMax) {
continue;
}
var fLon = FR_POP_2010[i][0],
fLat = FR_POP_2010[i][1],
iPop = FR_POP_2010[i][2];
var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
aData.push([aXY[0], aXY[1], iPop]);
iMaxPop = Math.max(iMaxPop, iPop);
}
zingchart.exec('myChart', 'colorscale.update', {
data: {
maxValue: iMaxPop
}
});
var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
zingchart.exec('myChart', 'heatmap.setdata', {
minValue: 0,
maxValue: oCSInfo.max,
data: aData,
size: bSmallBrush ? 4 : 12,
blur: bSmallBrush ? 0 : 6
});
}
zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
if (oInfo.value !== null) {
zingchart.exec(oInfo.id, 'colorscale.setvalue', {
graphid: oInfo.graphid,
value: oInfo.value
});
} else {
zingchart.exec(oInfo.id, 'colorscale.clear', {
graphid: oInfo.graphid
});
}
});
document.querySelector('#sc').addEventListener('click', function() {
if (this.checked) {
paintHeatmap(100000, true);
let maxpopRef = document.querySelector('#maxpop');
maxpopRef.value = 100000;
maxpopRef.removeAttribute('disabled')
} else {
paintHeatmap();
let maxpopRef = document.querySelector('#maxpop');
maxpopRef.setAttribute('disabled', 'disabled')
}
});
document.querySelector('#maxpop').addEventListener('change', function() {
paintHeatmap(this.value, true);
});
zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
output: 'canvas',
data: chartConfig,
modules: 'heatmap,color-scale'
});
});
</script>
</body>
</html>
<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body class="zc-body">
<input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
<option value="100000">100.000</option>
<option value="50000">50.000</option>
<option value="10000">10.000</option>
<option value="5000">5.000</option>
<option value="1000">1.000</option>
<option value="500">500</option>
</select> people)
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
</body>
</html>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
let chartConfig = {
type: 'null',
backgroundColor: '#fff',
flat: true,
colorScale: {
alpha: 0.8,
aspect: 'gradient',
backgroundColor: null,
gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
item: {
color: 'red',
mediaRules: [{
maxWidth: 400,
color: 'blue'
}]
},
},
heatmap: {
alpha: 1,
tooltip: {
decimals: 0,
thousandsSeparator: '.',
text: '~ %value people'
},
sortData: true,
async: true,
brushType: 'square',
size: 3,
blur: 1
},
tooltip: {
callout: true,
calloutPosition: 'bottom',
calloutWidth: 10,
calloutHeight: 6,
fontSize: 11,
padding: '5 10',
},
shapes: [{
type: 'zingchart.maps',
options: {
id: 'mapmain',
name: 'fra',
scale: true,
zooming: false,
panning: false,
scrolling: false,
style: {
flat: true,
controls: {
visible: false
},
borderAlpha: 0.1,
borderColor: '#fff',
label: {
overlap: false,
text: '%long-text'
},
hoverState: {
visible: false,
backgroundColor: 'none',
shadowAlpha: 0.2,
shadowDistance: 2,
shadow: true,
shadowColor: '#333'
}
}
}
}]
};
zingchart.bind('myChart', 'load', function() {
paintHeatmap();
});
window.paintHeatmap = function(iMax, bSmallBrush) {
var aData = [];
var iMaxPop = 0;
for (var i = 0; i < FR_POP_2010.length; i++) {
if (iMax && FR_POP_2010[i][2] > iMax) {
continue;
}
var fLon = FR_POP_2010[i][0],
fLat = FR_POP_2010[i][1],
iPop = FR_POP_2010[i][2];
var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
aData.push([aXY[0], aXY[1], iPop]);
iMaxPop = Math.max(iMaxPop, iPop);
}
zingchart.exec('myChart', 'colorscale.update', {
data: {
maxValue: iMaxPop
}
});
var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
zingchart.exec('myChart', 'heatmap.setdata', {
minValue: 0,
maxValue: oCSInfo.max,
data: aData,
size: bSmallBrush ? 4 : 12,
blur: bSmallBrush ? 0 : 6
});
}
zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
if (oInfo.value !== null) {
zingchart.exec(oInfo.id, 'colorscale.setvalue', {
graphid: oInfo.graphid,
value: oInfo.value
});
} else {
zingchart.exec(oInfo.id, 'colorscale.clear', {
graphid: oInfo.graphid
});
}
});
document.querySelector('#sc').addEventListener('click', function() {
if (this.checked) {
paintHeatmap(100000, true);
let maxpopRef = document.querySelector('#maxpop');
maxpopRef.value = 100000;
maxpopRef.removeAttribute('disabled')
} else {
paintHeatmap();
let maxpopRef = document.querySelector('#maxpop');
maxpopRef.setAttribute('disabled', 'disabled')
}
});
document.querySelector('#maxpop').addEventListener('change', function() {
paintHeatmap(this.value, true);
});
zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
output: 'canvas',
data: chartConfig,
modules: 'heatmap,color-scale'
});
});