Back

Bubble chart

Simple JavaScript bubble chart. Node sizes are determined based on the "radius" value in 'data'; and they are placed on a Cartesian coordinate plane using x and y coordinates in 'data' - use 'static' as layout mode. By default, value axis is not displayed, but it can be enabled and configured using 'valueAxis' object (NetChart v2 and newer) - visit documentation for more details.

Documentation Open in JSFiddle
Start Free Trial Purchase

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 
{
    "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
        }
    ]
}
Download Data