Back

Dot matrix chart

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({
    "layout": {
        "mode": "static"
    },
    "style": {
        "node": {
            "label": "",
            "draggable": false
        }
    },
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/dot-matrix.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data
{
    "nodes": [
        {
            "id": "node1",
            "loaded": true,
            "style": {
                "title": "Idea #1",
                "radius": 30
            },
            "x": -900,
            "y": 0
        },
        {
            "id": "node2",
            "loaded": true,
            "style": {
                "title": "Idea #2",
                "radius": 40
            },
            "x": -800,
            "y": 0
        },
        {
            "id": "node3",
            "loaded": true,
            "style": {
                "title": "Idea #3",
                "radius": 25
            },
            "x": -700,
            "y": 0
        },
        {
            "id": "node4",
            "loaded": true,
            "style": {
                "title": "Idea #4",
                "radius": 30
            },
            "x": -600,
            "y": 0
        },
        {
            "id": "node5",
            "loaded": true,
            "style": {
                "title": "Idea #5",
                "radius": 15
            },
            "x": -500,
            "y": 0
        },
        {
            "id": "node6",
            "loaded": true,
            "style": {
                "title": "Idea #6",
                "radius": 40
            },
            "x": -400,
            "y": 0
        },
        {
            "id": "node7",
            "loaded": true,
            "style": {
                "title": "Idea #7",
                "radius": 20
            },
            "x": -300,
            "y": 0
        },
        {
            "id": "node8",
            "loaded": true,
            "style": {
                "title": "Idea #8",
                "radius": 30
            },
            "x": -200,
            "y": 0
        },
        {
            "id": "node9",
            "loaded": true,
            "style": {
                "title": "Idea #9",
                "radius": 30
            },
            "x": -100,
            "y": 0
        },
        {
            "id": "node10",
            "loaded": true,
            "style": {
                "title": "Idea #10",
                "radius": 20
            },
            "x": 0,
            "y": 0
        },
        {
            "id": "node11",
            "loaded": true,
            "style": {
                "title": "Idea #11",
                "radius": 30
            },
            "x": -900,
            "y": 100
        },
        {
            "id": "node12",
            "loaded": true,
            "style": {
                "title": "Idea #12",
                "radius": 14
            },
            "x": -800,
            "y": 100
        },
        {
            "id": "node13",
            "loaded": true,
            "style": {
                "title": "Idea #13",
                "radius": 16
            },
            "x": -700,
            "y": 100
        },
        {
            "id": "node14",
            "loaded": true,
            "style": {
                "title": "Idea #14",
                "radius": 6
            },
            "x": -600,
            "y": 100
        },
        {
            "id": "node15",
            "loaded": true,
            "style": {
                "title": "Idea #15",
                "radius": 30
            },
            "x": -500,
            "y": 100
        },
        {
            "id": "node16",
            "loaded": true,
            "style": {
                "title": "Idea #16",
                "radius": 20
            },
            "x": -400,
            "y": 100
        },
        {
            "id": "node17",
            "loaded": true,
            "style": {
                "title": "Idea #17",
                "radius": 18
            },
            "x": -300,
            "y": 100
        },
        {
            "id": "node18",
            "loaded": true,
            "style": {
                "title": "Idea #18",
                "radius": 16
            },
            "x": -200,
            "y": 100
        },
        {
            "id": "node19",
            "loaded": true,
            "style": {
                "title": "Idea #19",
                "radius": 14
            },
            "x": -100,
            "y": 100
        },
        {
            "id": "node20",
            "loaded": true,
            "style": {
                "title": "Idea #20",
                "radius": 12
            },
            "x": 0,
            "y": 100
        },
        {
            "id": "node21",
            "loaded": true,
            "style": {
                "title": "Idea #21",
                "radius": 12
            },
            "x": -900,
            "y": 200
        },
        {
            "id": "node22",
            "loaded": true,
            "style": {
                "title": "Idea #22",
                "radius": 8
            },
            "x": -800,
            "y": 200
        },
        {
            "id": "node23",
            "loaded": true,
            "style": {
                "title": "Idea #23",
                "radius": 10
            },
            "x": -700,
            "y": 200
        },
        {
            "id": "node24",
            "loaded": true,
            "style": {
                "title": "Idea #24",
                "radius": 25
            },
            "x": -600,
            "y": 200
        },
        {
            "id": "node25",
            "loaded": true,
            "style": {
                "title": "Idea #25",
                "radius": 30
            },
            "x": -500,
            "y": 200
        },
        {
            "id": "node26",
            "loaded": true,
            "style": {
                "title": "Idea #26",
                "radius": 15
            },
            "x": -400,
            "y": 200
        },
        {
            "id": "node27",
            "loaded": true,
            "style": {
                "title": "Idea #27",
                "radius": 35
            },
            "x": -300,
            "y": 200
        },
        {
            "id": "node28",
            "loaded": true,
            "style": {
                "title": "Idea #28",
                "radius": 30
            },
            "x": -200,
            "y": 200
        },
        {
            "id": "node29",
            "loaded": true,
            "style": {
                "title": "Idea #29",
                "radius": 40
            },
            "x": -100,
            "y": 200
        },
        {
            "id": "node30",
            "loaded": true,
            "style": {
                "title": "Idea #30",
                "radius": 30
            },
            "x": 0,
            "y": 200
        },
        {
            "id": "node31",
            "loaded": true,
            "style": {
                "title": "Idea #31",
                "radius": 30
            },
            "x": -900,
            "y": 300
        },
        {
            "id": "node32",
            "loaded": true,
            "style": {
                "title": "Idea #32",
                "radius": 35
            },
            "x": -800,
            "y": 300
        },
        {
            "id": "node33",
            "loaded": true,
            "style": {
                "title": "Idea #33",
                "radius": 15
            },
            "x": -700,
            "y": 300
        },
        {
            "id": "node34",
            "loaded": true,
            "style": {
                "title": "Idea #34",
                "radius": 45
            },
            "x": -600,
            "y": 300
        },
        {
            "id": "node35",
            "loaded": true,
            "style": {
                "title": "Idea #35",
                "radius": 20
            },
            "x": -500,
            "y": 300
        },
        {
            "id": "node36",
            "loaded": true,
            "style": {
                "title": "Idea #36",
                "radius": 30
            },
            "x": -400,
            "y": 300
        },
        {
            "id": "node37",
            "loaded": true,
            "style": {
                "title": "Idea #37",
                "radius": 45
            },
            "x": -300,
            "y": 300
        },
        {
            "id": "node38",
            "loaded": true,
            "style": {
                "title": "Idea #38",
                "radius": 18
            },
            "x": -200,
            "y": 300
        },
        {
            "id": "node39",
            "loaded": true,
            "style": {
                "title": "Idea #39",
                "radius": 35
            },
            "x": -100,
            "y": 300
        },
        {
            "id": "node40",
            "loaded": true,
            "style": {
                "title": "Idea #40",
                "radius": 22
            },
            "x": 0,
            "y": 300
        }
    ]
}
Download Data