• 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>Area Type: &nbsp;</span>
    82.         <select data-jsref="type">
    83.           <option value="area">Horizontal</option>
    84.           <option value="varea">Vertical</option>
    85.           <option value="area3d">3D (Horizontal)</option>
    86.         </select>
    87.       </div>
    88.       <div>
    89.         <span>with a &nbsp;</span>
    90.         <select data-jsref="aspect">
    91.           <option value="segmented">segmented</option>
    92.           <option value="spline">spline</option>
    93.           <option value="stepped">stepped</option>
    94.         </select>
    95.         <span>aspect and </span>
    96.       </div>
    97.       <div>
    98.         <select data-jsref="stacked">
    99.           <option value="false">no</option>
    100.           <option value="normal">normal</option>
    101.           <option value="100%">100%</option>
    102.         </select>
    103.         <span>stacking </span>
    104.       </div>
    105.       <button data-jsref="renderBtn">Render</button>
    106.     </div>
    107.  
    108.     <div id="myChart">
    109.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    110.     </div>
    111.  
    112.   </div>
    113.  
    114.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    115.   <script nonce="undefined" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    116.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>
    117.  
    118.   <script>
    119.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    120.     // -----------------------------
    121.     // Main chart render location
    122.     var chartId = 'myChart';
    123.  
    124.  
    125.  
    126.     // DOM ELEMENTS
    127.     // -----------------------------
    128.     var controlBar = document.querySelector('[data-jsref="control-bar"]');
    129.     var type = document.querySelector('[data-jsref="type"]');
    130.     var aspect = document.querySelector('[data-jsref="aspect"]');
    131.     var stacked = document.querySelector('[data-jsref="stacked"]');
    132.     var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    133.  
    134.  
    135.     // CHART CONFIG
    136.     // -----------------------------
    137.  
    138.     var cdata = {
    139.       type: type.value,
    140.       plot: {
    141.         aspect: aspect.value,
    142.       },
    143.       series: [{
    144.           values: [20, 40, 25, 50, 15, 45, 33, 34]
    145.         },
    146.         {
    147.           values: [5, 30, 21, 18, 59, 50, 28, 33]
    148.         },
    149.         {
    150.           values: [30, 5, 18, 21, 33, 41, 29, 15]
    151.         }
    152.       ]
    153.     };
    154.  
    155.  
    156.     renderBtn.addEventListener('click', render);
    157.  
    158.  
    159.     // HELPER FNS
    160.     // -----------------------------
    161.  
    162.     zingchart.render({
    163.       id: chartId,
    164.       width: '100%',
    165.       height: 600,
    166.       data: cdata,
    167.     });
    168.  
    169.     function render() {
    170.       var stackedVal = stacked.value != 'false' ? true : false;
    171.       var stackType = stacked.value != 'false' ? stacked.value : "none";
    172.       zingchart.exec('myChart', 'setcharttype', {
    173.         type: type.value
    174.       });
    175.       zingchart.exec('myChart', 'modify', {
    176.         object: 'plot',
    177.         data: {
    178.           aspect: aspect.value,
    179.           stacked: stackedVal,
    180.           'stack-type': stackType,
    181.         }
    182.       });
    183.     }
    184.   </script>
    185. </body>
    186.  
    187. </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>Area Type: &nbsp;</span>
    17.         <select data-jsref="type">
    18.           <option value="area">Horizontal</option>
    19.           <option value="varea">Vertical</option>
    20.           <option value="area3d">3D (Horizontal)</option>
    21.         </select>
    22.       </div>
    23.       <div>
    24.         <span>with a &nbsp;</span>
    25.         <select data-jsref="aspect">
    26.           <option value="segmented">segmented</option>
    27.           <option value="spline">spline</option>
    28.           <option value="stepped">stepped</option>
    29.         </select>
    30.         <span>aspect and </span>
    31.       </div>
    32.       <div>
    33.         <select data-jsref="stacked">
    34.           <option value="false">no</option>
    35.           <option value="normal">normal</option>
    36.           <option value="100%">100%</option>
    37.         </select>
    38.         <span>stacking </span>
    39.       </div>
    40.       <button data-jsref="renderBtn">Render</button>
    41.     </div>
    42.  
    43.     <div id="myChart">
    44.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    45.     </div>
    46.  
    47.   </div>
    48.  
    49.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    50.   <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    51.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>
    52.  
    53. </body>
    54.  
    55. </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.  
    17. // CHART CONFIG
    18. // -----------------------------
    19.  
    20. var cdata = {
    21.   type: type.value,
    22.   plot: {
    23.     aspect: aspect.value,
    24.   },
    25.   series: [{
    26.       values: [20, 40, 25, 50, 15, 45, 33, 34]
    27.     },
    28.     {
    29.       values: [5, 30, 21, 18, 59, 50, 28, 33]
    30.     },
    31.     {
    32.       values: [30, 5, 18, 21, 33, 41, 29, 15]
    33.     }
    34.   ]
    35. };
    36.  
    37.  
    38. renderBtn.addEventListener('click', render);
    39.  
    40.  
    41. // HELPER FNS
    42. // -----------------------------
    43.  
    44. zingchart.render({
    45.   id: chartId,
    46.   width: '100%',
    47.   height: 600,
    48.   data: cdata,
    49. });
    50.  
    51. function render() {
    52.   var stackedVal = stacked.value != 'false' ? true : false;
    53.   var stackType = stacked.value != 'false' ? stacked.value : "none";
    54.   zingchart.exec('myChart', 'setcharttype', {
    55.     type: type.value
    56.   });
    57.   zingchart.exec('myChart', 'modify', {
    58.     object: 'plot',
    59.     data: {
    60.       aspect: aspect.value,
    61.       stacked: stackedVal,
    62.       'stack-type': stackType,
    63.     }
    64.   });
    65. }