Central Layout Gravity
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
<div id="info" style="position: absolute; pointer-events: none"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var nc = null;
var nodes_spawned = 0;
var update_interval = null;
var nodes_per_cycle = 5;
var spawn_delay = 200;
var max = 1000;
var restart_timeout = 6000;
var t = null;
var dom_info = document.getElementById("info");
var players = 3;
var colors = [
"red",
"green",
"blue",
"orange"
];
function push() {
var nodes = [];
for (var c = 0; c < nodes_per_cycle; c++) {
player = Math.round(Math.random() * players);
const value = 15 + Math.random() * 10
nodes.push({
id: "a" + nodes_spawned,
player: player,
value,
style: {
fillColor: colors[player],
radius: Math.round(value),
label: ""
}
});
nodes_spawned++;
}
nc.addData({ nodes: nodes });
updateInfo();
if(nodes_spawned >= max) {
clearInterval(t);
setTimeout(function() {
start();
}, restart_timeout);
}
}
function updateInfo() {
var s = "Total: " + nodes_spawned + ";";
dom_info.innerHTML = s;
}
function start() {
if(nc) {
nc.remove();
}
nc = new NetChart({
container: document.getElementById("demo"),
navigation: {
mode: "showall"
},
layout: {
dynamic: {
centralGravityFactor: 10.0
}
},
interaction: {
resizing: {
enabled: false
}
}
});
nodes_spawned = 0;
t = setInterval(push, spawn_delay);
for (var i = 0; i < 2; i++) {
push();
}
}
start();
Data
Data
//No separate data for this example