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