<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let bubbleData = [
[
[1, 100, 1],
[1, 90, 1],
[1, 80, 1],
[1, 70, 1],
[1, 60, 1],
[1, 50, 1],
[1, 40, 1],
[1, 30, 1],
[1, 20, 1],
[1, 10, 1],
[1, 0, 11]
],
[
[2, 100, 1],
[2, 90, 1],
[2, 80, 1],
[2, 70, 1],
[2, 60, 1],
[2, 50, 1],
[2, 40, 1],
[2, 30, 1],
[2, 20, 1],
[2, 10, 1],
[2, 0, 11]
],
[
[3, 100, 1],
[3, 90, 1],
[3, 80, 1],
[3, 70, 1],
[3, 60, 1],
[3, 50, 1],
[3, 40, 1],
[3, 30, 1],
[3, 20, 1],
[3, 10, 1],
[3, 0, 11]
],
[
[4, 100, 1],
[4, 90, 1],
[4, 80, 1],
[4, 70, 1],
[4, 60, 1],
[4, 50, 1],
[4, 40, 1],
[4, 30, 1],
[4, 20, 1],
[4, 10, 1],
[4, 0, 11]
],
[
[5, 100, 1],
[5, 90, 1],
[5, 80, 1],
[5, 70, 1],
[5, 60, 1],
[5, 50, 1],
[5, 40, 1],
[5, 30, 1],
[5, 20, 1],
[5, 10, 1],
[5, 0, 11]
],
[
[6, 100, 1],
[6, 90, 1],
[6, 80, 1],
[6, 70, 1],
[6, 60, 1],
[6, 50, 1],
[6, 40, 1],
[6, 30, 1],
[6, 20, 1],
[6, 10, 1],
[6, 0, 11]
],
[
[7, 100, 1],
[7, 90, 1],
[7, 80, 1],
[7, 70, 1],
[7, 60, 1],
[7, 50, 1],
[7, 40, 1],
[7, 30, 1],
[7, 20, 1],
[7, 10, 1],
[7, 0, 11]
]
];
let bDown = false;
// Current operation
let bDec = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
// Has the ability to change directions
let bChange = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
// Overrides the value of a node to it's largest value.
let ptr = 9;
let counter = 20;
setInterval(function() {
// Move the pointer
for (let col = 0; col < 7; col++) {
bubbleData[col][ptr][2] = 11;
}
if (!bDown) {
(ptr > 0) ? ptr-- : null;
} else {
(ptr < 10) ? ptr++ : null;
}
// Reduce large bubbles.
for (let col = 0; col < 7; col++) {
for (let row = 0; row < 11; row++) {
if (bDec[col][row]) {
(bubbleData[col][row][2] > 0) ? bubbleData[col][row][2]--: null;
if (bubbleData[col][row][2] == 0 && bChange[col][row]) {
bChange[col][row] = false;
bDec[col][row] = false;
}
} else {
(bubbleData[col][row][2] < 11) ? bubbleData[col][row][2]++: null;
if (bubbleData[col][row][2] == 11 && bChange[col][row]) {
bChange[col][row] = false;
bDec[col][row] = true;
}
}
}
}
// Check if a direction change is needed.
if (counter == 0) {
// Change Direction.
if (bDown) {
ptr = 10;
bDown = false;
} else {
ptr = 0;
bDown = true;
}
counter = 20;
} else {
counter--;
}
zingchart.exec('myChart', 'setseriesvalues', {
values: bubbleData
});
}, 60);
let chartData = [{
values: [
[1, 100, 0],
[1, 90, 0],
[1, 80, 0],
[1, 70, 0],
[1, 60, 0],
[1, 50, 0],
[1, 40, 0],
[1, 30, 0],
[1, 20, 0],
[1, 10, 0],
[1, 0, 10]
],
marker: {
alpha: 0.6,
backgroundColor: '#ebea2f',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 0
},
{
values: [
[2, 100, 0],
[2, 90, 0],
[2, 80, 0],
[2, 70, 0],
[2, 60, 0],
[2, 50, 0],
[2, 40, 0],
[2, 30, 0],
[2, 20, 0],
[2, 10, 0],
[2, 0, 10]
],
marker: {
alpha: 0.6,
backgroundColor: '#9d9ad1',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 1
},
{
values: [
[3, 100, 0],
[3, 90, 0],
[3, 80, 0],
[3, 70, 0],
[3, 60, 0],
[3, 50, 0],
[3, 40, 0],
[3, 30, 0],
[3, 20, 0],
[3, 10, 0],
[3, 0, 10]
],
marker: {
alpha: 0.8,
backgroundColor: '#29bfe4',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 2
},
{
values: [
[4, 100, 0],
[4, 90, 0],
[4, 80, 0],
[4, 70, 0],
[4, 60, 0],
[4, 50, 0],
[4, 40, 0],
[4, 30, 0],
[4, 20, 0],
[4, 10, 0],
[4, 0, 10]
],
marker: {
alpha: 0.8,
backgroundColor: '#29e45c',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 3
},
{
values: [
[5, 100, 0],
[5, 90, 0],
[5, 80, 0],
[5, 70, 0],
[5, 60, 0],
[5, 50, 0],
[5, 40, 0],
[5, 30, 0],
[5, 20, 0],
[5, 10, 0],
[5, 0, 10]
],
marker: {
alpha: 0.8,
backgroundColor: '#e43e29',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 4
},
{
values: [
[6, 100],
[6, 90, 0],
[6, 80, 0],
[6, 70, 0],
[6, 60, 0],
[6, 50, 0],
[6, 40, 0],
[6, 30, 0],
[6, 20, 0],
[6, 10, 0],
[6, 0, 10]
],
marker: {
alpha: 0.8,
backgroundColor: '#f19729',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 5
},
{
values: [
[7, 100, 0],
[7, 90, 0],
[7, 80, 0],
[7, 70, 0],
[7, 60, 0],
[7, 50, 0],
[7, 40, 0],
[7, 30, 0],
[7, 20, 0],
[7, 10, 0],
[7, 0, 10]
],
marker: {
alpha: 0.8,
backgroundColor: '#29f1d2',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 6
}
];
let chartConfig = {
type: 'bubble',
globals: {
shadow: false
},
plot: {
marker: {
borderWidth: '0px'
}
},
plotarea: {
margin: 'dynamic',
alpha: 0.3,
backgroundColor: '#fff'
},
scaleX: {
guide: {
alpha: 0.3,
lineColor: '#aaadb3',
lineStyle: 'solid'
},
item: {
paddingTop: '5px',
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px'
},
lineColor: '#aaadb3',
minorGuide: {
alpha: 0.2,
lineColor: '#aaadb3',
lineStyle: 'dashed'
},
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false
},
minorTicks: 1,
offsetStart: '50px',
offsetEnd: '50px',
shadow: false,
tick: {
lineColor: '#aaadb3'
}
},
scaleY: {
guide: {
alpha: 0
},
item: {
paddingRight: '5px',
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px'
},
lineColor: '#aaadb3',
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false
},
minorTicks: 1,
offsetStart: '60px',
offsetEnd: '60px',
shadow: false,
tick: {
lineColor: '#aaadb3'
}
},
tooltip: {
text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
textAlign: 'left'
},
series: chartData
};
zingchart.render({
id: 'myChart',
data: chartConfig,
width: '100%',
height: '100%',
});
</script>
</body>
</html>
let bubbleData = [[[1, 100, 1], [1, 90, 1], [1, 80, 1], [1, 70, 1], [1, 60, 1], [1, 50, 1], [1, 40, 1], [1, 30, 1], [1, 20, 1], [1, 10, 1], [1, 0, 11]], [[2, 100, 1], [2, 90, 1], [2, 80, 1], [2, 70, 1], [2, 60, 1], [2, 50, 1], [2, 40, 1], [2, 30, 1], [2, 20, 1], [2, 10, 1], [2, 0, 11]], [[3, 100, 1], [3, 90, 1], [3, 80, 1], [3, 70, 1], [3, 60, 1], [3, 50, 1], [3, 40, 1], [3, 30, 1], [3, 20, 1], [3, 10, 1], [3, 0, 11]], [[4, 100, 1], [4, 90, 1], [4, 80, 1], [4, 70, 1], [4, 60, 1], [4, 50, 1], [4, 40, 1], [4, 30, 1], [4, 20, 1], [4, 10, 1], [4, 0, 11]], [[5, 100, 1], [5, 90, 1], [5, 80, 1], [5, 70, 1], [5, 60, 1], [5, 50, 1], [5, 40, 1], [5, 30, 1], [5, 20, 1], [5, 10, 1], [5, 0, 11]], [[6, 100, 1], [6, 90, 1], [6, 80, 1], [6, 70, 1], [6, 60, 1], [6, 50, 1], [6, 40, 1], [6, 30, 1], [6, 20, 1], [6, 10, 1], [6, 0, 11]], [[7, 100, 1], [7, 90, 1], [7, 80, 1], [7, 70, 1], [7, 60, 1], [7, 50, 1], [7, 40, 1], [7, 30, 1], [7, 20, 1], [7, 10, 1], [7, 0, 11]]];
let bDown = false;
// Current operation
let bDec = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
// Has the ability to change directions
let bChange = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
// Overrides the value of a node to it's largest value.
let ptr = 9;
let counter = 20;
setInterval(function () {
// Move the pointer
for (let col = 0; col < 7; col++) {
bubbleData[col][ptr][2] = 11;
}
if (!bDown) {
(ptr > 0) ? ptr-- : null;
} else {
(ptr < 10) ? ptr++ : null;
}
// Reduce large bubbles.
for (let col = 0; col < 7; col++) {
for (let row = 0; row < 11; row++) {
if (bDec[col][row]) {
(bubbleData[col][row][2] > 0) ? bubbleData[col][row][2]-- : null;
if (bubbleData[col][row][2] == 0 && bChange[col][row]) {
bChange[col][row] = false;
bDec[col][row] = false;
}
} else {
(bubbleData[col][row][2] < 11) ? bubbleData[col][row][2]++ : null;
if (bubbleData[col][row][2] == 11 && bChange[col][row]) {
bChange[col][row] = false;
bDec[col][row] = true;
}
}
}
}
// Check if a direction change is needed.
if (counter == 0) {
// Change Direction.
if (bDown) {
ptr = 10;
bDown = false;
} else {
ptr = 0;
bDown = true;
}
counter = 20;
} else {
counter--;
}
zingchart.exec('myChart', 'setseriesvalues', {
values: bubbleData
});
}, 60);
let chartData = [
{
values: [[1, 100, 0], [1, 90, 0], [1, 80, 0], [1, 70, 0], [1, 60, 0], [1, 50, 0], [1, 40, 0], [1, 30, 0], [1, 20, 0], [1, 10, 0], [1, 0, 10]],
marker: {
alpha: 0.6,
backgroundColor: '#ebea2f',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 0
},
{
values: [[2, 100, 0], [2, 90, 0], [2, 80, 0], [2, 70, 0], [2, 60, 0], [2, 50, 0], [2, 40, 0], [2, 30, 0], [2, 20, 0], [2, 10, 0], [2, 0, 10]],
marker: {
alpha: 0.6,
backgroundColor: '#9d9ad1',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 1
},
{
values: [[3, 100, 0], [3, 90, 0], [3, 80, 0], [3, 70, 0], [3, 60, 0], [3, 50, 0], [3, 40, 0], [3, 30, 0], [3, 20, 0], [3, 10, 0], [3, 0, 10]],
marker: {
alpha: 0.8,
backgroundColor: '#29bfe4',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 2
},
{
values: [[4, 100, 0], [4, 90, 0], [4, 80, 0], [4, 70, 0], [4, 60, 0], [4, 50, 0], [4, 40, 0], [4, 30, 0], [4, 20, 0], [4, 10, 0], [4, 0, 10]],
marker: {
alpha: 0.8,
backgroundColor: '#29e45c',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 3
},
{
values: [[5, 100, 0], [5, 90, 0], [5, 80, 0], [5, 70, 0], [5, 60, 0], [5, 50, 0], [5, 40, 0], [5, 30, 0], [5, 20, 0], [5, 10, 0], [5, 0, 10]],
marker: {
alpha: 0.8,
backgroundColor: '#e43e29',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 4
},
{
values: [[6, 100], [6, 90, 0], [6, 80, 0], [6, 70, 0], [6, 60, 0], [6, 50, 0], [6, 40, 0], [6, 30, 0], [6, 20, 0], [6, 10, 0], [6, 0, 10]],
marker: {
alpha: 0.8,
backgroundColor: '#f19729',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 5
},
{
values: [[7, 100, 0], [7, 90, 0], [7, 80, 0], [7, 70, 0], [7, 60, 0], [7, 50, 0], [7, 40, 0], [7, 30, 0], [7, 20, 0], [7, 10, 0], [7, 0, 10]],
marker: {
alpha: 0.8,
backgroundColor: '#29f1d2',
borderColor: '#fff',
borderWidth: '1px'
},
palette: 6
}
];
let chartConfig = {
type: 'bubble',
globals: {
shadow: false
},
plot: {
marker: {
borderWidth: '0px'
}
},
plotarea: {
margin: 'dynamic',
alpha: 0.3,
backgroundColor: '#fff'
},
scaleX: {
guide: {
alpha: 0.3,
lineColor: '#aaadb3',
lineStyle: 'solid'
},
item: {
paddingTop: '5px',
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px'
},
lineColor: '#aaadb3',
minorGuide: {
alpha: 0.2,
lineColor: '#aaadb3',
lineStyle: 'dashed'
},
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false
},
minorTicks: 1,
offsetStart: '50px',
offsetEnd: '50px',
shadow: false,
tick: {
lineColor: '#aaadb3'
}
},
scaleY: {
guide: {
alpha: 0
},
item: {
paddingRight: '5px',
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px'
},
lineColor: '#aaadb3',
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false
},
minorTicks: 1,
offsetStart: '60px',
offsetEnd: '60px',
shadow: false,
tick: {
lineColor: '#aaadb3'
}
},
tooltip: {
text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
textAlign: 'left'
},
series: chartData
};
zingchart.render({
id: 'myChart',
data: chartConfig,
width: '100%',
height: '100%',
});
