vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

80 lines
2.6 KiB

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Graph | Sizing</title>
  5. <style type="text/css">
  6. html, body {
  7. font: 10pt arial;
  8. }
  9. #mygraph {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script type="text/javascript" src="../../vis.js"></script>
  16. <script type="text/javascript">
  17. var nodes = null;
  18. var edges = null;
  19. var graph = null;
  20. var DIR = 'img/soft-scraps-icons/';
  21. function draw() {
  22. // create people.
  23. // value corresponds with the age of the person
  24. nodes = [
  25. {id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
  26. {id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
  27. {id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
  28. {id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
  29. {id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
  30. {id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
  31. {id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
  32. {id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
  33. {id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
  34. {id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
  35. ];
  36. // create connections.
  37. // value corresponds with the amount of contact between two people
  38. edges = [
  39. {from: 2, to: 8, value: 3, title: '3 emails per week'},
  40. {from: 2, to: 9, value: 5, title: '5 emails per week'},
  41. {from: 2, to: 10,value: 1, title: '1 emails per week'},
  42. {from: 4, to: 6, value: 8, title: '8 emails per week'},
  43. {from: 5, to: 7, value: 2, title: '2 emails per week'},
  44. {from: 4, to: 5, value: 1, title: '1 emails per week'},
  45. {from: 9, to: 10,value: 2, title: '2 emails per week'},
  46. {from: 2, to: 3, value: 6, title: '6 emails per week'},
  47. {from: 3, to: 9, value: 4, title: '4 emails per week'},
  48. {from: 5, to: 3, value: 1, title: '1 emails per week'},
  49. {from: 2, to: 7, value: 4, title: '4 emails per week'}
  50. ];
  51. // Instantiate our graph object.
  52. var container = document.getElementById('mygraph');
  53. var data = {
  54. nodes: nodes,
  55. edges: edges
  56. };
  57. var options = {
  58. nodes: {
  59. shape: 'dot'
  60. },
  61. edges: {
  62. color: '#97C2FC'
  63. }
  64. };
  65. graph = new vis.Graph(container, data, options);
  66. }
  67. </script>
  68. </head>
  69. <body onload="draw()">
  70. <div id="mygraph"></div>
  71. </body>
  72. </html>