Rene Heindl
10 years ago
2 changed files with 114 additions and 0 deletions
Split View
Diff Options
+ 113
- 0
examples/network/38_node_as_icon.html
View File
| @ -0,0 +1,113 @@ | |||
| <!doctype html> | |||
| <html lang="en"> | |||
| <header> | |||
| <meta charset="UTF-8"> | |||
| <title>Network | node as icon</title> | |||
| <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> | |||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |||
| <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> | |||
| </header> | |||
| <body> | |||
| <h2><i class="fa fa-flag"></i> Use FontAwesome-icons for node</h1> | |||
| <div id="mynetworkFA"></div> | |||
| <h2><i class="ion ion-ionic"></i> Use Ionicons-icons for node</h1> | |||
| <div id="mynetworkIO"></div> | |||
| <script type="text/javascript"> | |||
| $(function(){ | |||
| var optionsFA = { | |||
| height: '300px', | |||
| groups: { | |||
| usergroups: { | |||
| shape: 'icon', | |||
| iconFontFace: 'FontAwesome', | |||
| icon: '\uf0c0', | |||
| iconSize: 50, | |||
| iconColor: '#57169a' | |||
| }, | |||
| users: { | |||
| shape: 'icon', | |||
| iconFontFace: 'FontAwesome', | |||
| icon: '\uf007', | |||
| iconSize: 50, | |||
| iconColor: '#aa00ff' | |||
| }, | |||
| }, | |||
| }; | |||
| // create an array with nodes | |||
| var nodesFA = [ | |||
| {id: 1, label: 'User 1', group: 'users' }, | |||
| {id: 2, label: 'User 2', group: 'users' }, | |||
| {id: 3, label: 'Usergroup 1', group: 'usergroups' }, | |||
| {id: 4, label: 'Usergroup 2', group: 'usergroups' }, | |||
| {id: 5, label: 'Organisation 1', shape: 'icon', iconFontFace: 'FontAwesome', icon: '\uf1ad', iconSize: 50, iconColor: '#f0a30a' } | |||
| ]; | |||
| // create an array with edges | |||
| var edges = [ | |||
| {from: 1, to: 3 }, | |||
| {from: 1, to: 4 }, | |||
| {from: 2, to: 4 }, | |||
| {from: 3, to: 5 }, | |||
| {from: 4, to: 5 } | |||
| ]; | |||
| // create a network | |||
| var containerFA = document.getElementById('mynetworkFA'); | |||
| var dataFA = { | |||
| nodes: nodesFA, | |||
| edges: edges | |||
| }; | |||
| var networkFA = new vis.Network(containerFA, dataFA, optionsFA); | |||
| var optionsIO = { | |||
| height: '300px', | |||
| groups: { | |||
| usergroups: { | |||
| shape: 'icon', | |||
| iconFontFace: 'Ionicons', | |||
| icon: '\uf47c', | |||
| iconSize: 50, | |||
| iconColor: '#57169a' | |||
| }, | |||
| users: { | |||
| shape: 'icon', | |||
| iconFontFace: 'Ionicons', | |||
| icon: '\uf47e', | |||
| iconSize: 50, | |||
| iconColor: '#aa00ff' | |||
| }, | |||
| }, | |||
| }; | |||
| // create an array with nodes | |||
| var nodesIO = [ | |||
| {id: 1, label: 'User 1', group: 'users' }, | |||
| {id: 2, label: 'User 2', group: 'users' }, | |||
| {id: 3, label: 'Usergroup 1', group: 'usergroups' }, | |||
| {id: 4, label: 'Usergroup 2', group: 'usergroups' }, | |||
| {id: 5, label: 'Organisation 1', shape: 'icon', iconFontFace: 'Ionicons', icon: '\uf276', iconSize: 50, iconColor: '#f0a30a' } | |||
| ]; | |||
| // create a network | |||
| var containerIO = document.getElementById('mynetworkIO'); | |||
| var dataIO = { | |||
| nodes: nodesIO, | |||
| edges: edges | |||
| }; | |||
| var networkIO = new vis.Network(containerIO, dataIO, optionsIO); | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||