i have some trouble using NeoVis.js to visualize my Neo4j-graph.
I use the Movie-Tutorial-Database in which i established relationships "ACTED_WITH" between everone who acted in a movie together. All of my stuff is local.
I made a test.html file in which is following code:
<head>
<meta charset="utf-8">
<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>
<script type="text/javascript">
var viz;
function draw() {
var config = {
container_id: "viz",
server_url: "bolt://localhost:7687",
server_user: "Neo4j",
server_password: "123",
labels: {
},
relationships: {
},
initial_cypher: "match (tom:Person{name:"Tom Hanks"})-[r:ACTED_WITH]->(coWorkers)
return tom, r, coWorkers"
},
viz = new NeoVis.default(config);
viz.render();
};
</script>
</head>
<body onload="draw()">
<div id="viz"></div>
</body>
And when i open the file in my browser it shows the title inside the tab an thats it. Investigating it with the browser tools it shows the following:
test.html:30 Uncaught SyntaxError: Unexpected identifier
test.html:41 Uncaught ReferenceError: draw is not defined
at onload (test.html:41)
I dont get it. draw() is defined, isnt it? And the query works fine within the Neo4j-browser too.
Can you figure out whats wrong? Thanks in advance.
Greetings
Please check the below code..
The cypher works for me, First test with some simple cypher to test whether you are connecting to neo4j using bolt.
Then add your cypher check proper syntax too.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
<script type="text/javascript">
function draw() {
alert("inside method");
var viz;
var config = {
container_id: "viz",
server_url: "bolt://127.0.0.1:7687",
server_user: "Neo4j",
server_password: "password",
labels: {
},
relationships: {
},
initial_cypher: "MATCH (n:Movie) RETURN n LIMIT 1"
},
viz = new NeoVis.default(config);
console.log(JSON.stringify(viz));
viz.render();
};
</script>
</head>
<body>
<div>
<div id="row2">
<input type="button" value="click" onclick="draw()">
<div id="viz"></div>
</div>
</form>
</div>
</body>
</html>
I really can`t figure out whats going wrong here.
I try to draw a line-chart with epoch using JSON-data.
JSON Formatter & Validator says it`s valid JSON.
Epoch/D3 does not render the chart, instead I get a "Uncaught TypeError: Cannot read property 'length' of undefined" in d3.js in the console.
I tried different versions of d3, the newest as well as v3.5.17 as described in this issue: https://github.com/epochjs/epoch/issues/226
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/epoch.min.css" type="text/css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/d3.js"></script>
<script src="js/epoch.js"></script>
</head>
<body>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
$('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","value":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]
});
</script>
</body>
A quick read at the documentation will show you that instead of value:
data: [{"label":"LabelA","value":[...
It has to be values:
data: [{"label":"LabelA","values":[...
Here is the demo with your corrected code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.js"></script>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
var linechart = $('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","values":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]});
</script>
In this code I am using jqplot plugin which I took from this site http://www.jqplot.com/deploy/dist/examples/line-charts.html. What I want is to change the size of height and width. How to do this ?
My code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JQPlot</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
</head>
<body>
<div id="chart1" style="width:600px; height:250px;"></div>
<script type="text/javascript">
$(document).ready(function () {
var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
var line2 = [['23-May-08', 323], ['20-Jun-08', 222], ['25-Jul-08', 123], ['22-Aug-08', 43],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 544],
['23-Jan-09', 654], ['20-Feb-09', 234], ['20-Mar-09', 543], ['24-Apr-09', 323]];
var plot1 = $.jqplot('chart1', [line1, line2], {
title: 'Data Point Highlighting',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d'
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 300
},
cursor: {
show: false
}
});
});
</script>
</body>
</html>
The size of the plot drawn depends of the dimensions of the container DIV, just change the CSS for width and height (instead of 600px and 250px).
<div id="chart1" style="width:600px; height:250px;"></div>
The width and height need to be specified for the container div itself.
Check out the source of the example.
<div id="chart1" style="height:300px; width:500px;"></div>
I am trying to render the Y-axis label rotated 90 degree. Quoting the jqplot example
By including the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisLabelRenderer.min.js" plugins, you can render label text directly onto canvas elements.
Here is the error i get from Firebug
TypeError: a.jqplot.CanvasFontRenderer is not a constructor
Here is my whole code
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<!--Jquery Base Library 2.0.3 -->
<script src="jquery-2.0.3.min.js"></script>
<!-- jqPlot Libraro -->
<script src="jquery.jqplot.min.js"></script>
<!-- More jqplot file -->
<script src="jqplot.canvasTextRenderer.min.js"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js"></script>
<!-- example jqplot file -->
<script src="test.js"></script>
</head>
<body style="margin:0px; padding-left:50px; padding-right:50px;" >
<div style="padding-left: 20px; padding-right:20px; background-color:#FF7519;">
<div id="chart" style="height:300px;width:800px; "></div>
</div>
</body>
</html>
here is test.js
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
cosPoints.push([i, Math.cos(i)]);
}
var plot1 = $.jqplot('chart', [cosPoints], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Some X Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
label:'Some Y Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
});
I am clueless, I don't understand what I am doing wrong since I am following the basic tutorial of this API. Thank you for your time
match your text renderer file with the file from this link: jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.js
I think this is the correct file and it has the jqplot.CanvasFontRenderer inside it. Maybe your file doesn't have that
Ok, I've got a bar chart.
And it basically works... but the labels on the y-axis are kinda long and wrap and then run into each other.
I've tried changing the css, but it gets overidden by JS.
I tried scanning thru the jqplot library to find out where it happens but i got lost.
Any ideas? is there just an option i can set?
You can see here:
Here is my html file:
<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
$(function() {
graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
});
function graph_me(div_name, labels_in, values_in) {
var labels = labels_in.reverse();
var values = values_in.reverse();
$.jqplot(div_name, [values], {
series:[{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
varyBarColor: true
}
}
],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: labels,
tickOptions: {
showGridline: false,
markSize: 0
}
}
}
});
}
</script>
</head>
<body>
<div id="chart1" style="height:400px;width:500px; margin: 0 auto;"></div>
</body>
</html>
You could try this in your css:
.jqplot-yaxis {
margin-left:-80px !important;
width:80px !important;
}