Dot matrix chart
Simple matrix chart that displays each node at a static position. Achieved by providing x and y coordinates for each node in data and enabling 'static' layout mode. The nodes are locked in position and cannot be moved by the user because 'draggable: false' under 'style'->'node'.
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
Download 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
}
]
}