<!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%" }); }