• Edit
  • Download
  • <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .bubble {
          padding: 1rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #fff;
          box-sizing: border-box;
        }
    
        .control-bar {
          margin: 0 auto;
          padding: 0 0 2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity .3s;
        }
    
        .control-bar.loaded {
          display: flex !important;
          opacity: 1;
        }
    
        .control-bar>div {
          display: flex;
          align-items: center;
        }
    
        .control-bar>*+* {
          margin-left: 10px;
        }
    
        .control-bar span {
          margin-left: 7px;
          display: inline-block;
        }
    
        .control-bar .sep {
          padding: 0 10px;
          color: #ebebeb;
        }
    
        .control-bar select {
          min-width: 45px;
          height: 40px;
          background: #fff;
          border: 1px solid #ebebeb;
          border-radius: 4px;
        }
    
        .control-bar button {
          padding: 0 10px;
          height: 40px;
          cursor: pointer;
          color: #fff;
          background: #074361;
          border: 1px solid #074361;
          border-radius: 4px;
        }
    
        .zc-chart {
          margin: 0 auto;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body class="zc-body">
    
      <div class="bubble">
    
        <div data-jsref="control-bar" class="control-bar" hidden>
          <span>View BubbleLegend component in</span>
          <select data-jsref="layout">
            <option value="vertical">vertical</option>
            <option value="horizontal">horizontal</option>
          </select>
          <span>layout</span>
          <span class="sep">|</span>
          <button data-jsref="renderBtn">Render Chart</button>
        </div>
    
        <div id="myChart">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
    
      </div>
    
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT
        // -----------------------------
        // Define Module Location
        zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
        // Load module(s)
        zingchart.loadModules('bubble-legend');
    
        // DEFINE CHART LOCATIONS (IDS)
        // -----------------------------
        // Main chart render location(s)
        let chartId = 'myChart';
    
        // DOM ELEMENTS
        // -----------------------------
        let controlBar = document.querySelector('[data-jsref="control-bar"]');
        let renderBtn = document.querySelector('[data-jsref="renderBtn"]');
        let layoutEl = document.querySelector('[data-jsref="layout"]');
    
        // CHART EVENTS
        // -----------------------------
    
        function load(p) {
          controlBar.classList.add('loaded');
        }
    
        // RENDER CHART
        // -----------------------------
    
        function renderChart() {
          // VARS
          // -----------------------------
          let layout = layoutEl.value;
          let min = ZC._r_(1, 100);
          let max = ZC._r_(100, 10000);
          let factor1 = ZC._r_(-10, 4);
          let factor2 = ZC._r_(-8, 6);
          let factor3 = ZC._r_(-6, 8);
          let factor4 = ZC._r_(-4, 10);
          let data1 = [],
            data2 = [],
            data3 = [],
            data4 = [];
    
          // ADD DATA
          // -----------------------------
          for (let i = 0; i < 9; i++) {
            let rv1 = ZC._r_(min, max) * Math.pow(10, factor1);
            let rv2 = ZC._r_(min, max) * Math.pow(10, factor2);
            let rv3 = ZC._r_(min, max) * Math.pow(10, factor3);
            let rv4 = ZC._r_(min, max) * Math.pow(10, factor4);
            data1.push([ZC._r_(0, 99), ZC._r_(0, 99), rv1]);
            data2.push([ZC._r_(0, 99), ZC._r_(0, 99), rv2]);
            data3.push([ZC._r_(0, 99), ZC._r_(0, 99), rv3]);
            data4.push([ZC._r_(0, 99), ZC._r_(0, 99), rv4]);
          }
    
          // CHART CONFIG
          // -----------------------------
          let chartConfig = {
            type: 'bubble',
            title: {
              text: 'BubbleLegend Component (' + layout + ' layout)',
              align: 'left',
              fontSize: '11px',
            },
            bubbleLegend: {
              connector: {},
              item: {},
              layout: layout === 'horizontal' ? 'h' : 'v',
              marker: {
                bottomState: {
                  alpha: 0.1,
                  backgroundColor: 'red',
                  borderColor: 'red',
                  offsetX: -50,
                },
              },
            },
            plot: {
              decimalsSeparator: '.',
              hoverMarker: {
                visible: false,
              },
              minSize: 5,
              scaling: 'area',
              thousandsSeparator: ',',
            },
            plotarea: {
              margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
            },
            scaleX: {
              backgroundColor: '#55154D',
              height: '200px',
              width: '200px',
              x: '30px',
              y: '30px',
            },
            scaleY: {
              height: '200px',
              width: '200px',
              x: '30px',
              y: '30px',
            },
            scaleXN: {
              alpha: 0.4,
              blended: true,
              item: {
                fontSize: '10px',
              },
              maxItems: 10,
              offset: '25px',
              placement: 'default',
              values: '0:100:10',
            },
            scaleYN: {
              alpha: 0.4,
              blended: true,
              item: {
                fontSize: 10,
              },
              maxItems: 10,
              offset: '25px',
              placement: 'default',
              values: '0:100:10',
            },
            scaleX2: {
              backgroundColor: '#014358',
              height: '200px',
              width: '200px',
              x: '260px',
              y: '30px',
            },
            scaleY2: {
              height: '200px',
              width: '200px',
              x: '260px',
              y: '30px',
            },
            scaleX3: {
              backgroundColor: '#264F14',
              height: '200px',
              width: '200px',
              x: '30px',
              y: '260px',
            },
            scaleY3: {
              height: '200px',
              width: '200px',
              x: '30px',
              y: '260px',
            },
            scaleX4: {
              backgroundColor: '#704F00',
              height: '200px',
              width: '200px',
              x: '260px',
              y: '260px',
            },
            scaleY4: {
              height: '200px',
              width: '200px',
              x: '260px',
              y: '260px',
            },
            series: [{
                values: data1,
                decimals: factor1 < 0 ? -factor1 : 0,
                marker: {
                  fillType: 'radial',
                  backgroundColor: '#55154D #21081d',
                },
                sizingGroup: 1,
              },
              {
                values: data2,
                decimals: factor2 < 0 ? -factor2 : 0,
                marker: {
                  fillType: 'radial',
                  backgroundColor: '#014358 #001b23',
                },
                scales: 'scale-x-2,scale-y-2',
                sizingGroup: 2,
              },
              {
                values: data3,
                decimals: factor3 < 0 ? -factor3 : 0,
                marker: {
                  fillType: 'radial',
                  backgroundColor: '#264F14 #19330d',
                },
                scales: 'scale-x-3,scale-y-3',
                sizingGroup: 3,
              },
              {
                values: data4,
                decimals: factor4 < 0 ? -factor4 : 0,
                marker: {
                  fillType: 'radial',
                  backgroundColor: '#704F00 #3a2900',
                },
                scales: 'scale-x-4,scale-y-4',
                sizingGroup: 4,
              },
            ],
          };
    
          // RENDER CHART
          // -----------------------------
          zingchart.render({
            id: chartId,
            width: layout === 'horizontal' ? '500px' : '600px',
            height: layout === 'horizontal' ? '600px' : '500px',
            output: 'svg',
            data: chartConfig,
            modules: 'bubble-legend',
            events: {
              load: load,
            },
          });
        }
    
        // DOM EVENTS
        // -----------------------------
    
        renderBtn.addEventListener('click', renderChart);
    
        // RENDER CHART ON LOAD
        // -----------------------------
        renderChart();
      </script>
    </body>
    
    </html>
    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body class="zc-body">
    
      <div class="bubble">
    
        <div data-jsref="control-bar" class="control-bar" hidden>
          <span>View BubbleLegend component in</span>
          <select data-jsref="layout">
            <option value="vertical">vertical</option>
            <option value="horizontal">horizontal</option>
          </select>
          <span>layout</span>
          <span class="sep">|</span>
          <button data-jsref="renderBtn">Render Chart</button>
        </div>
    
        <div id="myChart">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
    
      </div>
    
    </body>
    
    </html>
    .bubble {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      box-sizing: border-box;
    }
    
    .control-bar {
      margin: 0 auto;
      padding: 0 0 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity .3s;
    }
    
    .control-bar.loaded {
      display: flex !important;
      opacity: 1;
    }
    
    .control-bar>div {
      display: flex;
      align-items: center;
    }
    
    .control-bar>*+* {
      margin-left: 10px;
    }
    
    .control-bar span {
      margin-left: 7px;
      display: inline-block;
    }
    
    .control-bar .sep {
      padding: 0 10px;
      color: #ebebeb;
    }
    
    .control-bar select {
      min-width: 45px;
      height: 40px;
      background: #fff;
      border: 1px solid #ebebeb;
      border-radius: 4px;
    }
    
    .control-bar button {
      padding: 0 10px;
      height: 40px;
      cursor: pointer;
      color: #fff;
      background: #074361;
      border: 1px solid #074361;
      border-radius: 4px;
    }
    
    .zc-chart {
      margin: 0 auto;
    }
    
    .zc-ref {
      display: none;
    }
    // INIT
    // -----------------------------
    // Define Module Location
    zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    // Load module(s)
    zingchart.loadModules('bubble-legend');
    
    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location(s)
    let chartId = 'myChart';
    
    // DOM ELEMENTS
    // -----------------------------
    let controlBar = document.querySelector('[data-jsref="control-bar"]');
    let renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    let layoutEl = document.querySelector('[data-jsref="layout"]');
    
    // CHART EVENTS
    // -----------------------------
    
    function load(p) {
      controlBar.classList.add('loaded');
    }
    
    // RENDER CHART
    // -----------------------------
    
    function renderChart() {
      // VARS
      // -----------------------------
      let layout = layoutEl.value;
      let min = ZC._r_(1, 100);
      let max = ZC._r_(100, 10000);
      let factor1 = ZC._r_(-10, 4);
      let factor2 = ZC._r_(-8, 6);
      let factor3 = ZC._r_(-6, 8);
      let factor4 = ZC._r_(-4, 10);
      let data1 = [],
        data2 = [],
        data3 = [],
        data4 = [];
    
      // ADD DATA
      // -----------------------------
      for (let i = 0; i < 9; i++) {
        let rv1 = ZC._r_(min, max) * Math.pow(10, factor1);
        let rv2 = ZC._r_(min, max) * Math.pow(10, factor2);
        let rv3 = ZC._r_(min, max) * Math.pow(10, factor3);
        let rv4 = ZC._r_(min, max) * Math.pow(10, factor4);
        data1.push([ZC._r_(0, 99), ZC._r_(0, 99), rv1]);
        data2.push([ZC._r_(0, 99), ZC._r_(0, 99), rv2]);
        data3.push([ZC._r_(0, 99), ZC._r_(0, 99), rv3]);
        data4.push([ZC._r_(0, 99), ZC._r_(0, 99), rv4]);
      }
    
      // CHART CONFIG
      // -----------------------------
      let chartConfig = {
        type: 'bubble',
        title: {
          text: 'BubbleLegend Component (' + layout + ' layout)',
          align: 'left',
          fontSize: '11px',
        },
        bubbleLegend: {
          connector: {},
          item: {},
          layout: layout === 'horizontal' ? 'h' : 'v',
          marker: {
            bottomState: {
              alpha: 0.1,
              backgroundColor: 'red',
              borderColor: 'red',
              offsetX: -50,
            },
          },
        },
        plot: {
          decimalsSeparator: '.',
          hoverMarker: {
            visible: false,
          },
          minSize: 5,
          scaling: 'area',
          thousandsSeparator: ',',
        },
        plotarea: {
          margin: layout === 'horizontal' ? '30 30 140 30' : '30 140 30 30',
        },
        scaleX: {
          backgroundColor: '#55154D',
          height: '200px',
          width: '200px',
          x: '30px',
          y: '30px',
        },
        scaleY: {
          height: '200px',
          width: '200px',
          x: '30px',
          y: '30px',
        },
        scaleXN: {
          alpha: 0.4,
          blended: true,
          item: {
            fontSize: '10px',
          },
          maxItems: 10,
          offset: '25px',
          placement: 'default',
          values: '0:100:10',
        },
        scaleYN: {
          alpha: 0.4,
          blended: true,
          item: {
            fontSize: 10,
          },
          maxItems: 10,
          offset: '25px',
          placement: 'default',
          values: '0:100:10',
        },
        scaleX2: {
          backgroundColor: '#014358',
          height: '200px',
          width: '200px',
          x: '260px',
          y: '30px',
        },
        scaleY2: {
          height: '200px',
          width: '200px',
          x: '260px',
          y: '30px',
        },
        scaleX3: {
          backgroundColor: '#264F14',
          height: '200px',
          width: '200px',
          x: '30px',
          y: '260px',
        },
        scaleY3: {
          height: '200px',
          width: '200px',
          x: '30px',
          y: '260px',
        },
        scaleX4: {
          backgroundColor: '#704F00',
          height: '200px',
          width: '200px',
          x: '260px',
          y: '260px',
        },
        scaleY4: {
          height: '200px',
          width: '200px',
          x: '260px',
          y: '260px',
        },
        series: [{
            values: data1,
            decimals: factor1 < 0 ? -factor1 : 0,
            marker: {
              fillType: 'radial',
              backgroundColor: '#55154D #21081d',
            },
            sizingGroup: 1,
          },
          {
            values: data2,
            decimals: factor2 < 0 ? -factor2 : 0,
            marker: {
              fillType: 'radial',
              backgroundColor: '#014358 #001b23',
            },
            scales: 'scale-x-2,scale-y-2',
            sizingGroup: 2,
          },
          {
            values: data3,
            decimals: factor3 < 0 ? -factor3 : 0,
            marker: {
              fillType: 'radial',
              backgroundColor: '#264F14 #19330d',
            },
            scales: 'scale-x-3,scale-y-3',
            sizingGroup: 3,
          },
          {
            values: data4,
            decimals: factor4 < 0 ? -factor4 : 0,
            marker: {
              fillType: 'radial',
              backgroundColor: '#704F00 #3a2900',
            },
            scales: 'scale-x-4,scale-y-4',
            sizingGroup: 4,
          },
        ],
      };
    
      // RENDER CHART
      // -----------------------------
      zingchart.render({
        id: chartId,
        width: layout === 'horizontal' ? '500px' : '600px',
        height: layout === 'horizontal' ? '600px' : '500px',
        output: 'svg',
        data: chartConfig,
        modules: 'bubble-legend',
        events: {
          load: load,
        },
      });
    }
    
    // DOM EVENTS
    // -----------------------------
    
    renderBtn.addEventListener('click', renderChart);
    
    // RENDER CHART ON LOAD
    // -----------------------------
    renderChart();