|
|
- <!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>
|
