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>
I'm trying to set theme using plugin in New version of chartjs 3.9.1, i'm trying to add "chartjs-plugin-colorschemes" plugin, link is: https://nagix.github.io/chartjs-plugin-colorschemes/.
In old version of chartjs v2.9.3 is working fine with this plugin.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.9.1)</p>
</div>
<div class="chartCard">
<div class="chartBox" style="width: 500px">
<canvas id="myChart"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-colorschemes/0.4.0/chartjs-plugin-colorschemes.min.js">
</script>
<script>
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [1, 2, 3].map(function (i) {
return {
label: 'Dataset ' + i,
data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),
fill: false
}
})
};
const config = {
type: 'line',
data,
options: {
plugins: [
{
"colorschemes": {
scheme: 'brewer.RdYlBu3',
}
}]
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
</html>
Here is the code that I tried, can someone please guide me what i missed.
thanks.
It was never correctly updated for V3 so the only thing you can try is if the export they do also works for CDN version of distribution and try to register it. Otherwise you will need to wait until or if the plugin ever gets updated to work with V3 and above:
This might work if CDN version supports it, otherwise you are out of luck and need to stay with V2 or implement the plugin and coloring yourself:
Chart.register(ColorSchemesPlugin);
const data = {};
const config = {};
new Chart(ctx, config);
The demo site uses chart.js v2.8.0. As you can see on this page, the plugin you try to use doesn't work for chart.js v3 and later.
You probably can take a look at this pluging and adapt it to your need to generate the colors you want to use.
Here is some work around,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Chart JS with www.chartjs3.com</title>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.9.1)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js"
integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const dt = [];
const labels = [];
for (let index = 1; index < 20; index++) {
labels.push("Label_" + index);
dt.push(index);
}
var ThemeDictionary = {
Classic10: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
ClassicMedium10: ["#729ece", "#ff9e4a", "#67bf5c", "#ed665d", "#ad8bc9", "#a8786e", "#ed97ca", "#a2a2a2", "#cdcc5d", "#6dccda"],
ClassicLight10: ["#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"],
Classic20: ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"],
ClassicGray5: ["#60636a", "#a5acaf", "#414451", "#8f8782", "#cfcfcf"],
ClassicColorBlind10: ["#006ba4", "#ff800e", "#ababab", "#595959", "#5f9ed1", "#c85200", "#898989", "#a2c8ec", "#ffbc79", "#cfcfcf"],
ClassicTrafficLight9: ["#b10318", "#dba13a", "#309343", "#d82526", "#ffc156", "#69b764", "#f26c64", "#ffdd71", "#9fcd99"],
ClassicPurpleGray6: ["#7b66d2", "#dc5fbd", "#94917b", "#995688", "#d098ee", "#d7d5c5"],
ClassicPurpleGray12: ["#7b66d2", "#a699e8", "#dc5fbd", "#ffc0da", "#5f5a41", "#b4b19b", "#995688", "#d898ba", "#ab6ad5", "#d098ee", "#8b7c6e", "#dbd4c5"],
ClassicGreenOrange6: ["#32a251", "#ff7f0f", "#3cb7cc", "#ffd94a", "#39737c", "#b85a0d"],
ClassicGreenOrange12: ["#32a251", "#acd98d", "#ff7f0f", "#ffb977", "#3cb7cc", "#98d9e4", "#b85a0d", "#ffd94a", "#39737c", "#86b4a9", "#82853b", "#ccc94d"],
ClassicBlueRed6: ["#2c69b0", "#f02720", "#ac613c", "#6ba3d6", "#ea6b73", "#e9c39b"],
ClassicBlueRed12: ["#2c69b0", "#b5c8e2", "#f02720", "#ffb6b0", "#ac613c", "#e9c39b", "#6ba3d6", "#b5dffd", "#ac8763", "#ddc9b4", "#bd0a36", "#f4737a"],
ClassicCyclic13: ["#1f83b4", "#12a2a8", "#2ca030", "#78a641", "#bcbd22", "#ffbf50", "#ffaa0e", "#ff7f0e", "#d63a3a", "#c7519c", "#ba43b4", "#8a60b0", "#6f63bb"],
}
var Theme = "Classic10"
// setup
const data = {
labels: labels,
datasets: [{
label: 'Weekly Sales',
data: dt,
backgroundColor: ThemeDictionary[Theme],
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true
}
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
</html>
You can create you own theme colors and add into "ThemeDictionary" dictionary with key and set your key into "Theme" variable, that's it.
Please suggest if anything I missed.
I am new in javascript and have to use the libraries of Chart.js
I have in a jsp file the following instruction for a button
window.open("test.jsp", "width="+800+ "height="+580);
and in the test.jsp file this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<script type=“text/javascript”>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/Chart.min.js"></script>
<script type=“test.jsp”>
<script type=“text/javascript”>
var ctx = document.getElementById('myChart');
var stars = [135850, 52122, 148825, 16939, 9763];
var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: frameworks,
datasets: [{
label: 'Github Stars',
data: stars
}]
},
})
</head>
<body>
<canvas id="myChart" width="800" height="400"></canvas>
</body>
</html>
I am able to open the new window but I can't see anything inside.
I would like to all the code runs in jsp file, without delegating to js and html files outside.
There are different problems in your code.
The referenced Chart.js library does not exist. Instead of ...Chart.min.js, write ...chart.min.js (lowercase).
Define your custom JS code in a function and execute it only once the body and its canvas are fully loaded (<body onload="drawChart()">).
Please take a look at below runnable HTML code, it should run similarly with JSP.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script type="text/javascript">
function drawChart() {
var stars = [135850, 52122, 148825, 16939, 9763];
var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
new Chart('myChart', {
type: 'bar',
data: {
labels: frameworks,
datasets: [{
label: 'Github Stars',
data: stars
}]
},
});
}
</script>
</head>
<body onload="drawChart()">
<canvas id="myChart" width="800" height="400"></canvas>
</body>
</html>
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>