<!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: #f9f9f9;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 650px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let data = [
['Baden-Württemberg', 9, 48.5, 45.7, 38.3, 14.1, 'BW'],
['Bayern', 12, 49, 49.4, 35.0, 11.3, 'BY'],
['Berlin', 13.24, 52.5, 4.2, 18.3, 70.3, 'BE'],
['Brandenburg', 14, 51.8, 49.4, 35.4, 9.2, 'BR'],
['Bremen', 8.8, 53.07, 28.9, 1.9, 55.4, 'HB'],
['Hamburg', 10, 53.5, 24.7, 6.2, 59.7, 'HH'],
['Hesssen', 9, 50.8, 42.1, 40.1, 15.5, 'HE'],
['Mecklenburg-Vorpommern', 13, 53.8, 62.7, 21.7, 8.0, 'MV'],
['Niedersachsen', 10, 52.5, 60.1, 21.7, 13.6, 'NI'],
['Nordrhein-Westfalen', 7.5, 51.5, 49.1, 25.6, 22.4, 'NW'],
['Rheinland-Pfalz', 7, 50, 41.9, 42.0, 14.2, 'RP'],
['Saarland', 6.9, 49.4, 43.2, 33.9, 20.7, 'SL'],
['Sachsen', 13.5, 51, 55.1, 27.2, 12.5, 'SN'],
['Sachsen-Anhalt', 11.5, 52, 61.8, 24.4, 11.0, 'ST'],
['Schleswig-Holstein', 9.5, 54.2, 69.8, 10.5, 12.6, 'SH'],
['Thüringen', 11, 51, 54.4, 31.9, 9.3, 'TH'],
];
// better placement to avoid pie overlap
let oOffsets = {
RP: [15, -15],
};
let _r_ = function(min, max) {
return Math.round(min + (max - min) * Math.random());
};
let getNameById = function(sId) {
let sName = 'N/A';
for (let i = 0; i < data.length; i++) {
if (sId === data[i][6]) {
sName = data[i][0];
}
}
return sName;
};
let oCacheDataArea = {};
let getRandomDataArea = function(sId) {
if (oCacheDataArea[sId]) {
return oCacheDataArea[sId];
}
let aValues = [
[],
[],
[],
[]
];
for (let i = 0; i < data.length; i++) {
let v0 = _r_(5, 15);
let v1 = _r_(25, 35);
let v3 = _r_(5, 10);
let v2 = 100 - v0 - v1 - v3;
aValues[0].push(v0);
aValues[1].push(v1);
aValues[2].push(v2);
aValues[3].push(v3);
}
oCacheDataArea[sId] = aValues;
return aValues;
};
let oCacheDataPop = {};
let getRandomDataPop = function(sId) {
if (oCacheDataPop[sId]) {
return oCacheDataPop[sId];
}
let aValues = [];
let iPop = ZC._r_(2000000, 8000000);
for (let i = 0; i < data.length; i++) {
aValues.push(iPop);
iPop += _r_(-20000, 20000);
}
oCacheDataPop[sId] = [aValues];
return [aValues];
};
let updateAreaPopCharts = function(sId) {
zingchart.exec('myChart', 'setdata', {
graphid: 'gmap',
data: getMapData(sId),
update: false,
});
zingchart.exec('myChart', 'modify', {
graphid: 'histarea',
data: {
subtitle: {
text: getNameById(sId),
},
},
update: false,
});
zingchart.exec('myChart', 'modify', {
graphid: 'histpop',
data: {
subtitle: {
text: getNameById(sId),
},
},
update: false,
});
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 'histarea',
values: getRandomDataArea(sId),
update: false,
});
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 'histpop',
values: getRandomDataPop(sId),
update: false,
});
zingchart.exec('myChart', 'update');
};
zingchart.bind('myChart', 'node_click', function(p) {
if (p.graphid.indexOf('zc-graph-pie') === 0) {
updateAreaPopCharts(p.graphid.replace('zc-graph-pie', ''));
}
});
zingchart.bind('myChart', 'shape_click', function(p) {
if (p.shape.mapItem) {
updateAreaPopCharts(p.shape.id);
}
});
let addPieGraphs = function() {
for (let i = 0; i < data.length; i++) {
let info = data[i];
let xy = zingchart.maps.getXY('mapdeu', [info[1], info[2]]);
let oGraph = {
type: 'pie',
id: 'pie' + info[6],
backgroundColor: 'none',
height: '50px',
width: '160px',
x: xy[0] - 80 + (oOffsets[info[6]] ? oOffsets[info[6]][0] : 0),
y: xy[1] - 25 + (oOffsets[info[6]] ? oOffsets[info[6]][1] : 0),
title: {
text: info[0],
fontSize: '10px',
fontWeight: 'bold',
offsetY: '40px',
},
plot: {
tooltip: {
padding: '10px',
fontSize: '13px',
fontWeight: 'bold',
text: '%node-value% in %plot-text',
},
valueBox: {
visible: false,
},
alpha: 0.75,
borderWidth: '0px',
detach: false,
},
plotarea: {
margin: '2px',
},
series: [{
text: 'Settlement Area',
values: [info[5]],
backgroundColor: '#d15c5c',
},
{
text: 'Forest Area',
values: [info[4]],
backgroundColor: '#56b556',
},
{
text: 'Agriculture',
values: [info[3]],
backgroundColor: '#e5e510',
},
{
text: 'Other',
values: [Number((100 - info[3] - info[4] - info[5]).toFixed(1))],
backgroundColor: '#999',
},
],
};
zingchart.exec('myChart', 'addgraph', {
data: oGraph,
update: false,
});
}
zingchart.exec('myChart', 'update');
};
let getMapData = function(sId) {
let oGraphMainMap = {
type: 'null',
id: 'gmap',
backgroundColor: 'none',
height: '600px',
width: '800px',
x: '0px',
y: '0px',
title: {
text: 'Shares of agricultural, forest and settlement areas, Germany 2021 (*)',
align: 'left',
fontSize: '15px',
paddingLeft: '20px',
},
shapes: [{
type: 'zingchart.maps',
options: {
height: '580px',
id: 'mapdeu',
name: 'deu',
panning: false,
scale: true,
scrolling: false,
style: {
backgroundColor: '#f9f9f9',
borderColor: '#666',
controls: {
visible: false,
},
hoverState: {
visible: false,
},
items: {},
label: {
visible: false,
},
},
width: '480px',
x: '0px',
y: '20px',
zooming: false,
},
}, ],
source: {
text: '(*) random data',
offsetX: '-350px',
},
};
oGraphMainMap.shapes[0].options.style.items[sId] = {
backgroundColor: '#eeeeee #c2edc3',
};
return oGraphMainMap;
};
let aAreaValues = getRandomDataArea(data[0][6]);
let oGraphHistoryArea = {
type: 'bar',
id: 'histarea',
backgroundColor: 'none',
height: '200px',
stacked: true,
width: '300px',
x: '480px',
y: '60px',
title: {
text: 'Historic data of area distribution (*)',
fontSize: '14px',
},
subtitle: {
text: getNameById(data[0][6]),
fontSize: '12px',
offsetY: '-5px',
},
plot: {
tooltip: {
text: '%plot-text in %scale-key-text: %node-value%',
},
alpha: 0.75,
animation: {
effect: 'ANIMATION_FADE_IN',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_BY_NODE',
speed: 200,
},
},
plotarea: {
margin: '55 5 35 35',
},
scaleX: {
values: '2012:2021:1',
itemsOverlap: true,
item: {
fontSize: '9px',
},
maxItems: 99,
},
scaleY: {
format: '%v%',
item: {
fontSize: '10px',
},
},
source: {
text: '(*) random data',
},
series: [{
text: 'Settlement Area',
values: aAreaValues[0],
backgroundColor: '#D87676',
},
{
text: 'Forest Area',
values: aAreaValues[1],
backgroundColor: '#56b556',
},
{
text: 'Agrigulture',
values: aAreaValues[2],
backgroundColor: '#e5e510',
},
{
text: 'Other',
values: aAreaValues[3],
backgroundColor: '#999',
},
],
};
let aPopValues = getRandomDataPop(data[0][6]);
let oGraphHistoryPop = {
type: 'area',
id: 'histpop',
backgroundColor: 'none',
height: '200px',
width: '300px',
x: '480px',
y: '280px',
title: {
text: 'Historic data of population size (*)',
fontSize: '14px',
},
subtitle: {
text: getNameById(data[0][6]),
fontSize: '12px',
offsetY: '-5px',
},
plot: {
tooltip: {
text: 'Population in %scale-key-text: %node-value',
decimals: 4,
short: true,
},
alpha: 0.75,
animation: {
effect: 'ANIMATION_FADE_IN',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_BY_NODE',
speed: 200,
},
},
plotarea: {
margin: '55 5 35 35',
},
scaleX: {
values: '2012:2021:1',
item: {
fontSize: '9px',
},
itemsOverlap: true,
maxItems: 99,
},
scaleY: {
minValue: 'auto',
decimals: 2,
item: {
fontSize: '10px',
},
short: true,
},
source: {
text: '(*) random data',
},
series: [{
values: aPopValues[0],
backgroundColor: '#333 #fff',
lineColor: '#333',
marker: {
type: 'diamond',
backgroundColor: '#666',
},
}, ],
};
let oGraphLegend = {
type: 'pie',
id: 'pielegend',
backgroundColor: 'none',
height: '60px',
width: '300px',
x: '480px',
y: '500px',
plotarea: {
margin: '2px',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%plot-text',
align: 'left',
alpha: 0.6,
borderWidth: '0px',
color: '#333',
connector: {
visible: false,
},
flat: true,
fontSize: '10px',
fontWeight: 'bold',
maxTrackers: 0,
offsetR: -25,
placement: 'out',
},
},
scale: {
sizeFactor: 0.8,
},
series: [{
text: 'Settlement Area',
values: [1],
backgroundColor: '#d15c5c',
},
{
text: 'Forest Area',
values: [1],
backgroundColor: '#56b556',
},
{
text: 'Agriculture',
values: [1],
backgroundColor: '#e5e510',
},
{
text: 'Other',
values: [1],
backgroundColor: '#999',
},
],
};
let chartConfig = {
flat: true,
backgroundColor: '#f3f3f3 #e3e3e3',
borderColor: '#999',
borderWidth: '1px',
graphset: [
getMapData(data[0][6]),
oGraphHistoryArea,
oGraphHistoryPop,
oGraphLegend,
],
};
let bInit = true;
zingchart.bind('myChart', 'load', function() {
if (bInit) {
bInit = false;
addPieGraphs();
}
});
zingchart.DEV.MAPSONBOTTOM = 1;
// renders chart
zingchart.loadModules('maps, maps-deu', function(e) {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
let data = [
['Baden-Württemberg', 9, 48.5, 45.7, 38.3, 14.1, 'BW'],
['Bayern', 12, 49, 49.4, 35.0, 11.3, 'BY'],
['Berlin', 13.24, 52.5, 4.2, 18.3, 70.3, 'BE'],
['Brandenburg', 14, 51.8, 49.4, 35.4, 9.2, 'BR'],
['Bremen', 8.8, 53.07, 28.9, 1.9, 55.4, 'HB'],
['Hamburg', 10, 53.5, 24.7, 6.2, 59.7, 'HH'],
['Hesssen', 9, 50.8, 42.1, 40.1, 15.5, 'HE'],
['Mecklenburg-Vorpommern', 13, 53.8, 62.7, 21.7, 8.0, 'MV'],
['Niedersachsen', 10, 52.5, 60.1, 21.7, 13.6, 'NI'],
['Nordrhein-Westfalen', 7.5, 51.5, 49.1, 25.6, 22.4, 'NW'],
['Rheinland-Pfalz', 7, 50, 41.9, 42.0, 14.2, 'RP'],
['Saarland', 6.9, 49.4, 43.2, 33.9, 20.7, 'SL'],
['Sachsen', 13.5, 51, 55.1, 27.2, 12.5, 'SN'],
['Sachsen-Anhalt', 11.5, 52, 61.8, 24.4, 11.0, 'ST'],
['Schleswig-Holstein', 9.5, 54.2, 69.8, 10.5, 12.6, 'SH'],
['Thüringen', 11, 51, 54.4, 31.9, 9.3, 'TH'],
];
// better placement to avoid pie overlap
let oOffsets = {
RP: [15, -15],
};
let _r_ = function (min, max) {
return Math.round(min + (max - min) * Math.random());
};
let getNameById = function (sId) {
let sName = 'N/A';
for (let i = 0; i < data.length; i++) {
if (sId === data[i][6]) {
sName = data[i][0];
}
}
return sName;
};
let oCacheDataArea = {};
let getRandomDataArea = function (sId) {
if (oCacheDataArea[sId]) {
return oCacheDataArea[sId];
}
let aValues = [[], [], [], []];
for (let i = 0; i < data.length; i++) {
let v0 = _r_(5, 15);
let v1 = _r_(25, 35);
let v3 = _r_(5, 10);
let v2 = 100 - v0 - v1 - v3;
aValues[0].push(v0);
aValues[1].push(v1);
aValues[2].push(v2);
aValues[3].push(v3);
}
oCacheDataArea[sId] = aValues;
return aValues;
};
let oCacheDataPop = {};
let getRandomDataPop = function (sId) {
if (oCacheDataPop[sId]) {
return oCacheDataPop[sId];
}
let aValues = [];
let iPop = ZC._r_(2000000, 8000000);
for (let i = 0; i < data.length; i++) {
aValues.push(iPop);
iPop += _r_(-20000, 20000);
}
oCacheDataPop[sId] = [aValues];
return [aValues];
};
let updateAreaPopCharts = function (sId) {
zingchart.exec('myChart', 'setdata', {
graphid: 'gmap',
data: getMapData(sId),
update: false,
});
zingchart.exec('myChart', 'modify', {
graphid: 'histarea',
data: {
subtitle: {
text: getNameById(sId),
},
},
update: false,
});
zingchart.exec('myChart', 'modify', {
graphid: 'histpop',
data: {
subtitle: {
text: getNameById(sId),
},
},
update: false,
});
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 'histarea',
values: getRandomDataArea(sId),
update: false,
});
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 'histpop',
values: getRandomDataPop(sId),
update: false,
});
zingchart.exec('myChart', 'update');
};
zingchart.bind('myChart', 'node_click', function (p) {
if (p.graphid.indexOf('zc-graph-pie') === 0) {
updateAreaPopCharts(p.graphid.replace('zc-graph-pie', ''));
}
});
zingchart.bind('myChart', 'shape_click', function (p) {
if (p.shape.mapItem) {
updateAreaPopCharts(p.shape.id);
}
});
let addPieGraphs = function () {
for (let i = 0; i < data.length; i++) {
let info = data[i];
let xy = zingchart.maps.getXY('mapdeu', [info[1], info[2]]);
let oGraph = {
type: 'pie',
id: 'pie' + info[6],
backgroundColor: 'none',
height: '50px',
width: '160px',
x: xy[0] - 80 + (oOffsets[info[6]] ? oOffsets[info[6]][0] : 0),
y: xy[1] - 25 + (oOffsets[info[6]] ? oOffsets[info[6]][1] : 0),
title: {
text: info[0],
fontSize: '10px',
fontWeight: 'bold',
offsetY: '40px',
},
plot: {
tooltip: {
padding: '10px',
fontSize: '13px',
fontWeight: 'bold',
text: '%node-value% in %plot-text',
},
valueBox: {
visible: false,
},
alpha: 0.75,
borderWidth: '0px',
detach: false,
},
plotarea: {
margin: '2px',
},
series: [
{
text: 'Settlement Area',
values: [info[5]],
backgroundColor: '#d15c5c',
},
{
text: 'Forest Area',
values: [info[4]],
backgroundColor: '#56b556',
},
{
text: 'Agriculture',
values: [info[3]],
backgroundColor: '#e5e510',
},
{
text: 'Other',
values: [Number((100 - info[3] - info[4] - info[5]).toFixed(1))],
backgroundColor: '#999',
},
],
};
zingchart.exec('myChart', 'addgraph', {
data: oGraph,
update: false,
});
}
zingchart.exec('myChart', 'update');
};
let getMapData = function (sId) {
let oGraphMainMap = {
type: 'null',
id: 'gmap',
backgroundColor: 'none',
height: '600px',
width: '800px',
x: '0px',
y: '0px',
title: {
text: 'Shares of agricultural, forest and settlement areas, Germany 2021 (*)',
align: 'left',
fontSize: '15px',
paddingLeft: '20px',
},
shapes: [
{
type: 'zingchart.maps',
options: {
height: '580px',
id: 'mapdeu',
name: 'deu',
panning: false,
scale: true,
scrolling: false,
style: {
backgroundColor: '#f9f9f9',
borderColor: '#666',
controls: {
visible: false,
},
hoverState: {
visible: false,
},
items: {},
label: {
visible: false,
},
},
width: '480px',
x: '0px',
y: '20px',
zooming: false,
},
},
],
source: {
text: '(*) random data',
offsetX: '-350px',
},
};
oGraphMainMap.shapes[0].options.style.items[sId] = {
backgroundColor: '#eeeeee #c2edc3',
};
return oGraphMainMap;
};
let aAreaValues = getRandomDataArea(data[0][6]);
let oGraphHistoryArea = {
type: 'bar',
id: 'histarea',
backgroundColor: 'none',
height: '200px',
stacked: true,
width: '300px',
x: '480px',
y: '60px',
title: {
text: 'Historic data of area distribution (*)',
fontSize: '14px',
},
subtitle: {
text: getNameById(data[0][6]),
fontSize: '12px',
offsetY: '-5px',
},
plot: {
tooltip: {
text: '%plot-text in %scale-key-text: %node-value%',
},
alpha: 0.75,
animation: {
effect: 'ANIMATION_FADE_IN',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_BY_NODE',
speed: 200,
},
},
plotarea: {
margin: '55 5 35 35',
},
scaleX: {
values: '2012:2021:1',
itemsOverlap: true,
item: {
fontSize: '9px',
},
maxItems: 99,
},
scaleY: {
format: '%v%',
item: {
fontSize: '10px',
},
},
source: {
text: '(*) random data',
},
series: [
{
text: 'Settlement Area',
values: aAreaValues[0],
backgroundColor: '#D87676',
},
{
text: 'Forest Area',
values: aAreaValues[1],
backgroundColor: '#56b556',
},
{
text: 'Agrigulture',
values: aAreaValues[2],
backgroundColor: '#e5e510',
},
{
text: 'Other',
values: aAreaValues[3],
backgroundColor: '#999',
},
],
};
let aPopValues = getRandomDataPop(data[0][6]);
let oGraphHistoryPop = {
type: 'area',
id: 'histpop',
backgroundColor: 'none',
height: '200px',
width: '300px',
x: '480px',
y: '280px',
title: {
text: 'Historic data of population size (*)',
fontSize: '14px',
},
subtitle: {
text: getNameById(data[0][6]),
fontSize: '12px',
offsetY: '-5px',
},
plot: {
tooltip: {
text: 'Population in %scale-key-text: %node-value',
decimals: 4,
short: true,
},
alpha: 0.75,
animation: {
effect: 'ANIMATION_FADE_IN',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_BY_NODE',
speed: 200,
},
},
plotarea: {
margin: '55 5 35 35',
},
scaleX: {
values: '2012:2021:1',
item: {
fontSize: '9px',
},
itemsOverlap: true,
maxItems: 99,
},
scaleY: {
minValue: 'auto',
decimals: 2,
item: {
fontSize: '10px',
},
short: true,
},
source: {
text: '(*) random data',
},
series: [
{
values: aPopValues[0],
backgroundColor: '#333 #fff',
lineColor: '#333',
marker: {
type: 'diamond',
backgroundColor: '#666',
},
},
],
};
let oGraphLegend = {
type: 'pie',
id: 'pielegend',
backgroundColor: 'none',
height: '60px',
width: '300px',
x: '480px',
y: '500px',
plotarea: {
margin: '2px',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%plot-text',
align: 'left',
alpha: 0.6,
borderWidth: '0px',
color: '#333',
connector: {
visible: false,
},
flat: true,
fontSize: '10px',
fontWeight: 'bold',
maxTrackers: 0,
offsetR: -25,
placement: 'out',
},
},
scale: {
sizeFactor: 0.8,
},
series: [
{
text: 'Settlement Area',
values: [1],
backgroundColor: '#d15c5c',
},
{
text: 'Forest Area',
values: [1],
backgroundColor: '#56b556',
},
{
text: 'Agriculture',
values: [1],
backgroundColor: '#e5e510',
},
{
text: 'Other',
values: [1],
backgroundColor: '#999',
},
],
};
let chartConfig = {
flat: true,
backgroundColor: '#f3f3f3 #e3e3e3',
borderColor: '#999',
borderWidth: '1px',
graphset: [
getMapData(data[0][6]),
oGraphHistoryArea,
oGraphHistoryPop,
oGraphLegend,
],
};
let bInit = true;
zingchart.bind('myChart', 'load', function () {
if (bInit) {
bInit = false;
addPieGraphs();
}
});
zingchart.DEV.MAPSONBOTTOM = 1;
// renders chart
zingchart.loadModules('maps, maps-deu', function (e) {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
