2 changed files with 130 additions and 0 deletions
Unified View
Diff Options
-
+44 -0GraphTest.html
-
+86 -0js/friendsGraph.js
+ 44
- 0
GraphTest.html
View File
| @ -0,0 +1,44 @@ | |||||
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="UTF-8"> | |||||
| <title>Title</title> | |||||
| <style type="text/css"> | |||||
| body { | |||||
| font: 10pt arial; | |||||
| } | |||||
| #myGraph { | |||||
| width: 800px; | |||||
| height: 800px; | |||||
| border: 1px solid lightgray; | |||||
| background-color:#333333; | |||||
| } | |||||
| </style> | |||||
| <script | |||||
| src="https://code.jquery.com/jquery-3.3.1.min.js" | |||||
| integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" | |||||
| crossorigin="anonymous"> | |||||
| </script> | |||||
| <script src="js/githubAPI.js"></script> | |||||
| <script src="js/friendsGraph.js"></script> | |||||
| <script type="text/javascript" src="js/vis/vis.js"></script> | |||||
| <link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" /> | |||||
| </head> | |||||
| <body> | |||||
| <h2 id="graphLabel"></h2> | |||||
| <div id="myGraph" style="width:100%"></div> | |||||
| <script> | |||||
| createFriendsGraph("jrtechs", "myGraph", "graphLabel"); | |||||
| </script> | |||||
| </body> | |||||
| </html> | |||||
+ 86
- 0
js/friendsGraph.js
View File
| @ -1,6 +1,92 @@ | |||||
| var nodes; | |||||
| var edges; | |||||
| function addFollowers(username) | |||||
| { | |||||
| return new Promise(function(resolve, reject) | |||||
| { | |||||
| queryAPIByUser(API_FOLLOWERS, username, function(data) | |||||
| { | |||||
| for(var i = 0; i < data.length; i++) | |||||
| { | |||||
| nodes.push( | |||||
| { | |||||
| id:data[i].id, | |||||
| shape: 'circularImage', | |||||
| image:data[i].avatar_url | |||||
| }); | |||||
| } | |||||
| resolve(); | |||||
| }, | |||||
| function(error) | |||||
| { | |||||
| reject(error); | |||||
| }) | |||||
| }); | |||||
| } | |||||
| function addFollowing(username) | |||||
| { | |||||
| return new Promise(function(resolve, reject) | |||||
| { | |||||
| }); | |||||
| } | |||||
| function createFriendsGraph(username, containerName, graphsTitle) | function createFriendsGraph(username, containerName, graphsTitle) | ||||
| { | { | ||||
| nodes = []; | |||||
| edges = []; | |||||
| var network = null; | |||||
| addFollowers(username).then(function() | |||||
| { | |||||
| var container = document.getElementById(containerName); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| var options = { | |||||
| nodes: { | |||||
| borderWidth:4, | |||||
| size:30, | |||||
| color: { | |||||
| border: '#222222', | |||||
| background: '#666666' | |||||
| }, | |||||
| font:{color:'#eeeeee'} | |||||
| }, | |||||
| edges: { | |||||
| color: 'lightgray' | |||||
| } | |||||
| }; | |||||
| network = new vis.Network(container, data, options); | |||||
| }); | |||||
| // // create connections between people | |||||
| // // value corresponds with the amount of contact between two people | |||||
| // edges = [ | |||||
| // {from: 1, to: 2}, | |||||
| // {from: 2, to: 3}, | |||||
| // {from: 2, to: 4}, | |||||
| // {from: 4, to: 5}, | |||||
| // {from: 4, to: 10}, | |||||
| // {from: 4, to: 6}, | |||||
| // {from: 6, to: 7}, | |||||
| // {from: 7, to: 8}, | |||||
| // {from: 8, to: 9}, | |||||
| // {from: 8, to: 10}, | |||||
| // {from: 10, to: 11}, | |||||
| // {from: 11, to: 12}, | |||||
| // {from: 12, to: 13}, | |||||
| // {from: 13, to: 14}, | |||||
| // {from: 9, to: 16} | |||||
| // ]; | |||||
| } | } | ||||