Bubble chart
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
chart= new NetChart({
"navigation": {
"mode": "showall"
},
"layout": {
"mode": "static"
},
"style": {
"node": {
"label": ""
}
},
"container": "demo",
"data": [
{
"url": "/dvsl/data/extra/ideas-xy.json"
}
],
"toolbar": {
"fullscreen": true,
"enabled": true
},
"interaction": {
"resizing": {
"enabled": false
}
}
})
Data
Data
Download Data
{
"nodes": [
{
"id": "node1",
"loaded": true,
"style": {
"title": "Idea #1",
"radius": 10
},
"x": 0,
"y": 50
},
{
"id": "node2",
"loaded": true,
"style": {
"title": "Idea #2",
"radius": 30
},
"x": 60,
"y": 50
},
{
"id": "node3",
"loaded": true,
"style": {
"title": "Idea #3",
"radius": 5
},
"x": 30,
"y": 80
},
{
"id": "node4",
"loaded": true,
"style": {
"title": "Idea #4",
"radius": 15
},
"x": 200,
"y": 0
},
{
"id": "node5",
"loaded": true,
"style": {
"title": "Idea #5",
"radius": 35
},
"x": -120,
"y": 35
},
{
"id": "node6",
"loaded": true,
"style": {
"title": "Idea #6",
"radius": 10
},
"x": -80,
"y": -30
},
{
"id": "node7",
"loaded": true,
"style": {
"title": "Idea #7",
"radius": 25
},
"x": -120,
"y": -55
},
{
"id": "node8",
"loaded": true,
"style": {
"title": "Idea #8",
"radius": 8
},
"x": 100,
"y": 100
},
{
"id": "node9",
"loaded": true,
"style": {
"title": "Idea #9",
"radius": 8
},
"x": 150,
"y": 150
},
{
"id": "node10",
"loaded": true,
"style": {
"title": "Idea #10",
"radius": 12
},
"x": 160,
"y": 125
},
{
"id": "node11",
"loaded": true,
"style": {
"title": "Idea #11",
"radius": 4
},
"x": -80,
"y": 45
},
{
"id": "node12",
"loaded": true,
"style": {
"title": "Idea #12",
"radius": 5
},
"x": -180,
"y": 65
},
{
"id": "node13",
"loaded": true,
"style": {
"title": "Idea #13",
"radius": 18
},
"x": -205,
"y": 65
},
{
"id": "node14",
"loaded": true,
"style": {
"title": "Idea #14",
"radius": 11
},
"x": -165,
"y": 85
},
{
"id": "node15",
"loaded": true,
"style": {
"title": "Idea #15",
"radius": 5
},
"x": -30,
"y": 85
},
{
"id": "node16",
"loaded": true,
"style": {
"title": "Idea #16",
"radius": 8
},
"x": 95,
"y": 10
},
{
"id": "node17",
"loaded": true,
"style": {
"title": "Idea #17",
"radius": 12
},
"x": -145,
"y": 15
}
]
}