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