neovis.js
neovis.js copied to clipboard
neo4j-contrib
Neovis In Grafana Panel
Hi is it possible to visualize neovis in grafana panel? I have created a new panel and tried html graphics plugin. i have paste my html code in the html tab. When i save i see that the panel gets the size of my html code but is not showing any nodes.
There is no reason that it shouldn't work 😅 can you maybe test the same thing outside of grafana? So you could more easily test and fix and afterward embed it in 😅
Hi in html file is working as expected.when i paste the code in grafana text plugin or html graphic plugin i see that there is a scroll up and and scroll down in the panel but the nodes are not coming. I have tried the same with custom component from Retool.Chart.js chart in html format is working perfect.Same thing with neovis is not working.In retool as well it seems to be a scrol down in the panel but is empty
here is my code for your reference @thebestnom
<!doctype html>
<html>
<head>
<title>Neo4J Graph Explorer</title>
<style type="text/css">
html, body {
font: 16pt arial;
}
#viz {
width: 1900px;
height: 1700px;
border: 1px solid lightgray;
font: 10pt arial;
}
</style>
<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
<script type="text/javascript">
const relations = "<-[r:BELONGS_TO*1..3]->";
const CFG = {
server: {
url: "bolt://1.1.1.1.1:7687",
user: "myuser",
password: "mypassword",
},
query: {
initial: "MATCH (d:Department)<-[r:BELONGS_TO]-(e:Employee) RETURN d,r,e"
},
render: {
node: {
active: { color: '#800080', size: 15 },
inactive: { color: '#55a', size: 10 },
fontSize: 14
},
link: {
color: '#888'
}
}
}
let viz;
let currentId;
function draw() {
const config = {
containerId: "viz",
neo4j: {
serverUrl: CFG.server.url,
serverUser: CFG.server.user,
serverPassword: CFG.server.password,
},
visConfig: {
nodes: {
shape: 'dot',
size: CFG.render.node.inactive.size,
font: { size: CFG.render.node.fontSize },
color: CFG.render.node.inactive.color
},
edges: {
arrows: {
to: {enabled: true},
},
color: CFG.render.link.color,
},
physics: {
solver: 'forceAtlas2Based'
}
},
labels: {
Department: {
label: "name",
title: "name",
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
function: { color: nodeColor, size: nodeSize, physics: nodePhysics }
},
},
Employee: {
label: "name",
title: "title",
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
function: { color: nodeColor, size: nodeSize, physics: nodePhysics, }
},
}
},
};
render(config);
}
function nodeColor(node) {
if (node.identity === currentId) return CFG.render.node.active.color;
if (node.labels[0] === "Department") return "#df00df";
if (node.labels[0] === "Employee") return "#0095df";
}
function nodeSize(node) {
if (node.identity === currentId) return CFG.render.node.active.size;
if (node.labels[0] === "Department") return CFG.render.node.inactive.size + 15;
return CFG.render.node.inactive.size;
}
function nodePhysics(node) {
if(node.identity === currentId) return false;
return true;
}
function cypherQuery() {
if(currentId) return CFG.query.byId(currentId);
return CFG.query.initial;
}
function render(config) {
viz = new NeoVis.default(config);
viz.renderWithCypher(cypherQuery());
viz.registerOnEvent("completed", (e) => {
viz.network.on("click", (e) => {
if(e.nodes[0]) {
currentId = e.nodes[0];
render(config);
}
});
});
}
</script>
</head>
<body onload="draw()">
<div id="viz"></div>
</body>
</html>