example-labels.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Neovis.js Simple Example</title>
  5. <style type="text/css">
  6. html, body {
  7. font: 16pt arial;
  8. }
  9. #viz {
  10. width: 900px;
  11. height: 700px;
  12. border: 1px solid lightgray;
  13. font: 22pt arial;
  14. }
  15. </style>
  16. <!-- FIXME: load from dist -->
  17. <script type="text/javascript" src="../dist/neovis.js"></script>
  18. <script
  19. src="https://code.jquery.com/jquery-3.2.1.min.js"
  20. integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  21. crossorigin="anonymous"></script>
  22. <script type="text/javascript">
  23. // define config car
  24. // instantiate nodevis object
  25. // draw
  26. var viz;
  27. function draw() {
  28. var config = {
  29. container_id: "viz",
  30. server_url: "bolt://54.209.44.254:33146",
  31. server_user: "neo4j",
  32. server_password: "investigators-spill-future",
  33. labels: {
  34. //"Character": "name",
  35. "Person": {
  36. "caption": "name",
  37. "size": 1.0,
  38. "sizeCypher": "MATCH (n) WHERE id(n) = {id} RETURN SIZE((n)--()) AS s;",
  39. "icon": "????"
  40. },
  41. "Organization": {
  42. "caption": "name",
  43. "size": 2.0,
  44. "sizeCypher": "MATCH (n) WHERE id(n) = {id} RETURN SIZE((n)--()) AS s",
  45. "icon": "???"
  46. }
  47. },
  48. relationships: {
  49. "PRESIDENT": {
  50. "caption": "El Presidente"
  51. }
  52. },
  53. initial_cypher: "match (p:Person)-[r]-(o:Organization)-[r1]-(p2:Person) RETURN * LIMIT 10",
  54. arrows: false
  55. };
  56. viz = new NeoVis.default(config);
  57. viz.render();
  58. console.log(viz);
  59. }
  60. </script>
  61. </head>
  62. <body onload="draw()">
  63. <div id="viz"></div>
  64. Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
  65. <input type="submit" value="Submit" id="reload">
  66. </body>
  67. <script>
  68. $("#reload").click(function() {
  69. var cypher = $("#cypher").val();
  70. if (cypher.length > 3) {
  71. viz.renderWithCypher(cypher);
  72. } else {
  73. console.log("reload");
  74. viz.reload();
  75. }
  76. });
  77. </script>
  78. </html>