examples/advanced-example.html

<!doctype html>
<html>
<head>
    <title>Neovis.js Simple Example</title>
    <style type="text/css">
        html, body {
            font: 16pt arial;
        }

        #viz {
            width: 900px;
            height: 700px;
            border: 1px solid lightgray;
            font: 22pt arial;
        }

    </style>

    <!-- FIXME: load from dist -->
    <script type="text/javascript" src="../dist/neovis.js"></script>


    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

    <script type="text/javascript">
		// define config car
		// instantiate nodevis object
		// draw


		var viz;

		function draw() {
			var config = {
				containerId: 'viz',
				neo4j: {
					serverUrl: 'bolt://localhost:7687',
					serverUser: 'neo4j',
					serverPassword: 'gland-presentation-worry'
				},
				visConfig: {
					nodes: {
						shape: 'square'
					},
					edges: {
						arrows: {
							to: {enabled: true}
						}
					},
				},
				labels: {
					Character: {
						label: 'pagerank',
						group: 'community',
						[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
							cypher: {
								value: "MATCH (n) WHERE id(n) = $id RETURN n.size"
							},
							function: {
								title: NeoVis.objectToTitleHtml
							},
						}
					}
				},
				relationships: {
					INTERACTS: {
						value: 'weight',
						[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
							function: {
								title: NeoVis.objectToTitleHtml
							},
						}
					}
				},
				initialCypher: 'MATCH (n)-[r]->(m) RETURN n,r,m'
			};

			viz = new NeoVis.default(config);
			viz.render();
			console.log(viz);

		}
    </script>
</head>
<body onload="draw()">
<div id="viz"></div>


Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
<input type="submit" value="Submit" id="reload">
<input type="submit" value="Stabilize" id="stabilize">


</body>

<script>
	$('#reload').click(function () {

		var cypher = $('#cypher').val();

		if (cypher.length > 3) {
			viz.renderWithCypher(cypher);
		} else {
			console.log('reload');
			viz.reload();

		}

	});

	$('#stabilize').click(function () {
		viz.stabilize();
	});

</script>
</html>