<!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 myConfig6 = {
"type": "bubble",
"tooltip": {
"text": "%node-size-value bubble value,<br>with `min-size' and 'max-size' set to %t, respectively"
},
"series": [{
"values": [
[1, 9, 59],
[3, 21, 30],
[5, 40, 35],
[7, 60, 25],
[9, 81, 87]
],
"min-size": 25, //Provide a pixel value. (Default is 15 pixels.)
"max-size": 100, //Provide a pixel value.
"text": "25 and 100"
},
{
"values": [
[1.5, 9, 59],
[3.5, 21, 30],
[5.5, 40, 35],
[7.5, 60, 25],
[9.5, 81, 87]
],
"min-size": 3, //Provide a pixel value. (Default is 15 pixels.)
"max-size": 10, //Provide a pixel value.
"text": "3 and 10"
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig6,
height: "100%",
width: "100%"
});
</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>
<div id='myChart'></div>
</body>
</html>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
var myConfig6 = {
"type": "bubble",
"tooltip": {
"text": "%node-size-value bubble value,<br>with `min-size' and 'max-size' set to %t, respectively"
},
"series": [{
"values": [
[1, 9, 59],
[3, 21, 30],
[5, 40, 35],
[7, 60, 25],
[9, 81, 87]
],
"min-size": 25, //Provide a pixel value. (Default is 15 pixels.)
"max-size": 100, //Provide a pixel value.
"text": "25 and 100"
},
{
"values": [
[1.5, 9, 59],
[3.5, 21, 30],
[5.5, 40, 35],
[7.5, 60, 25],
[9.5, 81, 87]
],
"min-size": 3, //Provide a pixel value. (Default is 15 pixels.)
"max-size": 10, //Provide a pixel value.
"text": "3 and 10"
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig6,
height: "100%",
width: "100%"
});