• 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.     .info {
    11.       padding: 1rem 0 0;
    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.     html,
    66.     body,
    67.     #myChart {
    68.       height: 100%;
    69.       width: 100%;
    70.     }
    71.   </style>
    72. </head>
    73.  
    74. <body>
    75.   <div class="info">
    76.  
    77.     <div data-jsref="control-bar" class="control-bar">
    78.       <div>
    79.         <span>Bullet Type: &nbsp;</span>
    80.         <select data-jsref="aspect">
    81.           <option value="bar">bar</option>
    82.           <option value="cone">cone</option>
    83.           <option value="histogram">histogram</option>
    84.         </select>
    85.         <span>aspect and </span>
    86.       </div>
    87.       <div>
    88.         <select data-jsref="stacked">
    89.           <option value="false">no</option>
    90.           <option value="normal">normal</option>
    91.           <option value="100%">100%</option>
    92.         </select>
    93.         <span>stacking </span>
    94.       </div>
    95.       <button data-jsref="renderBtn">Render</button>
    96.     </div>
    97.   </div>
    98.   <div id='myChart'></div>
    99.   <script>
    100.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DOM ELEMENTS
    101.     // -----------------------------
    102.     var controlBar = document.querySelector('[data-jsref="control-bar"]');
    103.     var aspect = document.querySelector('[data-jsref="aspect"]');
    104.     var stacked = document.querySelector('[data-jsref="stacked"]');
    105.     var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    106.  
    107.     var myConfig7 = {
    108.       "type": "bullet",
    109.       "plot": {
    110.         "aspect": aspect.value,
    111.       },
    112.       "series": [{
    113.           "values": [20, 40, 25, 50, 15, 45, 33, 34],
    114.           "goals": [25, 43, 30, 40, 21, 59, 35, 31]
    115.         },
    116.         {
    117.           "values": [5, 30, 21, 18, 59, 50, 28, 33],
    118.           "goals": [21, 35, 23, 29, 61, 55, 33, 30]
    119.         }
    120.       ]
    121.     };
    122.     renderBtn.addEventListener('click', render);
    123.     zingchart.render({
    124.       id: 'myChart',
    125.       data: myConfig7,
    126.       height: "100%",
    127.       width: "100%"
    128.     });
    129.  
    130.     function render() {
    131.       var stackedVal = stacked.value != 'false' ? true : false;
    132.       var stackType = stacked.value != 'false' ? stacked.value : "none";
    133.       zingchart.exec('myChart', 'modify', {
    134.         object: 'plot',
    135.         data: {
    136.           aspect: aspect.value,
    137.           stacked: stackedVal,
    138.           'stack-type': stackType,
    139.         }
    140.       });
    141.     }
    142.   </script>
    143. </body>
    144.  
    145. </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 class="info">
    13.  
    14.     <div data-jsref="control-bar" class="control-bar">
    15.       <div>
    16.         <span>Bullet Type: &nbsp;</span>
    17.         <select data-jsref="aspect">
    18.           <option value="bar">bar</option>
    19.           <option value="cone">cone</option>
    20.           <option value="histogram">histogram</option>
    21.         </select>
    22.         <span>aspect and </span>
    23.       </div>
    24.       <div>
    25.         <select data-jsref="stacked">
    26.           <option value="false">no</option>
    27.           <option value="normal">normal</option>
    28.           <option value="100%">100%</option>
    29.         </select>
    30.         <span>stacking </span>
    31.       </div>
    32.       <button data-jsref="renderBtn">Render</button>
    33.     </div>
    34.   </div>
    35.   <div id='myChart'></div>
    36. </body>
    37.  
    38. </html>
    1. .info {
    2.   padding: 1rem 0 0;
    3.   background: #fff;
    4.   box-sizing: border-box;
    5. }
    6.  
    7. .control-bar {
    8.   margin: 0 auto;
    9.   padding: 0 0 1rem;
    10.   display: flex;
    11.   align-items: center;
    12.   justify-content: center;
    13. }
    14.  
    15. .control-bar.loaded {
    16.   display: flex !important;
    17.   opacity: 1;
    18. }
    19.  
    20. .control-bar>div {
    21.   display: flex;
    22.   align-items: center;
    23. }
    24.  
    25. .control-bar>*+* {
    26.   margin-left: 10px;
    27. }
    28.  
    29. .control-bar span {
    30.   margin-left: 7px;
    31.   display: inline-block;
    32. }
    33.  
    34. .control-bar select {
    35.   min-width: 45px;
    36.   height: 40px;
    37.   background: #fff;
    38.   border: 1px solid #ebebeb;
    39.   border-radius: 4px;
    40. }
    41.  
    42. .control-bar .sel-wide {
    43.   min-width: 60px;
    44. }
    45.  
    46. .control-bar button {
    47.   min-width: 45px;
    48.   height: 40px;
    49.   cursor: pointer;
    50.   color: #fff;
    51.   background: #074361;
    52.   border: 1px solid #074361;
    53.   border-radius: 4px;
    54. }
    55.  
    56. html,
    57. body,
    58. #myChart {
    59.   height: 100%;
    60.   width: 100%;
    61. }
    1. // DOM ELEMENTS
    2. // -----------------------------
    3. var controlBar = document.querySelector('[data-jsref="control-bar"]');
    4. var aspect = document.querySelector('[data-jsref="aspect"]');
    5. var stacked = document.querySelector('[data-jsref="stacked"]');
    6. var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    7.  
    8. var myConfig7 = {
    9.   "type": "bullet",
    10.   "plot": {
    11.     "aspect": aspect.value,
    12.   },
    13.   "series": [{
    14.       "values": [20, 40, 25, 50, 15, 45, 33, 34],
    15.       "goals": [25, 43, 30, 40, 21, 59, 35, 31]
    16.     },
    17.     {
    18.       "values": [5, 30, 21, 18, 59, 50, 28, 33],
    19.       "goals": [21, 35, 23, 29, 61, 55, 33, 30]
    20.     }
    21.   ]
    22. };
    23. renderBtn.addEventListener('click', render);
    24. zingchart.render({
    25.   id: 'myChart',
    26.   data: myConfig7,
    27.   height: "100%",
    28.   width: "100%"
    29. });
    30.  
    31. function render() {
    32.   var stackedVal = stacked.value != 'false' ? true : false;
    33.   var stackType = stacked.value != 'false' ? stacked.value : "none";
    34.   zingchart.exec('myChart', 'modify', {
    35.     object: 'plot',
    36.     data: {
    37.       aspect: aspect.value,
    38.       stacked: stackedVal,
    39.       'stack-type': stackType,
    40.     }
    41.   });
    42. }