<!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 myConfig11 = {
"type": "bubble",
"utc": true,
"timezone": -8,
"scale-x": {
"label": {
"text": "Bubble Chart with a Time-Series Scale"
},
"min-value": 1425196800000,
"step": "2day",
"transform": {
"type": "date",
"all": "%m/%d/%y"
}
},
"tooltip": {
"text": "%scale-key-value:<br>%node-size-value"
},
"series": [{
"values": [
[1425225600000, 9, 59],
[1425312000000, 15, 15],
[1425398400000, 21, 30],
[1425484800000, 30, 5],
[1425571200000, 40, 35],
[1425657600000, 59, 21],
[1425744000000, 60, 25],
[1425826800000, 75, 85],
[1425913200000, 81, 87],
[1425999600000, 99, 12]
]
},
{
"values": [
[1425243600000, 3, 18],
[1425322800000, 13, 21],
[1425391200000, 25, 33],
[1425470400000, 35, 54],
[1425574800000, 41, 59],
[1425697200000, 57, 34],
[1425772800000, 61, 17],
[1425866400000, 70, 3],
[1425938400000, 82, 28],
[1425985200000, 95, 76]
]
},
{
"values": [
[1425279600000, 9, 3],
[1425301200000, 21, 60],
[1425430800000, 29, 9],
[1425488400000, 33, 9],
[1425614400000, 39, 4],
[1425708000000, 51, 3],
[1425718800000, 64, 11],
[1425859200000, 70, 12],
[1425931200000, 75, 3],
[1426042800000, 93, 29]
]
},
{
"values": [
[1425200400000, 11, 11],
[1425358800000, 15, 21],
[1425441600000, 24, 54],
[1425535200000, 29, 6],
[1425574800000, 30, 9],
[1425646800000, 35, 59],
[1425754800000, 67, 30],
[1425852000000, 70, 14],
[1425888000000, 71, 7],
[1426014000000, 90, 9]
]
},
{
"values": [
[1425236400000, 5, 8],
[1425337200000, 5, 3],
[1425384000000, 10, 2],
[1425488400000, 30, 8],
[1425610800000, 45, 87],
[1425686400000, 74, 1],
[1425783600000, 50, 7],
[1425816000000, 56, 20],
[1425898800000, 61, 3],
[1426028400000, 71, 4]
]
},
]
};
zingchart.render({
id: 'myChart',
data: myConfig11,
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 myConfig11 = {
"type": "bubble",
"utc": true,
"timezone": -8,
"scale-x": {
"label": {
"text": "Bubble Chart with a Time-Series Scale"
},
"min-value": 1425196800000,
"step": "2day",
"transform": {
"type": "date",
"all": "%m/%d/%y"
}
},
"tooltip": {
"text": "%scale-key-value:<br>%node-size-value"
},
"series": [{
"values": [
[1425225600000, 9, 59],
[1425312000000, 15, 15],
[1425398400000, 21, 30],
[1425484800000, 30, 5],
[1425571200000, 40, 35],
[1425657600000, 59, 21],
[1425744000000, 60, 25],
[1425826800000, 75, 85],
[1425913200000, 81, 87],
[1425999600000, 99, 12]
]
},
{
"values": [
[1425243600000, 3, 18],
[1425322800000, 13, 21],
[1425391200000, 25, 33],
[1425470400000, 35, 54],
[1425574800000, 41, 59],
[1425697200000, 57, 34],
[1425772800000, 61, 17],
[1425866400000, 70, 3],
[1425938400000, 82, 28],
[1425985200000, 95, 76]
]
},
{
"values": [
[1425279600000, 9, 3],
[1425301200000, 21, 60],
[1425430800000, 29, 9],
[1425488400000, 33, 9],
[1425614400000, 39, 4],
[1425708000000, 51, 3],
[1425718800000, 64, 11],
[1425859200000, 70, 12],
[1425931200000, 75, 3],
[1426042800000, 93, 29]
]
},
{
"values": [
[1425200400000, 11, 11],
[1425358800000, 15, 21],
[1425441600000, 24, 54],
[1425535200000, 29, 6],
[1425574800000, 30, 9],
[1425646800000, 35, 59],
[1425754800000, 67, 30],
[1425852000000, 70, 14],
[1425888000000, 71, 7],
[1426014000000, 90, 9]
]
},
{
"values": [
[1425236400000, 5, 8],
[1425337200000, 5, 3],
[1425384000000, 10, 2],
[1425488400000, 30, 8],
[1425610800000, 45, 87],
[1425686400000, 74, 1],
[1425783600000, 50, 7],
[1425816000000, 56, 20],
[1425898800000, 61, 3],
[1426028400000, 71, 4]
]
},
]
};
zingchart.render({
id: 'myChart',
data: myConfig11,
height: "100%",
width: "100%"
});