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