• 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.         plotarea: {
    168.           margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
    169.         },
    170.         scaleX: {
    171.           backgroundColor: '#55154D',
    172.           height: 200,
    173.           width: 200,
    174.           x: 30,
    175.           y: 30,
    176.         },
    177.         scaleY: {
    178.           height: 200,
    179.           width: 200,
    180.           x: 30,
    181.           y: 30,
    182.         },
    183.         scaleXN: {
    184.           alpha: 0.4,
    185.           blended: true,
    186.           item: {
    187.             fontSize: 10,
    188.           },
    189.           maxItems: 10,
    190.           offset: '25px',
    191.           placement: 'default',
    192.           values: '0:100:10',
    193.         },
    194.         scaleYN: {
    195.           alpha: 0.4,
    196.           blended: true,
    197.           item: {
    198.             fontSize: 10,
    199.           },
    200.           maxItems: 10,
    201.           offset: 25,
    202.           placement: 'default',
    203.           values: '0:100:10',
    204.         },
    205.         scaleX2: {
    206.           backgroundColor: '#014358',
    207.           height: 200,
    208.           width: 200,
    209.           x: 260,
    210.           y: 30,
    211.         },
    212.         scaleY2: {
    213.           height: 200,
    214.           width: 200,
    215.           x: 260,
    216.           y: 30,
    217.         },
    218.         scaleX3: {
    219.           backgroundColor: '#264F14',
    220.           height: 200,
    221.           width: 200,
    222.           x: 30,
    223.           y: 260,
    224.         },
    225.         scaleY3: {
    226.           height: 200,
    227.           width: 200,
    228.           x: 30,
    229.           y: 260,
    230.         },
    231.         scaleX4: {
    232.           backgroundColor: '#704F00',
    233.           height: 200,
    234.           width: 200,
    235.           x: 260,
    236.           y: 260,
    237.         },
    238.         scaleY4: {
    239.           height: 200,
    240.           width: 200,
    241.           x: 260,
    242.           y: 260,
    243.         },
    244.         plot: {
    245.           decimalsSeparator: '.',
    246.           hoverMarker: {
    247.             visible: false,
    248.           },
    249.           minSize: 5,
    250.           scaling: 'area',
    251.           thousandsSeparator: ',',
    252.         },
    253.         bubbleLegend: {
    254.           connector: {},
    255.           item: {},
    256.           layout: layout === 'horizontal' ? 'h' : 'v',
    257.           marker: {},
    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.     plotarea: {
    67.       margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
    68.     },
    69.     scaleX: {
    70.       backgroundColor: '#55154D',
    71.       height: 200,
    72.       width: 200,
    73.       x: 30,
    74.       y: 30,
    75.     },
    76.     scaleY: {
    77.       height: 200,
    78.       width: 200,
    79.       x: 30,
    80.       y: 30,
    81.     },
    82.     scaleXN: {
    83.       alpha: 0.4,
    84.       blended: true,
    85.       item: {
    86.         fontSize: 10,
    87.       },
    88.       maxItems: 10,
    89.       offset: '25px',
    90.       placement: 'default',
    91.       values: '0:100:10',
    92.     },
    93.     scaleYN: {
    94.       alpha: 0.4,
    95.       blended: true,
    96.       item: {
    97.         fontSize: 10,
    98.       },
    99.       maxItems: 10,
    100.       offset: 25,
    101.       placement: 'default',
    102.       values: '0:100:10',
    103.     },
    104.     scaleX2: {
    105.       backgroundColor: '#014358',
    106.       height: 200,
    107.       width: 200,
    108.       x: 260,
    109.       y: 30,
    110.     },
    111.     scaleY2: {
    112.       height: 200,
    113.       width: 200,
    114.       x: 260,
    115.       y: 30,
    116.     },
    117.     scaleX3: {
    118.       backgroundColor: '#264F14',
    119.       height: 200,
    120.       width: 200,
    121.       x: 30,
    122.       y: 260,
    123.     },
    124.     scaleY3: {
    125.       height: 200,
    126.       width: 200,
    127.       x: 30,
    128.       y: 260,
    129.     },
    130.     scaleX4: {
    131.       backgroundColor: '#704F00',
    132.       height: 200,
    133.       width: 200,
    134.       x: 260,
    135.       y: 260,
    136.     },
    137.     scaleY4: {
    138.       height: 200,
    139.       width: 200,
    140.       x: 260,
    141.       y: 260,
    142.     },
    143.     plot: {
    144.       decimalsSeparator: '.',
    145.       hoverMarker: {
    146.         visible: false,
    147.       },
    148.       minSize: 5,
    149.       scaling: 'area',
    150.       thousandsSeparator: ',',
    151.     },
    152.     bubbleLegend: {
    153.       connector: {},
    154.       item: {},
    155.       layout: layout === 'horizontal' ? 'h' : 'v',
    156.       marker: {},
    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();