• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .control-bar {
    18.       margin: 0 auto;
    19.       padding: 0 0 1rem;
    20.       display: flex;
    21.       align-items: center;
    22.       justify-content: center;
    23.     }
    24.  
    25.     .control-bar.loaded {
    26.       display: flex !important;
    27.       opacity: 1;
    28.     }
    29.  
    30.     .control-bar>div {
    31.       display: flex;
    32.       align-items: center;
    33.     }
    34.  
    35.     .control-bar>*+* {
    36.       margin-left: 10px;
    37.     }
    38.  
    39.     .control-bar span {
    40.       margin-left: 7px;
    41.       display: inline-block;
    42.     }
    43.  
    44.     .control-bar select {
    45.       min-width: 45px;
    46.       height: 40px;
    47.       background: #fff;
    48.       border: 1px solid #ebebeb;
    49.       border-radius: 4px;
    50.     }
    51.  
    52.     .control-bar .sel-wide {
    53.       min-width: 60px;
    54.     }
    55.  
    56.     .control-bar button {
    57.       min-width: 45px;
    58.       height: 40px;
    59.       cursor: pointer;
    60.       color: #fff;
    61.       background: #074361;
    62.       border: 1px solid #074361;
    63.       border-radius: 4px;
    64.     }
    65.   </style>
    66. </head>
    67.  
    68. <body>
    69.   <div data-jsref="control-bar" class="control-bar">
    70.     <div>
    71.       <span>Population Pyramid Type: &nbsp;</span>
    72.       <select data-jsref="aspect">
    73.         <option value="hbar">hbar</option>
    74.         <option value="bar">bar</option>
    75.         <option value="area">area</option>
    76.         <option value="varea">varea</option>
    77.         <option value="line">line</option>
    78.         <option value="vline">vline</option>
    79.       </select>
    80.       <span>aspect</span>
    81.     </div>
    82.     <button data-jsref="renderBtn">Render</button>
    83.   </div>
    84.   <div id='myChart'></div>
    85.   <script>
    86.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DOM ELEMENTS
    87.     // -----------------------------
    88.     var controlBar = document.querySelector('[data-jsref="control-bar"]');
    89.     var aspect = document.querySelector('[data-jsref="aspect"]');
    90.     var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    91.  
    92.     renderBtn.addEventListener('click', render);
    93.  
    94.     zingchart.render({
    95.       id: 'myChart',
    96.       data: {
    97.         "graphset": [{
    98.           "type": "pop-pyramid",
    99.           "options": {
    100.             "aspect": aspect.value
    101.           },
    102.           plot: {
    103.             stacked: true,
    104.           },
    105.           "scale-x": {
    106.             "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 + "]
    107.           },
    108.           "scale-y": {
    109.             "short": true
    110.           },
    111.           "series": [{
    112.               "data-side": 1,
    113.               "background-color": "#007DF0 #0055A4",
    114.               "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    115.             },
    116.             {
    117.               "data-side": 2,
    118.               "background-color": "#94090D #D40D12",
    119.               "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    120.             }
    121.           ]
    122.         }]
    123.       },
    124.       height: "100%",
    125.       width: "100%"
    126.     });
    127.  
    128.     function render() {
    129.       zingchart.render({
    130.         id: 'myChart',
    131.         data: {
    132.           "graphset": [{
    133.             "type": "pop-pyramid",
    134.             "options": {
    135.               "aspect": aspect.value
    136.             },
    137.             plot: {
    138.               stacked: true,
    139.             },
    140.             "scale-x": {
    141.               "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 + "]
    142.             },
    143.             "scale-y": {
    144.               "short": true
    145.             },
    146.             "series": [{
    147.                 "data-side": 1,
    148.                 "background-color": "#007DF0 #0055A4",
    149.                 "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    150.               },
    151.               {
    152.                 "data-side": 2,
    153.                 "background-color": "#94090D #D40D12",
    154.                 "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    155.               }
    156.             ]
    157.           }]
    158.         },
    159.         height: "100%",
    160.         width: "100%"
    161.       });
    162.     }
    163.   </script>
    164. </body>
    165.  
    166. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div data-jsref="control-bar" class="control-bar">
    13.     <div>
    14.       <span>Population Pyramid Type: &nbsp;</span>
    15.       <select data-jsref="aspect">
    16.         <option value="hbar">hbar</option>
    17.         <option value="bar">bar</option>
    18.         <option value="area">area</option>
    19.         <option value="varea">varea</option>
    20.         <option value="line">line</option>
    21.         <option value="vline">vline</option>
    22.       </select>
    23.       <span>aspect</span>
    24.     </div>
    25.     <button data-jsref="renderBtn">Render</button>
    26.   </div>
    27.   <div id='myChart'></div>
    28. </body>
    29.  
    30. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   width: 100%;
    5.   height: 100%;
    6. }
    7.  
    8. .control-bar {
    9.   margin: 0 auto;
    10.   padding: 0 0 1rem;
    11.   display: flex;
    12.   align-items: center;
    13.   justify-content: center;
    14. }
    15.  
    16. .control-bar.loaded {
    17.   display: flex !important;
    18.   opacity: 1;
    19. }
    20.  
    21. .control-bar>div {
    22.   display: flex;
    23.   align-items: center;
    24. }
    25.  
    26. .control-bar>*+* {
    27.   margin-left: 10px;
    28. }
    29.  
    30. .control-bar span {
    31.   margin-left: 7px;
    32.   display: inline-block;
    33. }
    34.  
    35. .control-bar select {
    36.   min-width: 45px;
    37.   height: 40px;
    38.   background: #fff;
    39.   border: 1px solid #ebebeb;
    40.   border-radius: 4px;
    41. }
    42.  
    43. .control-bar .sel-wide {
    44.   min-width: 60px;
    45. }
    46.  
    47. .control-bar button {
    48.   min-width: 45px;
    49.   height: 40px;
    50.   cursor: pointer;
    51.   color: #fff;
    52.   background: #074361;
    53.   border: 1px solid #074361;
    54.   border-radius: 4px;
    55. }
    1. // DOM ELEMENTS
    2. // -----------------------------
    3. var controlBar = document.querySelector('[data-jsref="control-bar"]');
    4. var aspect = document.querySelector('[data-jsref="aspect"]');
    5. var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    6.  
    7. renderBtn.addEventListener('click', render);
    8.  
    9. zingchart.render({
    10.   id: 'myChart',
    11.   data: {
    12.     "graphset": [{
    13.       "type": "pop-pyramid",
    14.       "options": {
    15.         "aspect": aspect.value
    16.       },
    17.       plot: {
    18.         stacked: true,
    19.       },
    20.       "scale-x": {
    21.         "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 + "]
    22.       },
    23.       "scale-y": {
    24.         "short": true
    25.       },
    26.       "series": [{
    27.           "data-side": 1,
    28.           "background-color": "#007DF0 #0055A4",
    29.           "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    30.         },
    31.         {
    32.           "data-side": 2,
    33.           "background-color": "#94090D #D40D12",
    34.           "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    35.         }
    36.       ]
    37.     }]
    38.   },
    39.   height: "100%",
    40.   width: "100%"
    41. });
    42.  
    43. function render() {
    44.   zingchart.render({
    45.     id: 'myChart',
    46.     data: {
    47.       "graphset": [{
    48.         "type": "pop-pyramid",
    49.         "options": {
    50.           "aspect": aspect.value
    51.         },
    52.         plot: {
    53.           stacked: true,
    54.         },
    55.         "scale-x": {
    56.           "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 + "]
    57.         },
    58.         "scale-y": {
    59.           "short": true
    60.         },
    61.         "series": [{
    62.             "data-side": 1,
    63.             "background-color": "#007DF0 #0055A4",
    64.             "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    65.           },
    66.           {
    67.             "data-side": 2,
    68.             "background-color": "#94090D #D40D12",
    69.             "values": [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 1330870, 1130632, 1121208]
    70.           }
    71.         ]
    72.       }]
    73.     },
    74.     height: "100%",
    75.     width: "100%"
    76.   });
    77. }