I want to visualize the graph from my neo4j database like this using HTML Graph in Neo4j.
When I try to run this code
<html>
<head>
<title>DataViz</title>
<style type="text/css">
#viz {
width: 900px;
height: 700px;
}
</style>
<script src="https://unpkg.com/neovis.js#2.0.2/dist/neovis-without-dependencies.js"></script>
</head>
<script type="text/javascript">
var viz;
function draw() {
var config = {
container_id: "viz",
server_url: "bolt://localhost",
server_user: "neo4j",
server_password: "***",
labels: {
},
relationships: {
},
initial_cypher: "MATCH p= (:Idea)-[:contains]->(:Keyphrase) RETURN p"
}
viz = new NeoVis.default(config);
viz.render();
}
</script>
<body onload="draw()">
<div id="viz"></div>
</body>
</html>
I get the following errors. I tried to follow this tutorial https://www.youtube.com/watch?v=0-1A7f8993M&t=317s&ab_channel=Neo4j but can't get it to work. I am very unexperienced with HTML and js so would very much appreciate some help with this simple example.
This is working for me. The fixes are 1) location of Neovis.js 2) and change the config parameter names like serverUrl instead of server_url.
<html>
<head>
<title>DataViz</title>
<style type="text/css">
#viz {
width: 900px;
height: 700px;
}
</style>
<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
</head>
<script type="text/javascript">
var viz;
function draw() {
var config = {
containerId: "viz",
neo4j: {
serverUrl: "bolt://localhost:7687",
serverUser: "neo4j",
serverPassword: "awesome_password"
},
labels: {
},
relationships: {
},
initialCypher: "MATCH p = (:Character)-[:INTERACTS]->(:Character) RETURN p LIMIT 10"
};
viz = new NeoVis.default(config);
viz.render();
}
</script>
<body onload="draw()">
<div id="viz"></div>
</body>
</html>
Related
I have a piece of code in VEXFLOW
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
<script>
$(function() {
import Vex from 'vexflow';
const vf = new Vex.Flow.Factory({
renderer: {elementId: 'boo', width: 500, height: 200}
});
const score = vf.EasyScore();
const system = vf.System();
system.addStave({
voices: [
score.voice(score.notes('C#5/q, B4, A4, G#4', {stem: 'up'})),
score.voice(score.notes('C#4/h, C#4', {stem: 'down'}))
]
}).addClef('treble').addTimeSignature('4/4');
vf.draw();
});
</script>
</head>
<body>
<div id="boo"></div>
</body></html>
Why this code is not rendering nothing.
Nothing is visible in browser.
<!DOCTYPE html>
<html>
<body>
<div id="boo"></div>
</body>
</html>
<script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
<script>
const vf = new Vex.Flow.Factory({
renderer: { elementId: "boo", width: 500, height: 200 }
});
const score = vf.EasyScore();
const system = vf.System();
system
.addStave({
voices: [
score.voice(score.notes("C#5/q, B4, A4, G#4", { stem: "up" })),
score.voice(score.notes("C#4/h, C#4", { stem: "down" }))
]
})
.addClef("treble")
.addTimeSignature("4/4");
vf.draw();
</script>
I'm creating web application with zTree.
The tree is built based on data from the Golang backend.
Tree leaves change custom icons while the application is running.
How to change icons, based on backend data, without refreshing the page?
With http-equiv="refresh" page is blinking and lost focus. Here is working but blinking sample with zTree and refresh (I cut of backend part for simplicity):
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5">
<link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.ztree.core.js"></script>
</HEAD>
<BODY>
<div id="app">
<TABLE>
<TR>
<TD width=260px valign=top>
<ul id="tree" class="ztree"></ul>
</TD>
<TD valign=top>
<p>Some text</p>
</TD>
</TR>
</TABLE>
<SCRIPT type="text/javascript">
var zTree;
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
var zNodes = [
{id: 1, pId: 0, name: "root", icon:"../static/css/zTreeStyle/img/diy/c16green.png"},
{id: 2, pId: 1, name: "leaf", icon:"../static/css/zTreeStyle/img/diy/c16red.png"},
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
</script>
</div>
</BODY>
</HTML>
I try to use Vue.js, but cannot bind data to zTree. Here is not working sample with Vue.js data binding inside script tag:
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.ztree.core.js"></script>
<script src="https://unpkg.com/vue"></script>
</HEAD>
<BODY>
<div id="app">
<TABLE>
<TR>
<TD width=260px valign=top>
<ul id="tree" class="ztree"></ul>
</TD>
<TD valign=top>
<p>{{ now }}</p>
<p>Some text</p>
</TD>
</TR>
</TABLE>
<SCRIPT type="text/javascript">
var zTree;
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
var zNodes = [
{id: 1, pId: 0, name: "root", icon:"../static/css/zTreeStyle/img/diy/c16green.png"},
{id: 2, pId: 1, name: "leaf", icon:"../static/css/zTreeStyle/img/diy/c16red.png"},
{id: 3, pId: 1, name: "foo", icon: {{ customIcon }} },
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
const app = new Vue({
el: '#app',
data: {
now: new Date(),
customIcon : "../static/css/zTreeStyle/img/diy/c16green.png"
},
methods: {
updateDate() {
this.now = new Date();
}
},
mounted() {
setInterval(() => {
this.updateDate();
}, 1000);
},
})
</script>
</div>
</BODY>
</HTML>
Zipped sample (examples are inside template directory): https://drive.google.com/file/d/1Ihv8jLdsEz93aUrFjEugD1l6YvslaUT8
The solution contains a few steps:
use "go-echo-vue" for communication between backend and frontend like here: https://github.com/covrom/go-echo-vue
update zTree data using vue-resource and timer like this:
<script>
new Vue({
// ....
methods: {
updateZNodes() {
// запрашиваем дерево :)
this.$http.get('/znodes').then(function (response) {
zNodes = response.data.items ? response.data.items : []
}, function (error) {
console.log(error)
});
},
},
mounted() {
setInterval(() => {
this.updateZNodes();
}, 5000);
},
// ....
})</script>
refrest zTree nodes information using js:
<script language="JavaScript">
function refreshNode() {
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
if (nodes.length > 0) {
for (let i = 0; i < nodes.length; i++) {
c = "static/css/zTreeStyle/img/diy/c16grey.png";
if (zNodes.length >= i) {
c = zNodes[i].icon
}
nodes[i].icon = c;
treeObj.updateNode(nodes[i]);
}
}
};
const timerId = setInterval(
() => {
refreshNode();
},
5000
);
</script>
add async zTree settings:
<script language="JavaScript">
var setting = {
// ....
async: {
enable: true,
url: "",
autoparam: ["id", "icon"],
datatype: "json",
},
// ....
};
</script>
That's all. So we have Vue function http.get to get fresh data from backend, global js variable to use that data both inside Vue code segment and JavaScript blocks.
PS additional information: https://www.tutorialfor.com/blog-188266.htm
I would like to create an interactive image using goJs, however when i try and follow the tutorial to create a basic visual the output I get is just a blank box and not an interactive image with the words 'Alpha' and 'Beta' connected by a line.
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script src="go.js"></script>
<script>
function init() {
var $ = gp.GraphObject.make;
myDiagram = $(go.Diagram, "decisionTree");
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" }
];
var linkDataArray = [
{ to: "Beta", from: "Alpha" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
}
</script>
</head>
<body onload="init"()>
<div id="decisionTree" style="width:300px; height:300px; border:1px solid black;"></div>
</body>
</html>
Tutorial: https://www.youtube.com/watch?v=7cfHF7yAoJE#action=share
You are loading two different versions of the GoJS library. I suggest you remove the line:
<script src="go.js"></script>
EDIT: In addition, there are some typos that I missed before when just reading your code. This actually works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script>
function init() {
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "decisionTree");
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" }
];
var linkDataArray = [
{ to: "Beta", from: "Alpha" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
}
</script>
</head>
<body onload="init()">
<div id="decisionTree" style="width:300px; height:300px; border:1px solid black;"></div>
</body>
</html>
I'm not familiar with js. I'd like to get the result of "file_get_contents" function and put it on the "source" (I have marked both with "https://.................).
Thank you in advance.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
content = JSON.parse(data)
fetch(content['some']['media']['content'], myInit).then((resp) =>
resp.text()).then(function(data));});}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
var player = new Clappr.Player({
source: 'http://......................',
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});};
</script>
</body>
</html>
im trying to execute on local this file
https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/test_DataSeries.html
but i have this error:
Uncaught TypeError: Cannot read property 'ItemFileWriteStore' of undefined
when i run this code on local:
would u mind to help me? thanks !!
<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
<head>
<![endif]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DataSeries Test</title>
https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/test_DataSeries.html
<link rel="stylesheet" href="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dijit/tests/css/dijitTests.css"/>
<style>
.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px;}
.dojoxLegendText {vertical-align: text-top; padding-right: 10px}
#charts {
clear: both;
margin-bottom: 50px;
}
.chart-area {
float: left;
border: 1px solid #ccc;
width: 450px;
height: 350px;
margin: 3px;
}
.chart {
width: 450px;
height: 300px;
}
</style>
<script src="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad: true"></script>
<script>
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.DataSeries");
dojo.require("dojox.charting.themes.ThreeD");
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Markers");
dojo.require("dojox.charting.plot2d.Columns");
dojo.require("dojox.charting.plot2d.Pie");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Magnify");
dojo.require("dojox.charting.action2d.Shake");
dojo.require("dojo.data");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.NumberSpinner");
var store = new dojo.data.ItemFileWriteStore({url: "https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/stock.json"});
function addLegend(chart, node){
var legend = new dojox.charting.widget.Legend({chart: chart}, node);
dojo.connect(chart, "render", legend, "refresh");
}
var templates = {
low: "<strong>{0}</strong>: <strong>low {1}</strong> – {2} – {3}",
price: "<strong>{0}</strong>: {1} – <strong>price {2}</strong> – {3}",
high: "<strong>{0}</strong>: {1} – {2} – <strong>high {3}</strong>"
};
function valTrans(value, store, item){
return {
y: store.getValue(item, value),
tooltip: dojo.replace(
templates[value],
dojo.map(["symbol", "low", "price", "high"], function(field){
return store.getValue(item, field);
})
)
};
}
var chartL, chartC, chartP;
makeCharts = function(){
chartL = new dojox.charting.Chart("lines").
setTheme(dojox.charting.themes.ThreeD).
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, majorTickStep: 5}).
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
addPlot("default", {type: dojox.charting.plot2d.Markers}).
addSeries("Price", new dojox.charting.DataSeries(
store, {query: {symbol: "*"}}, "price")).
render();
addLegend(chartL, "lines_legend");
new dojox.charting.action2d.Magnify(chartL);
new dojox.charting.action2d.Tooltip(chartL);
chartC = new dojox.charting.Chart("cols").
setTheme(dojox.charting.themes.ThreeD).
addAxis("x", {natural: true}).
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
addPlot("default", {type: dojox.charting.plot2d.Columns}).
addSeries("Low", new dojox.charting.DataSeries(
store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "low"))).
addSeries("Price", new dojox.charting.DataSeries(
store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "price"))).
addSeries("High", new dojox.charting.DataSeries(
store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "high"))).
render();
addLegend(chartC, "cols_legend");
new dojox.charting.action2d.Shake(chartC, "default", {shiftY: 0});
new dojox.charting.action2d.Tooltip(chartC);
chartP = new dojox.charting.Chart("pie").
setTheme(dojox.charting.themes.ThreeD).
addPlot("default", {type: dojox.charting.plot2d.Pie, radius: 125}).
addSeries("Price", new dojox.charting.DataSeries(
store, {query: {symbol: "*"}}, {y: "price", text: "symbol", tooltip: "price"})).
render();
addLegend(chartP, "pie_legend");
new dojox.charting.action2d.Tooltip(chartP);
new dojox.charting.action2d.MoveSlice(chartP);
};
makeSpinners = function(items){
dojo.forEach(items, function(m){
var nm = store.getLabel(m);
var num = store.getValue(m, "price");
console.log(nm, num);
var w = new dijit.form.NumberSpinner({
onChange: function(val){
val = val===0 ? 0.01 : val; //HACKS the no label-when-zero bug
console.log("OC:", nm, val);
store.setValue(m, "price", val);
//store.setValues(m, "historicPrice", store.getValues("historicPrice").push(val));
console.log("OC:", nm, val);
},
value: num,
constraints: {min:0, max:10,places:2},
className: "myField",
intermediateChanges: true
});
dojo.place('<label>'+nm+'</label>', dojo.byId("spinners"), "last")
dojo.place(w.domNode, "spinners", "last")
});
var labels = dojo.map(items, function(item, index){
return {
value: index + 1,
text: store.getLabel(item)
}
});
chartC.addAxis("x", {natural: true, labels: labels}).render();
}
dojo.addOnLoad(function(){
makeCharts();
console.log(store.getFeatures())
store.fetch({query:{symbol:"*"}, onComplete: makeSpinners, onError:function(err){console.error(err)}})
});
</script>
</head>
<body class="claro">
<h1>DataSeries Test</h1>
<p>
Use the spinner fields at the bottom to change the data. The charts listen to store changes an update automatically.
</p>
<div id="charts">
<div class="chart-area">
<div id="lines_legend"></div>
<div id="lines" class="chart"></div>
</div>
<div class="chart-area">
<div id="cols_legend"></div>
<div id="cols" class="chart"></div>
</div>
<div class="chart-area">
<div id="pie_legend"></div>
<div id="pie" class="chart"></div>
</div>
</div>
<div id="spinners"></div>
</body>
</html>
Your problem consists of two things;
dojo.data does not exist for the dojo version youre using, hence dojo.require("dojo.data") results in a 404 Not Found error (this line of code is not in the sample file youre copying either though)
Youre trying to make 'new itemfilestore' before the onload / dojo.ready has completed
In regards to #2, this is an issue because youre fetching dojo from remote, in other words dojo.require works as an asynchronous function
Once you get these things in order, a third problem will occur.. You may not use cross-domain/cross-protocol resources for the ItemFileWriteStore. Hence, the following code will fail with a security exception:
makeCharts = function(){
console.log('makeCharts: is wrapped in onload');
store = new dojo.data.ItemFileWriteStore({url: "https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/stock.json"});
store.fetch();
A fix could be to download stock.json to local disk and reference the store url from there