<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
width: 100%;
height: 100%;
}
.control-bar {
margin: 0 auto;
padding: 0 0 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.control-bar.loaded {
display: flex !important;
opacity: 1;
}
.control-bar>div {
display: flex;
align-items: center;
}
.control-bar>*+* {
margin-left: 10px;
}
.control-bar span {
margin-left: 7px;
display: inline-block;
}
.control-bar select {
min-width: 45px;
height: 40px;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 4px;
}
.control-bar .sel-wide {
min-width: 60px;
}
.control-bar button {
min-width: 45px;
height: 40px;
cursor: pointer;
color: #fff;
background: #074361;
border: 1px solid #074361;
border-radius: 4px;
}
</style>
</head>
<body>
<div data-jsref="control-bar" class="control-bar">
<div>
<span>Population Pyramid Type: </span>
<select data-jsref="aspect">
<option value="hbar">hbar</option>
<option value="bar">bar</option>
<option value="area">area</option>
<option value="varea">varea</option>
<option value="line">line</option>
<option value="vline">vline</option>
</select>
<span>aspect</span>
</div>
<button data-jsref="renderBtn">Render</button>
</div>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DOM ELEMENTS
// -----------------------------
var controlBar = document.querySelector('[data-jsref="control-bar"]');
var aspect = document.querySelector('[data-jsref="aspect"]');
var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
renderBtn.addEventListener('click', render);
zingchart.render({
id: 'myChart',
data: {
"graphset": [{
"type": "pop-pyramid",
"options": {
"aspect": aspect.value
},
plot: {
stacked: true,
},
"scale-x": {
"values": ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-89", "90-94", "95-99", "100 + "]
},
"scale-y": {
"short": true
},
"series": [{
"data-side": 1,
"background-color": "#007DF0 #0055A4",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
},
{
"data-side": 2,
"background-color": "#94090D #D40D12",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
}
]
}]
},
height: "100%",
width: "100%"
});
function render() {
zingchart.render({
id: 'myChart',
data: {
"graphset": [{
"type": "pop-pyramid",
"options": {
"aspect": aspect.value
},
plot: {
stacked: true,
},
"scale-x": {
"values": ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-89", "90-94", "95-99", "100 + "]
},
"scale-y": {
"short": true
},
"series": [{
"data-side": 1,
"background-color": "#007DF0 #0055A4",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
},
{
"data-side": 2,
"background-color": "#94090D #D40D12",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
}
]
}]
},
height: "100%",
width: "100%"
});
}
</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>
</head>
<body>
<div data-jsref="control-bar" class="control-bar">
<div>
<span>Population Pyramid Type: </span>
<select data-jsref="aspect">
<option value="hbar">hbar</option>
<option value="bar">bar</option>
<option value="area">area</option>
<option value="varea">varea</option>
<option value="line">line</option>
<option value="vline">vline</option>
</select>
<span>aspect</span>
</div>
<button data-jsref="renderBtn">Render</button>
</div>
<div id='myChart'></div>
</body>
</html>
html,
body,
#myChart {
width: 100%;
height: 100%;
}
.control-bar {
margin: 0 auto;
padding: 0 0 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.control-bar.loaded {
display: flex !important;
opacity: 1;
}
.control-bar>div {
display: flex;
align-items: center;
}
.control-bar>*+* {
margin-left: 10px;
}
.control-bar span {
margin-left: 7px;
display: inline-block;
}
.control-bar select {
min-width: 45px;
height: 40px;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 4px;
}
.control-bar .sel-wide {
min-width: 60px;
}
.control-bar button {
min-width: 45px;
height: 40px;
cursor: pointer;
color: #fff;
background: #074361;
border: 1px solid #074361;
border-radius: 4px;
}
// DOM ELEMENTS
// -----------------------------
var controlBar = document.querySelector('[data-jsref="control-bar"]');
var aspect = document.querySelector('[data-jsref="aspect"]');
var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
renderBtn.addEventListener('click', render);
zingchart.render({
id: 'myChart',
data: {
"graphset": [{
"type": "pop-pyramid",
"options": {
"aspect": aspect.value
},
plot: {
stacked: true,
},
"scale-x": {
"values": ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-89", "90-94", "95-99", "100 + "]
},
"scale-y": {
"short": true
},
"series": [{
"data-side": 1,
"background-color": "#007DF0 #0055A4",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
},
{
"data-side": 2,
"background-color": "#94090D #D40D12",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
}
]
}]
},
height: "100%",
width: "100%"
});
function render() {
zingchart.render({
id: 'myChart',
data: {
"graphset": [{
"type": "pop-pyramid",
"options": {
"aspect": aspect.value
},
plot: {
stacked: true,
},
"scale-x": {
"values": ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-89", "90-94", "95-99", "100 + "]
},
"scale-y": {
"short": true
},
"series": [{
"data-side": 1,
"background-color": "#007DF0 #0055A4",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
},
{
"data-side": 2,
"background-color": "#94090D #D40D12",
"values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
}
]
}]
},
height: "100%",
width: "100%"
});
}