<!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>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig14 = {
"type": "bubble",
"tooltip": {
"text": "Bubble Chart Tokens:<br><br>X-axis value is %scale-key-value<br>Y-axis value is %node-value<br>Bubble value is %node-size-value<br><br>Also: %t",
"font-color": "black",
"font-family": "Georgia, serif",
"background-color": "white",
"border-color": "black",
"border-width": 2
},
"plot": {
"marker": {
"background-color": "#00FFFF",
"border-color": "#009999",
"border-width": 1,
"alpha": 0.3
}
},
"series": [{
"values": [
[1, 9, 59],
[2, 15, 15],
[3, 21, 30],
[4, 30, 5],
[5, 40, 35],
[6, 59, 21],
[7, 60, 25],
[8, 75, 85],
[9, 81, 87],
[10, 99, 12]
],
"text": "Stars",
"marker": {
"type": "star5",
"background-color": "#FF0066",
"border-color": "#FFFF66",
"border-width": 3,
"alpha": 0.7
}
},
{
"values": [
[0.9, 3, 18],
[2.1, 13, 21],
[3.5, 25, 33],
[4.9, 35, 54],
[5.3, 41, 59],
[6.5, 57, 34],
[7.1, 61, 17],
[8.7, 70, 3],
[9.2, 82, 28],
[9.9, 95, 76]
],
"text": "Bubbles"
},
{
"values": [
[0.1, 9, 3],
[1.8, 21, 60],
[1.9, 29, 9],
[4.1, 33, 9],
[4.5, 39, 4],
[6.9, 51, 3],
[7.4, 64, 11],
[8.9, 70, 12],
[9, 75, 3],
[9.3, 93, 29]
],
"text": "Bubbles"
},
{
"values": [
[0.3, 11, 11],
[0.9, 15, 21],
[1.1, 24, 54],
[2.3, 29, 6],
[2.9, 30, 9],
[3.3, 35, 59],
[5.6, 67, 30],
[6.9, 70, 14],
[7.3, 71, 7],
[8.9, 90, 9]
],
"text": "Bubbles"
},
{
"values": [
[0.5, 5, 8],
[1.9, 5, 3],
[2.5, 10, 2],
[3.1, 30, 8],
[6.5, 45, 87],
[6.9, 74, 1],
[7.2, 50, 7],
[7.8, 56, 20],
[8, 61, 3],
[8.5, 71, 4]
],
"text": "Bubbles"
}
]
};
var myConfig15 = {
"type": "bubble",
"legend": {
"layout": "5x1",
"position": "97% 73%",
"item": {
"font-color": "brown",
"font-family": "Georgia"
},
"background-color": "white",
"alpha": 0.5,
"border-color": "none",
"shadow": false,
"marker": {
"type": "inherit",
}
},
"series": [{
"values": [
[1, 9, 59],
[2, 15, 15],
[3, 21, 30],
[4, 30, 5],
[5, 40, 35],
[6, 59, 21],
[7, 60, 25],
[8, 75, 85],
[9, 81, 87],
[10, 99, 12]
],
"text": "Kale",
"marker": {
"type": "rpoly6",
"alpha": 0.7
}
},
{
"values": [
[0.9, 3, 18],
[2.1, 13, 21],
[3.5, 25, 33],
[4.9, 35, 54],
[5.3, 41, 59],
[6.5, 57, 34],
[7.1, 61, 17],
[8.7, 70, 3],
[9.2, 82, 28],
[9.9, 95, 76]
],
"text": "Blueberries",
"marker": {
"type": "circle",
"alpha": 0.7
}
},
{
"values": [
[0.1, 9, 3],
[1.8, 21, 60],
[1.9, 29, 9],
[4.1, 33, 9],
[4.5, 39, 4],
[6.9, 51, 3],
[7.4, 64, 11],
[8.9, 70, 12],
[9, 75, 3],
[9.3, 93, 29]
],
"text": "Tomatoes",
"marker": {
"type": "triangle",
"alpha": 0.7
}
},
{
"values": [
[0.3, 11, 11],
[0.9, 15, 21],
[1.1, 24, 54],
[2.3, 29, 6],
[2.9, 30, 9],
[3.3, 35, 59],
[5.6, 67, 30],
[6.9, 70, 14],
[7.3, 71, 7],
[8.9, 90, 9]
],
"text": "Pineapples",
"marker": {
"type": "diamond",
"alpha": 0.7
}
},
{
"values": [
[0.5, 5, 8],
[1.9, 5, 3],
[2.5, 10, 2],
[3.1, 30, 8],
[6.5, 45, 87],
[6.9, 74, 1],
[7.2, 50, 7],
[7.8, 56, 20],
[8, 61, 3],
[8.5, 71, 4]
],
"text": "Mushrooms",
"marker": {
"type": "gear5",
"alpha": 0.7
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig14,
height: "100%",
width: "100%"
});
</script>
</body>
</html>
var myConfig14 = {
"type": "bubble",
"tooltip": {
"text": "Bubble Chart Tokens:<br><br>X-axis value is %scale-key-value<br>Y-axis value is %node-value<br>Bubble value is %node-size-value<br><br>Also: %t",
"font-color": "black",
"font-family": "Georgia, serif",
"background-color": "white",
"border-color": "black",
"border-width": 2
},
"plot": {
"marker": {
"background-color": "#00FFFF",
"border-color": "#009999",
"border-width": 1,
"alpha": 0.3
}
},
"series": [{
"values": [
[1, 9, 59],
[2, 15, 15],
[3, 21, 30],
[4, 30, 5],
[5, 40, 35],
[6, 59, 21],
[7, 60, 25],
[8, 75, 85],
[9, 81, 87],
[10, 99, 12]
],
"text": "Stars",
"marker": {
"type": "star5",
"background-color": "#FF0066",
"border-color": "#FFFF66",
"border-width": 3,
"alpha": 0.7
}
},
{
"values": [
[0.9, 3, 18],
[2.1, 13, 21],
[3.5, 25, 33],
[4.9, 35, 54],
[5.3, 41, 59],
[6.5, 57, 34],
[7.1, 61, 17],
[8.7, 70, 3],
[9.2, 82, 28],
[9.9, 95, 76]
],
"text": "Bubbles"
},
{
"values": [
[0.1, 9, 3],
[1.8, 21, 60],
[1.9, 29, 9],
[4.1, 33, 9],
[4.5, 39, 4],
[6.9, 51, 3],
[7.4, 64, 11],
[8.9, 70, 12],
[9, 75, 3],
[9.3, 93, 29]
],
"text": "Bubbles"
},
{
"values": [
[0.3, 11, 11],
[0.9, 15, 21],
[1.1, 24, 54],
[2.3, 29, 6],
[2.9, 30, 9],
[3.3, 35, 59],
[5.6, 67, 30],
[6.9, 70, 14],
[7.3, 71, 7],
[8.9, 90, 9]
],
"text": "Bubbles"
},
{
"values": [
[0.5, 5, 8],
[1.9, 5, 3],
[2.5, 10, 2],
[3.1, 30, 8],
[6.5, 45, 87],
[6.9, 74, 1],
[7.2, 50, 7],
[7.8, 56, 20],
[8, 61, 3],
[8.5, 71, 4]
],
"text": "Bubbles"
}
]
};
var myConfig15 = {
"type": "bubble",
"legend": {
"layout": "5x1",
"position": "97% 73%",
"item": {
"font-color": "brown",
"font-family": "Georgia"
},
"background-color": "white",
"alpha": 0.5,
"border-color": "none",
"shadow": false,
"marker": {
"type": "inherit",
}
},
"series": [{
"values": [
[1, 9, 59],
[2, 15, 15],
[3, 21, 30],
[4, 30, 5],
[5, 40, 35],
[6, 59, 21],
[7, 60, 25],
[8, 75, 85],
[9, 81, 87],
[10, 99, 12]
],
"text": "Kale",
"marker": {
"type": "rpoly6",
"alpha": 0.7
}
},
{
"values": [
[0.9, 3, 18],
[2.1, 13, 21],
[3.5, 25, 33],
[4.9, 35, 54],
[5.3, 41, 59],
[6.5, 57, 34],
[7.1, 61, 17],
[8.7, 70, 3],
[9.2, 82, 28],
[9.9, 95, 76]
],
"text": "Blueberries",
"marker": {
"type": "circle",
"alpha": 0.7
}
},
{
"values": [
[0.1, 9, 3],
[1.8, 21, 60],
[1.9, 29, 9],
[4.1, 33, 9],
[4.5, 39, 4],
[6.9, 51, 3],
[7.4, 64, 11],
[8.9, 70, 12],
[9, 75, 3],
[9.3, 93, 29]
],
"text": "Tomatoes",
"marker": {
"type": "triangle",
"alpha": 0.7
}
},
{
"values": [
[0.3, 11, 11],
[0.9, 15, 21],
[1.1, 24, 54],
[2.3, 29, 6],
[2.9, 30, 9],
[3.3, 35, 59],
[5.6, 67, 30],
[6.9, 70, 14],
[7.3, 71, 7],
[8.9, 90, 9]
],
"text": "Pineapples",
"marker": {
"type": "diamond",
"alpha": 0.7
}
},
{
"values": [
[0.5, 5, 8],
[1.9, 5, 3],
[2.5, 10, 2],
[3.1, 30, 8],
[6.5, 45, 87],
[6.9, 74, 1],
[7.2, 50, 7],
[7.8, 56, 20],
[8, 61, 3],
[8.5, 71, 4]
],
"text": "Mushrooms",
"marker": {
"type": "gear5",
"alpha": 0.7
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig14,
height: "100%",
width: "100%"
});