• 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.             border: `1px dashed red`,
    171.           },
    172.           layout: layout === 'horizontal' ? 'h' : 'v',
    173.           marker: {},
    174.         },
    175.         plot: {
    176.           decimalsSeparator: '.',
    177.           hoverMarker: {
    178.             visible: false,
    179.           },
    180.           minSize: 5,
    181.           scaling: 'area',
    182.           thousandsSeparator: ',',
    183.         },
    184.         plotarea: {
    185.           margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
    186.         },
    187.         scaleX: {
    188.           backgroundColor: '#55154D',
    189.           height: '200px',
    190.           width: '200px',
    191.           x: '30px',
    192.           y: '30px',
    193.         },
    194.         scaleY: {
    195.           height: '200px',
    196.           width: '200px',
    197.           x: '30px',
    198.           y: '30px',
    199.         },
    200.         scaleXN: {
    201.           alpha: 0.4,
    202.           blended: true,
    203.           item: {
    204.             fontSize: '10px',
    205.           },
    206.           maxItems: 10,
    207.           offset: '25px',
    208.           placement: 'default',
    209.           values: '0:100:10',
    210.         },
    211.         scaleYN: {
    212.           alpha: 0.4,
    213.           blended: true,
    214.           item: {
    215.             fontSize: 10,
    216.           },
    217.           maxItems: 10,
    218.           offset: '25px',
    219.           placement: 'default',
    220.           values: '0:100:10',
    221.         },
    222.         scaleX2: {
    223.           backgroundColor: '#014358',
    224.           height: '200px',
    225.           width: '200px',
    226.           x: '260px',
    227.           y: '30px',
    228.         },
    229.         scaleY2: {
    230.           height: '200px',
    231.           width: '200px',
    232.           x: '260px',
    233.           y: '30px',
    234.         },
    235.         scaleX3: {
    236.           backgroundColor: '#264F14',
    237.           height: '200px',
    238.           width: '200px',
    239.           x: '30px',
    240.           y: '260px',
    241.         },
    242.         scaleY3: {
    243.           height: '200px',
    244.           width: '200px',
    245.           x: '30px',
    246.           y: '260px',
    247.         },
    248.         scaleX4: {
    249.           backgroundColor: '#704F00',
    250.           height: '200px',
    251.           width: '200px',
    252.           x: '260px',
    253.           y: '260px',
    254.         },
    255.         scaleY4: {
    256.           height: '200px',
    257.           width: '200px',
    258.           x: '260px',
    259.           y: '260px',
    260.         },
    261.         series: [{
    262.             values: data1,
    263.             decimals: factor1 < 0 ? -factor1 : 0,
    264.             marker: {
    265.               fillType: 'radial',
    266.               backgroundColor: '#55154D #21081d',
    267.             },
    268.             sizingGroup: 1,
    269.           },
    270.           {
    271.             values: data2,
    272.             decimals: factor2 < 0 ? -factor2 : 0,
    273.             marker: {
    274.               fillType: 'radial',
    275.               backgroundColor: '#014358 #001b23',
    276.             },
    277.             scales: 'scale-x-2,scale-y-2',
    278.             sizingGroup: 2,
    279.           },
    280.           {
    281.             values: data3,
    282.             decimals: factor3 < 0 ? -factor3 : 0,
    283.             marker: {
    284.               fillType: 'radial',
    285.               backgroundColor: '#264F14 #19330d',
    286.             },
    287.             scales: 'scale-x-3,scale-y-3',
    288.             sizingGroup: 3,
    289.           },
    290.           {
    291.             values: data4,
    292.             decimals: factor4 < 0 ? -factor4 : 0,
    293.             marker: {
    294.               fillType: 'radial',
    295.               backgroundColor: '#704F00 #3a2900',
    296.             },
    297.             scales: 'scale-x-4,scale-y-4',
    298.             sizingGroup: 4,
    299.           },
    300.         ],
    301.       };
    302.  
    303.       // RENDER CHART
    304.       // -----------------------------
    305.       zingchart.render({
    306.         id: chartId,
    307.         width: layout === 'horizontal' ? '500px' : '600px',
    308.         height: layout === 'horizontal' ? '600px' : '500px',
    309.         output: 'svg',
    310.         data: chartConfig,
    311.         modules: 'bubble-legend',
    312.         events: {
    313.           load: load,
    314.         },
    315.       });
    316.     }
    317.  
    318.     // DOM EVENTS
    319.     // -----------------------------
    320.  
    321.     renderBtn.addEventListener('click', renderChart);
    322.  
    323.     // RENDER CHART ON LOAD
    324.     // -----------------------------
    325.     renderChart();
    326.   </script>
    327. </body>
    328.  
    329. </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.         border: `1px dashed red`,
    70.       },
    71.       layout: layout === 'horizontal' ? 'h' : 'v',
    72.       marker: {},
    73.     },
    74.     plot: {
    75.       decimalsSeparator: '.',
    76.       hoverMarker: {
    77.         visible: false,
    78.       },
    79.       minSize: 5,
    80.       scaling: 'area',
    81.       thousandsSeparator: ',',
    82.     },
    83.     plotarea: {
    84.       margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
    85.     },
    86.     scaleX: {
    87.       backgroundColor: '#55154D',
    88.       height: '200px',
    89.       width: '200px',
    90.       x: '30px',
    91.       y: '30px',
    92.     },
    93.     scaleY: {
    94.       height: '200px',
    95.       width: '200px',
    96.       x: '30px',
    97.       y: '30px',
    98.     },
    99.     scaleXN: {
    100.       alpha: 0.4,
    101.       blended: true,
    102.       item: {
    103.         fontSize: '10px',
    104.       },
    105.       maxItems: 10,
    106.       offset: '25px',
    107.       placement: 'default',
    108.       values: '0:100:10',
    109.     },
    110.     scaleYN: {
    111.       alpha: 0.4,
    112.       blended: true,
    113.       item: {
    114.         fontSize: 10,
    115.       },
    116.       maxItems: 10,
    117.       offset: '25px',
    118.       placement: 'default',
    119.       values: '0:100:10',
    120.     },
    121.     scaleX2: {
    122.       backgroundColor: '#014358',
    123.       height: '200px',
    124.       width: '200px',
    125.       x: '260px',
    126.       y: '30px',
    127.     },
    128.     scaleY2: {
    129.       height: '200px',
    130.       width: '200px',
    131.       x: '260px',
    132.       y: '30px',
    133.     },
    134.     scaleX3: {
    135.       backgroundColor: '#264F14',
    136.       height: '200px',
    137.       width: '200px',
    138.       x: '30px',
    139.       y: '260px',
    140.     },
    141.     scaleY3: {
    142.       height: '200px',
    143.       width: '200px',
    144.       x: '30px',
    145.       y: '260px',
    146.     },
    147.     scaleX4: {
    148.       backgroundColor: '#704F00',
    149.       height: '200px',
    150.       width: '200px',
    151.       x: '260px',
    152.       y: '260px',
    153.     },
    154.     scaleY4: {
    155.       height: '200px',
    156.       width: '200px',
    157.       x: '260px',
    158.       y: '260px',
    159.     },
    160.     series: [{
    161.         values: data1,
    162.         decimals: factor1 < 0 ? -factor1 : 0,
    163.         marker: {
    164.           fillType: 'radial',
    165.           backgroundColor: '#55154D #21081d',
    166.         },
    167.         sizingGroup: 1,
    168.       },
    169.       {
    170.         values: data2,
    171.         decimals: factor2 < 0 ? -factor2 : 0,
    172.         marker: {
    173.           fillType: 'radial',
    174.           backgroundColor: '#014358 #001b23',
    175.         },
    176.         scales: 'scale-x-2,scale-y-2',
    177.         sizingGroup: 2,
    178.       },
    179.       {
    180.         values: data3,
    181.         decimals: factor3 < 0 ? -factor3 : 0,
    182.         marker: {
    183.           fillType: 'radial',
    184.           backgroundColor: '#264F14 #19330d',
    185.         },
    186.         scales: 'scale-x-3,scale-y-3',
    187.         sizingGroup: 3,
    188.       },
    189.       {
    190.         values: data4,
    191.         decimals: factor4 < 0 ? -factor4 : 0,
    192.         marker: {
    193.           fillType: 'radial',
    194.           backgroundColor: '#704F00 #3a2900',
    195.         },
    196.         scales: 'scale-x-4,scale-y-4',
    197.         sizingGroup: 4,
    198.       },
    199.     ],
    200.   };
    201.  
    202.   // RENDER CHART
    203.   // -----------------------------
    204.   zingchart.render({
    205.     id: chartId,
    206.     width: layout === 'horizontal' ? '500px' : '600px',
    207.     height: layout === 'horizontal' ? '600px' : '500px',
    208.     output: 'svg',
    209.     data: chartConfig,
    210.     modules: 'bubble-legend',
    211.     events: {
    212.       load: load,
    213.     },
    214.   });
    215. }
    216.  
    217. // DOM EVENTS
    218. // -----------------------------
    219.  
    220. renderBtn.addEventListener('click', renderChart);
    221.  
    222. // RENDER CHART ON LOAD
    223. // -----------------------------
    224. renderChart();