<!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: {
border: `1px dashed red`,
},
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>
.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: {
border: `1px dashed red`,
},
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();