• Edit
  • Download
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .info {
    10.       padding: 1rem 0 0;
    11.       min-height: 680px;
    12.       background: #fff;
    13.       box-sizing: border-box;
    14.     }
    15.  
    16.     .control-bar {
    17.       margin: 0 auto;
    18.       padding: 0 0 1rem;
    19.       display: flex;
    20.       align-items: center;
    21.       justify-content: center;
    22.     }
    23.  
    24.     .control-bar.loaded {
    25.       display: flex !important;
    26.       opacity: 1;
    27.     }
    28.  
    29.     .control-bar>div {
    30.       display: flex;
    31.       align-items: center;
    32.     }
    33.  
    34.     .control-bar>*+* {
    35.       margin-left: 10px;
    36.     }
    37.  
    38.     .control-bar span {
    39.       margin-left: 7px;
    40.       display: inline-block;
    41.     }
    42.  
    43.     .control-bar select {
    44.       min-width: 45px;
    45.       height: 40px;
    46.       background: #fff;
    47.       border: 1px solid #ebebeb;
    48.       border-radius: 4px;
    49.     }
    50.  
    51.     .control-bar .sel-wide {
    52.       min-width: 60px;
    53.     }
    54.  
    55.     .control-bar button {
    56.       min-width: 45px;
    57.       height: 40px;
    58.       cursor: pointer;
    59.       color: #fff;
    60.       background: #074361;
    61.       border: 1px solid #074361;
    62.       border-radius: 4px;
    63.     }
    64.  
    65.     .zc-body {
    66.       background-color: #fff;
    67.     }
    68.  
    69.     .zc-ref {
    70.       display: none;
    71.     }
    72.   </style>
    73. </head>
    74.  
    75. <body class="zc-body">
    76.  
    77.   <div class="info">
    78.  
    79.     <div data-jsref="control-bar" class="control-bar">
    80.       <div>
    81.         <span>Bar Type: &nbsp;</span>
    82.         <select data-jsref="type">
    83.           <option value="vbar">Vertical (Column)</option>
    84.           <option value="hbar">Horizontal (Bar)</option>
    85.           <option value="vbar3d">3D (Vertical)</option>
    86.           <option value="hbar3d">3D (Horizontal)</option>
    87.         </select>
    88.       </div>
    89.       <div>
    90.         <span>with a &nbsp;</span>
    91.         <select data-jsref="aspect">
    92.           <option value="bar">rectangular</option>
    93.           <option value="cone">conical</option>
    94.           <option value="cylinder">cylindrical (3D only)</option>
    95.           <option value="pyramid">pyramidal (3D only)</option>
    96.           <option value="histogram">histogram</option>
    97.         </select>
    98.         <span>aspect and </span>
    99.       </div>
    100.       <div>
    101.         <select data-jsref="stacked">
    102.           <option value="false">no</option>
    103.           <option value="normal">normal</option>
    104.           <option value="100%">100%</option>
    105.         </select>
    106.         <span>stacking </span>
    107.       </div>
    108.       <button data-jsref="renderBtn">Render</button>
    109.     </div>
    110.  
    111.     <div id="myChart">
    112.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    113.     </div>
    114.  
    115.   </div>
    116.  
    117.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    118.   <script nonce="undefined" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    119.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>
    120.  
    121.   <script>
    122.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    123.     // -----------------------------
    124.     // Main chart render location
    125.     var chartId = 'myChart';
    126.  
    127.  
    128.  
    129.     // DOM ELEMENTS
    130.     // -----------------------------
    131.     var controlBar = document.querySelector('[data-jsref="control-bar"]');
    132.     var type = document.querySelector('[data-jsref="type"]');
    133.     var aspect = document.querySelector('[data-jsref="aspect"]');
    134.     var stacked = document.querySelector('[data-jsref="stacked"]');
    135.     var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    136.  
    137.     var stackedVal = stacked.value != 'false' ? true : false;
    138.     var stackType = stacked.value != 'false' ? stacked.value : "none";
    139.     // CHART CONFIG
    140.     // -----------------------------
    141.  
    142.     var cdata = {
    143.       type: "bar",
    144.       plot: {
    145.         aspect: aspect.value,
    146.         stacked: stackedVal,
    147.         'stack-type': stackType,
    148.       },
    149.       series: [{
    150.           values: [20, 40, 25, 50, 15, 45, 33, 34]
    151.         },
    152.         {
    153.           values: [5, 30, 21, 18, 59, 50, 28, 33]
    154.         },
    155.         {
    156.           values: [30, 5, 18, 21, 33, 41, 29, 15]
    157.         }
    158.       ]
    159.     };
    160.  
    161.  
    162.     renderBtn.addEventListener('click', render);
    163.  
    164.  
    165.     // HELPER FNS
    166.     // -----------------------------
    167.  
    168.     zingchart.render({
    169.       id: chartId,
    170.       width: '100%',
    171.       height: 600,
    172.       data: cdata,
    173.     });
    174.  
    175.     function render() {
    176.       stackedVal = stacked.value != 'false' ? true : false;
    177.       stackType = stacked.value != 'false' ? stacked.value : "none";
    178.       zingchart.exec('myChart', 'setcharttype', {
    179.         type: type.value
    180.       });
    181.       zingchart.exec('myChart', 'modify', {
    182.         object: 'plot',
    183.         data: {
    184.           aspect: aspect.value,
    185.           stacked: stackedVal,
    186.           'stack-type': stackType,
    187.         }
    188.       });
    189.     }
    190.   </script>
    191. </body>
    192.  
    193. </html>
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.  
    12.   <div class="info">
    13.  
    14.     <div data-jsref="control-bar" class="control-bar">
    15.       <div>
    16.         <span>Bar Type: &nbsp;</span>
    17.         <select data-jsref="type">
    18.           <option value="vbar">Vertical (Column)</option>
    19.           <option value="hbar">Horizontal (Bar)</option>
    20.           <option value="vbar3d">3D (Vertical)</option>
    21.           <option value="hbar3d">3D (Horizontal)</option>
    22.         </select>
    23.       </div>
    24.       <div>
    25.         <span>with a &nbsp;</span>
    26.         <select data-jsref="aspect">
    27.           <option value="bar">rectangular</option>
    28.           <option value="cone">conical</option>
    29.           <option value="cylinder">cylindrical (3D only)</option>
    30.           <option value="pyramid">pyramidal (3D only)</option>
    31.           <option value="histogram">histogram</option>
    32.         </select>
    33.         <span>aspect and </span>
    34.       </div>
    35.       <div>
    36.         <select data-jsref="stacked">
    37.           <option value="false">no</option>
    38.           <option value="normal">normal</option>
    39.           <option value="100%">100%</option>
    40.         </select>
    41.         <span>stacking </span>
    42.       </div>
    43.       <button data-jsref="renderBtn">Render</button>
    44.     </div>
    45.  
    46.     <div id="myChart">
    47.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    48.     </div>
    49.  
    50.   </div>
    51.  
    52.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    53.   <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    54.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>
    55.  
    56. </body>
    57.  
    58. </html>
    1. .info {
    2.   padding: 1rem 0 0;
    3.   min-height: 680px;
    4.   background: #fff;
    5.   box-sizing: border-box;
    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. }
    56.  
    57. .zc-body {
    58.   background-color: #fff;
    59. }
    60.  
    61. .zc-ref {
    62.   display: none;
    63. }
    1. // DEFINE CHART LOCATIONS (IDS)
    2. // -----------------------------
    3. // Main chart render location
    4. var chartId = 'myChart';
    5.  
    6.  
    7.  
    8. // DOM ELEMENTS
    9. // -----------------------------
    10. var controlBar = document.querySelector('[data-jsref="control-bar"]');
    11. var type = document.querySelector('[data-jsref="type"]');
    12. var aspect = document.querySelector('[data-jsref="aspect"]');
    13. var stacked = document.querySelector('[data-jsref="stacked"]');
    14. var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    15.  
    16. var stackedVal = stacked.value != 'false' ? true : false;
    17. var stackType = stacked.value != 'false' ? stacked.value : "none";
    18. // CHART CONFIG
    19. // -----------------------------
    20.  
    21. var cdata = {
    22.   type: "bar",
    23.   plot: {
    24.     aspect: aspect.value,
    25.     stacked: stackedVal,
    26.     'stack-type': stackType,
    27.   },
    28.   series: [{
    29.       values: [20, 40, 25, 50, 15, 45, 33, 34]
    30.     },
    31.     {
    32.       values: [5, 30, 21, 18, 59, 50, 28, 33]
    33.     },
    34.     {
    35.       values: [30, 5, 18, 21, 33, 41, 29, 15]
    36.     }
    37.   ]
    38. };
    39.  
    40.  
    41. renderBtn.addEventListener('click', render);
    42.  
    43.  
    44. // HELPER FNS
    45. // -----------------------------
    46.  
    47. zingchart.render({
    48.   id: chartId,
    49.   width: '100%',
    50.   height: 600,
    51.   data: cdata,
    52. });
    53.  
    54. function render() {
    55.   stackedVal = stacked.value != 'false' ? true : false;
    56.   stackType = stacked.value != 'false' ? stacked.value : "none";
    57.   zingchart.exec('myChart', 'setcharttype', {
    58.     type: type.value
    59.   });
    60.   zingchart.exec('myChart', 'modify', {
    61.     object: 'plot',
    62.     data: {
    63.       aspect: aspect.value,
    64.       stacked: stackedVal,
    65.       'stack-type': stackType,
    66.     }
    67.   });
    68. }