Bubble Legend Chart

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/6ZNEOBIH

<!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: {},
        },
        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>

// 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: {},
    },
    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();

.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; }

Survey Horizontal Stacked Bar Chart 54/281 Interactive Chart Game

Bubble Legend Chart

Related Documentation: