• 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.     .bubble {
    10.       padding: 1rem;
    11.       display: flex;
    12.       flex-direction: column;
    13.       align-items: center;
    14.       background: #fff;
    15.       box-sizing: border-box;
    16.     }
    17.  
    18.     .control-bar {
    19.       margin: 0 auto;
    20.       padding: 0 0 2rem;
    21.       display: flex;
    22.       align-items: center;
    23.       justify-content: center;
    24.       opacity: 0;
    25.       transition: opacity .3s;
    26.     }
    27.  
    28.     .control-bar.loaded {
    29.       display: flex !important;
    30.       opacity: 1;
    31.     }
    32.  
    33.     .control-bar>div {
    34.       display: flex;
    35.       align-items: center;
    36.     }
    37.  
    38.     .control-bar>*+* {
    39.       margin-left: 10px;
    40.     }
    41.  
    42.     .control-bar span {
    43.       margin-left: 7px;
    44.       display: inline-block;
    45.     }
    46.  
    47.     .control-bar .sep {
    48.       padding: 0 10px;
    49.       color: #ebebeb;
    50.     }
    51.  
    52.     .control-bar select {
    53.       min-width: 45px;
    54.       height: 40px;
    55.       background: #fff;
    56.       border: 1px solid #ebebeb;
    57.       border-radius: 4px;
    58.     }
    59.  
    60.     .control-bar button {
    61.       padding: 0 10px;
    62.       height: 40px;
    63.       cursor: pointer;
    64.       color: #fff;
    65.       background: #074361;
    66.       border: 1px solid #074361;
    67.       border-radius: 4px;
    68.     }
    69.  
    70.     .zc-chart {
    71.       margin: 0 auto;
    72.     }
    73.  
    74.     .zc-ref {
    75.       display: none;
    76.     }
    77.   </style>
    78. </head>
    79.  
    80. <body class="zc-body">
    81.  
    82.   <div class="bubble">
    83.  
    84.     <div data-jsref="control-bar" class="control-bar" hidden>
    85.       <span>View BubbleLegend component in</span>
    86.       <select data-jsref="layout">
    87.         <option value="vertical">vertical</option>
    88.         <option value="horizontal">horizontal</option>
    89.       </select>
    90.       <span>layout</span>
    91.       <span class="sep">|</span>
    92.       <button data-jsref="renderBtn">Render Chart</button>
    93.     </div>
    94.  
    95.     <div id="myChart">
    96.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    97.     </div>
    98.  
    99.   </div>
    100.  
    101.   <script>
    102.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT
    103.     // -----------------------------
    104.     // Define Module Location
    105.     zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    106.     // Load module(s)
    107.     zingchart.loadModules('bubble-legend');
    108.  
    109.     // DEFINE CHART LOCATIONS (IDS)
    110.     // -----------------------------
    111.     // Main chart render location(s)
    112.     let chartId = 'myChart';
    113.  
    114.     // DOM ELEMENTS
    115.     // -----------------------------
    116.     let controlBar = document.querySelector('[data-jsref="control-bar"]');
    117.     let renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    118.     let layoutEl = document.querySelector('[data-jsref="layout"]');
    119.  
    120.     // CHART EVENTS
    121.     // -----------------------------
    122.  
    123.     function load(p) {
    124.       controlBar.classList.add('loaded');
    125.     }
    126.  
    127.     // RENDER CHART
    128.     // -----------------------------
    129.  
    130.     function renderChart() {
    131.       // VARS
    132.       // -----------------------------
    133.       let layout = layoutEl.value;
    134.       let min = ZC._r_(1, 100);
    135.       let max = ZC._r_(100, 10000);
    136.       let factor1 = ZC._r_(-10, 4);
    137.       let factor2 = ZC._r_(-8, 6);
    138.       let factor3 = ZC._r_(-6, 8);
    139.       let factor4 = ZC._r_(-4, 10);
    140.       let data1 = [],
    141.         data2 = [],
    142.         data3 = [],
    143.         data4 = [];
    144.  
    145.       // ADD DATA
    146.       // -----------------------------
    147.       for (let i = 0; i < 9; i++) {
    148.         let rv1 = ZC._r_(min, max) * Math.pow(10, factor1);
    149.         let rv2 = ZC._r_(min, max) * Math.pow(10, factor2);
    150.         let rv3 = ZC._r_(min, max) * Math.pow(10, factor3);
    151.         let rv4 = ZC._r_(min, max) * Math.pow(10, factor4);
    152.         data1.push([ZC._r_(0, 99), ZC._r_(0, 99), rv1]);
    153.         data2.push([ZC._r_(0, 99), ZC._r_(0, 99), rv2]);
    154.         data3.push([ZC._r_(0, 99), ZC._r_(0, 99), rv3]);
    155.         data4.push([ZC._r_(0, 99), ZC._r_(0, 99), rv4]);
    156.       }
    157.  
    158.       // CHART CONFIG
    159.       // -----------------------------
    160.       let chartConfig = {
    161.         type: 'bubble',
    162.         title: {
    163.           text: 'BubbleLegend Component (' + layout + ' layout)',
    164.           align: 'left',
    165.           fontSize: '11px',
    166.         },
    167.         bubbleLegend: {
    168.           connector: {},
    169.           item: {},
    170.           layout: layout === 'horizontal' ? 'h' : 'v',
    171.           marker: {},
    172.         },
    173.         plot: {
    174.           decimalsSeparator: '.',
    175.           hoverMarker: {
    176.             visible: false,
    177.           },
    178.           minSize: 5,
    179.           scaling: 'area',
    180.           thousandsSeparator: ',',
    181.         },
    182.         plotarea: {
    183.           margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
    184.         },
    185.         scaleX: {
    186.           backgroundColor: '#55154D',
    187.           height: '200px',
    188.           width: '200px',
    189.           x: '30px',
    190.           y: '30px',
    191.         },
    192.         scaleY: {
    193.           height: '200px',
    194.           width: '200px',
    195.           x: '30px',
    196.           y: '30px',
    197.         },
    198.         scaleXN: {
    199.           alpha: 0.4,
    200.           blended: true,
    201.           item: {
    202.             fontSize: '10px',
    203.           },
    204.           maxItems: 10,
    205.           offset: '25px',
    206.           placement: 'default',
    207.           values: '0:100:10',
    208.         },
    209.         scaleYN: {
    210.           alpha: 0.4,
    211.           blended: true,
    212.           item: {
    213.             fontSize: 10,
    214.           },
    215.           maxItems: 10,
    216.           offset: '25px',
    217.           placement: 'default',
    218.           values: '0:100:10',
    219.         },
    220.         scaleX2: {
    221.           backgroundColor: '#014358',
    222.           height: '200px',
    223.           width: '200px',
    224.           x: '260px',
    225.           y: '30px',
    226.         },
    227.         scaleY2: {
    228.           height: '200px',
    229.           width: '200px',
    230.           x: '260px',
    231.           y: '30px',
    232.         },
    233.         scaleX3: {
    234.           backgroundColor: '#264F14',
    235.           height: '200px',
    236.           width: '200px',
    237.           x: '30px',
    238.           y: '260px',
    239.         },
    240.         scaleY3: {
    241.           height: '200px',
    242.           width: '200px',
    243.           x: '30px',
    244.           y: '260px',
    245.         },
    246.         scaleX4: {
    247.           backgroundColor: '#704F00',
    248.           height: '200px',
    249.           width: '200px',
    250.           x: '260px',
    251.           y: '260px',
    252.         },
    253.         scaleY4: {
    254.           height: '200px',
    255.           width: '200px',
    256.           x: '260px',
    257.           y: '260px',
    258.         },
    259.         series: [{
    260.             values: data1,
    261.             decimals: factor1 < 0 ? -factor1 : 0,
    262.             marker: {
    263.               fillType: 'radial',
    264.               backgroundColor: '#55154D #21081d',
    265.             },
    266.             sizingGroup: 1,
    267.           },
    268.           {
    269.             values: data2,
    270.             decimals: factor2 < 0 ? -factor2 : 0,
    271.             marker: {
    272.               fillType: 'radial',
    273.               backgroundColor: '#014358 #001b23',
    274.             },
    275.             scales: 'scale-x-2,scale-y-2',
    276.             sizingGroup: 2,
    277.           },
    278.           {
    279.             values: data3,
    280.             decimals: factor3 < 0 ? -factor3 : 0,
    281.             marker: {
    282.               fillType: 'radial',
    283.               backgroundColor: '#264F14 #19330d',
    284.             },
    285.             scales: 'scale-x-3,scale-y-3',
    286.             sizingGroup: 3,
    287.           },
    288.           {
    289.             values: data4,
    290.             decimals: factor4 < 0 ? -factor4 : 0,
    291.             marker: {
    292.               fillType: 'radial',
    293.               backgroundColor: '#704F00 #3a2900',
    294.             },
    295.             scales: 'scale-x-4,scale-y-4',
    296.             sizingGroup: 4,
    297.           },
    298.         ],
    299.       };
    300.  
    301.       // RENDER CHART
    302.       // -----------------------------
    303.       zingchart.render({
    304.         id: chartId,
    305.         width: layout === 'horizontal' ? '500px' : '600px',
    306.         height: layout === 'horizontal' ? '600px' : '500px',
    307.         output: 'svg',
    308.         data: chartConfig,
    309.         modules: 'bubble-legend',
    310.         events: {
    311.           load: load,
    312.         },
    313.       });
    314.     }
    315.  
    316.     // DOM EVENTS
    317.     // -----------------------------
    318.  
    319.     renderBtn.addEventListener('click', renderChart);
    320.  
    321.     // RENDER CHART ON LOAD
    322.     // -----------------------------
    323.     renderChart();
    324.   </script>
    325. </body>
    326.  
    327. </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="bubble">
    13.  
    14.     <div data-jsref="control-bar" class="control-bar" hidden>
    15.       <span>View BubbleLegend component in</span>
    16.       <select data-jsref="layout">
    17.         <option value="vertical">vertical</option>
    18.         <option value="horizontal">horizontal</option>
    19.       </select>
    20.       <span>layout</span>
    21.       <span class="sep">|</span>
    22.       <button data-jsref="renderBtn">Render Chart</button>
    23.     </div>
    24.  
    25.     <div id="myChart">
    26.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    27.     </div>
    28.  
    29.   </div>
    30.  
    31. </body>
    32.  
    33. </html>
    1. .bubble {
    2.   padding: 1rem;
    3.   display: flex;
    4.   flex-direction: column;
    5.   align-items: center;
    6.   background: #fff;
    7.   box-sizing: border-box;
    8. }
    9.  
    10. .control-bar {
    11.   margin: 0 auto;
    12.   padding: 0 0 2rem;
    13.   display: flex;
    14.   align-items: center;
    15.   justify-content: center;
    16.   opacity: 0;
    17.   transition: opacity .3s;
    18. }
    19.  
    20. .control-bar.loaded {
    21.   display: flex !important;
    22.   opacity: 1;
    23. }
    24.  
    25. .control-bar>div {
    26.   display: flex;
    27.   align-items: center;
    28. }
    29.  
    30. .control-bar>*+* {
    31.   margin-left: 10px;
    32. }
    33.  
    34. .control-bar span {
    35.   margin-left: 7px;
    36.   display: inline-block;
    37. }
    38.  
    39. .control-bar .sep {
    40.   padding: 0 10px;
    41.   color: #ebebeb;
    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 button {
    53.   padding: 0 10px;
    54.   height: 40px;
    55.   cursor: pointer;
    56.   color: #fff;
    57.   background: #074361;
    58.   border: 1px solid #074361;
    59.   border-radius: 4px;
    60. }
    61.  
    62. .zc-chart {
    63.   margin: 0 auto;
    64. }
    65.  
    66. .zc-ref {
    67.   display: none;
    68. }
    1. // INIT
    2. // -----------------------------
    3. // Define Module Location
    4. zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    5. // Load module(s)
    6. zingchart.loadModules('bubble-legend');
    7.  
    8. // DEFINE CHART LOCATIONS (IDS)
    9. // -----------------------------
    10. // Main chart render location(s)
    11. let chartId = 'myChart';
    12.  
    13. // DOM ELEMENTS
    14. // -----------------------------
    15. let controlBar = document.querySelector('[data-jsref="control-bar"]');
    16. let renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    17. let layoutEl = document.querySelector('[data-jsref="layout"]');
    18.  
    19. // CHART EVENTS
    20. // -----------------------------
    21.  
    22. function load(p) {
    23.   controlBar.classList.add('loaded');
    24. }
    25.  
    26. // RENDER CHART
    27. // -----------------------------
    28.  
    29. function renderChart() {
    30.   // VARS
    31.   // -----------------------------
    32.   let layout = layoutEl.value;
    33.   let min = ZC._r_(1, 100);
    34.   let max = ZC._r_(100, 10000);
    35.   let factor1 = ZC._r_(-10, 4);
    36.   let factor2 = ZC._r_(-8, 6);
    37.   let factor3 = ZC._r_(-6, 8);
    38.   let factor4 = ZC._r_(-4, 10);
    39.   let data1 = [],
    40.     data2 = [],
    41.     data3 = [],
    42.     data4 = [];
    43.  
    44.   // ADD DATA
    45.   // -----------------------------
    46.   for (let i = 0; i < 9; i++) {
    47.     let rv1 = ZC._r_(min, max) * Math.pow(10, factor1);
    48.     let rv2 = ZC._r_(min, max) * Math.pow(10, factor2);
    49.     let rv3 = ZC._r_(min, max) * Math.pow(10, factor3);
    50.     let rv4 = ZC._r_(min, max) * Math.pow(10, factor4);
    51.     data1.push([ZC._r_(0, 99), ZC._r_(0, 99), rv1]);
    52.     data2.push([ZC._r_(0, 99), ZC._r_(0, 99), rv2]);
    53.     data3.push([ZC._r_(0, 99), ZC._r_(0, 99), rv3]);
    54.     data4.push([ZC._r_(0, 99), ZC._r_(0, 99), rv4]);
    55.   }
    56.  
    57.   // CHART CONFIG
    58.   // -----------------------------
    59.   let chartConfig = {
    60.     type: 'bubble',
    61.     title: {
    62.       text: 'BubbleLegend Component (' + layout + ' layout)',
    63.       align: 'left',
    64.       fontSize: '11px',
    65.     },
    66.     bubbleLegend: {
    67.       connector: {},
    68.       item: {},
    69.       layout: layout === 'horizontal' ? 'h' : 'v',
    70.       marker: {},
    71.     },
    72.     plot: {
    73.       decimalsSeparator: '.',
    74.       hoverMarker: {
    75.         visible: false,
    76.       },
    77.       minSize: 5,
    78.       scaling: 'area',
    79.       thousandsSeparator: ',',
    80.     },
    81.     plotarea: {
    82.       margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
    83.     },
    84.     scaleX: {
    85.       backgroundColor: '#55154D',
    86.       height: '200px',
    87.       width: '200px',
    88.       x: '30px',
    89.       y: '30px',
    90.     },
    91.     scaleY: {
    92.       height: '200px',
    93.       width: '200px',
    94.       x: '30px',
    95.       y: '30px',
    96.     },
    97.     scaleXN: {
    98.       alpha: 0.4,
    99.       blended: true,
    100.       item: {
    101.         fontSize: '10px',
    102.       },
    103.       maxItems: 10,
    104.       offset: '25px',
    105.       placement: 'default',
    106.       values: '0:100:10',
    107.     },
    108.     scaleYN: {
    109.       alpha: 0.4,
    110.       blended: true,
    111.       item: {
    112.         fontSize: 10,
    113.       },
    114.       maxItems: 10,
    115.       offset: '25px',
    116.       placement: 'default',
    117.       values: '0:100:10',
    118.     },
    119.     scaleX2: {
    120.       backgroundColor: '#014358',
    121.       height: '200px',
    122.       width: '200px',
    123.       x: '260px',
    124.       y: '30px',
    125.     },
    126.     scaleY2: {
    127.       height: '200px',
    128.       width: '200px',
    129.       x: '260px',
    130.       y: '30px',
    131.     },
    132.     scaleX3: {
    133.       backgroundColor: '#264F14',
    134.       height: '200px',
    135.       width: '200px',
    136.       x: '30px',
    137.       y: '260px',
    138.     },
    139.     scaleY3: {
    140.       height: '200px',
    141.       width: '200px',
    142.       x: '30px',
    143.       y: '260px',
    144.     },
    145.     scaleX4: {
    146.       backgroundColor: '#704F00',
    147.       height: '200px',
    148.       width: '200px',
    149.       x: '260px',
    150.       y: '260px',
    151.     },
    152.     scaleY4: {
    153.       height: '200px',
    154.       width: '200px',
    155.       x: '260px',
    156.       y: '260px',
    157.     },
    158.     series: [{
    159.         values: data1,
    160.         decimals: factor1 < 0 ? -factor1 : 0,
    161.         marker: {
    162.           fillType: 'radial',
    163.           backgroundColor: '#55154D #21081d',
    164.         },
    165.         sizingGroup: 1,
    166.       },
    167.       {
    168.         values: data2,
    169.         decimals: factor2 < 0 ? -factor2 : 0,
    170.         marker: {
    171.           fillType: 'radial',
    172.           backgroundColor: '#014358 #001b23',
    173.         },
    174.         scales: 'scale-x-2,scale-y-2',
    175.         sizingGroup: 2,
    176.       },
    177.       {
    178.         values: data3,
    179.         decimals: factor3 < 0 ? -factor3 : 0,
    180.         marker: {
    181.           fillType: 'radial',
    182.           backgroundColor: '#264F14 #19330d',
    183.         },
    184.         scales: 'scale-x-3,scale-y-3',
    185.         sizingGroup: 3,
    186.       },
    187.       {
    188.         values: data4,
    189.         decimals: factor4 < 0 ? -factor4 : 0,
    190.         marker: {
    191.           fillType: 'radial',
    192.           backgroundColor: '#704F00 #3a2900',
    193.         },
    194.         scales: 'scale-x-4,scale-y-4',
    195.         sizingGroup: 4,
    196.       },
    197.     ],
    198.   };
    199.  
    200.   // RENDER CHART
    201.   // -----------------------------
    202.   zingchart.render({
    203.     id: chartId,
    204.     width: layout === 'horizontal' ? '500px' : '600px',
    205.     height: layout === 'horizontal' ? '600px' : '500px',
    206.     output: 'svg',
    207.     data: chartConfig,
    208.     modules: 'bubble-legend',
    209.     events: {
    210.       load: load,
    211.     },
    212.   });
    213. }
    214.  
    215. // DOM EVENTS
    216. // -----------------------------
    217.  
    218. renderBtn.addEventListener('click', renderChart);
    219.  
    220. // RENDER CHART ON LOAD
    221. // -----------------------------
    222. renderChart();