jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Updated examples 34-39

flowchartTest
jos 9 years ago
parent
d01112fc17
commit
54c9efb936
6 changed files with 221 additions and 203 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -6
      examples/network/34_circular_images.html
  2. +16
    -10
      examples/network/35_label_stroke.html
  3. +13
    -12
      examples/network/36_HTML_in_Nodes.html
  4. +14
    -7
      examples/network/37_label_alignment.html
  5. +173
    -167
      examples/network/38_node_as_icon.html
  6. +1
    -1
      examples/network/39_newClustering.html

+ 4
- 6
examples/network/34_circular_images.html View File

@ -48,7 +48,7 @@
{id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"} {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}
]; ];
// create connetions between people
// create connections between people
// value corresponds with the amount of contact between two people // value corresponds with the amount of contact between two people
edges = [ edges = [
{from: 1, to: 2}, {from: 1, to: 2},
@ -64,8 +64,7 @@
{from: 10, to: 11}, {from: 10, to: 11},
{from: 11, to: 12}, {from: 11, to: 12},
{from: 12, to: 13}, {from: 12, to: 13},
{from: 13, to: 14},
// {from: 14, to: 15}
{from: 13, to: 14}
]; ];
// create a network // create a network
@ -91,11 +90,10 @@
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()"> <body onload="draw()">
<div id="mynetwork"></div> <div id="mynetwork"></div>
<div id="info"></div>
</body> </body>
</html> </html>

+ 16
- 10
examples/network/35_label_stroke.html View File

@ -14,16 +14,18 @@
background: #d1d1d1; background: #d1d1d1;
} }
</style> </style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body> <body>
<p>The font, size, and stroke of labels is fully customizable.</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodes = [ var nodes = [
{id: 1, label: 'Node 1', fontStrokeWidth : 5, fontStrokeColor: 'white'},
{id: 1, label: 'Node 1', font: {stroke: 5, strokeColor: 'white'}},
{id: 2, label: 'Node 2'}, {id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'}, {id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'}, {id: 4, label: 'Node 4'},
@ -32,7 +34,7 @@
// create an array with edges // create an array with edges
var edges = [ var edges = [
{from: 1, to: 2, label: 'edgeLabel', fontStrokeWidth : 2, fontStrokeColor : '#00ff00'},
{from: 1, to: 2, label: 'edgeLabel', font: {stroke: 2, strokeColor : '#00ff00'}},
{from: 1, to: 3, label: 'edgeLabel'}, {from: 1, to: 3, label: 'edgeLabel'},
{from: 2, to: 4}, {from: 2, to: 4},
{from: 2, to: 5} {from: 2, to: 5}
@ -46,14 +48,18 @@
}; };
var options = { var options = {
nodes : { nodes : {
shape : 'dot',
fontStrokeWidth : 1,
fontStrokeColor : '#d1d1d1'
shape: 'dot',
font: {
stroke: 1,
strokeColor: '#d1d1d1'
}
}, },
edges : {
fontStrokeWidth : 1,
fontStrokeColor : '#d1d1d1',
fontFill : 'none'
edges: {
font: {
stroke: 1,
strokeColor: '#d1d1d1',
//fill: 'none' // TODO: what is the replacement for fill?
}
} }
}; };
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);

+ 13
- 12
examples/network/36_HTML_in_Nodes.html View File

@ -30,15 +30,15 @@
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="243" height="65">' + var data = '<svg xmlns="http://www.w3.org/2000/svg" width="243" height="65">' +
'<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
'<foreignObject x="15" y="10" width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like' +
'<span style="color:white; text-shadow:0 0 20px #000000;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
'<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
'<foreignObject x="15" y="10" width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like' +
'<span style="color:white; text-shadow:0 0 20px #000000;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window; var DOMURL = window.URL || window.webkitURL || window;
@ -65,13 +65,14 @@
edges: edges edges: edges
}; };
var options = { var options = {
stabilize: false,
smoothCurves:false
physics: {stabilization: false},
edges: {smooth: false}
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()"> <body onload="draw()">
<p> <p>

+ 14
- 7
examples/network/37_label_alignment.html View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Network | Basic usage</title>
<title>Network | Label alignment</title>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
@ -13,10 +13,13 @@
border: 1px solid lightgray; border: 1px solid lightgray;
} }
</style> </style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body> <body>
<p>Labels can be aligned to edges in various ways.</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<script type="text/javascript"> <script type="text/javascript">
@ -31,10 +34,10 @@
// create an array with edges // create an array with edges
var edges = [ var edges = [
{from: 1, to: 2, label: '1 to 2', labelAlignment:'line-center', fontFill:'orange' },
{from: 1, to: 3, label: '1 to 3', labelAlignment:'line-above', fontFill:'green'},
{from: 2, to: 4, label: '2 to 4', fontFill:'red'},
{from: 2, to: 5, label: '2 to 5', labelAlignment:'line-below', fontFill:'#ccd' }
{from: 1, to: 2, label: 'middle', font: {align:'middle', background:'orange'}},
{from: 1, to: 3, label: 'top', font: {align: 'top', background:'green'}},
{from: 2, to: 4, label: 'horizontal', font: {align: 'horizontal', background: 'red'}},
{from: 2, to: 5, label: 'bottom', font: { align:'bottom', background: '#ccd' }}
]; ];
// create a network // create a network
@ -43,7 +46,11 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {};
var options = {
edges: {
font: {stroke: 0}
}
};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
</script> </script>

+ 173
- 167
examples/network/38_node_as_icon.html View File

@ -2,176 +2,182 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<title>Network | node as icon</title>
<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">
<script language="JavaScript">
function draw() {
/*
* Example for FontAwesome
*/
var optionsFA = {
height: '300px',
groups: {
usergroups: {
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf0c0',
size: 50,
color: '#57169a'
}
},
users: {
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf007',
size: 50,
color: '#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',
icon: {
face: 'FontAwesome',
code: '\uf1ad',
size: 50,
color: '#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);
/*
* Example for Ionicons
*/
var optionsIO = {
height: '300px',
groups: {
usergroups: {
shape: 'icon',
icon: {
face: 'Ionicons',
code: '\uf47c',
size: 50,
color: '#57169a'
}
},
users: {
shape: 'icon',
icon: {
face: 'Ionicons',
code: '\uf47e',
size: 50,
color: '#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',
icon: {
face: 'Ionicons',
code: '\uf276',
size: 50,
color: '#f0a30a'
}
}];
// create a network
var containerIO = document.getElementById('mynetworkIO');
var dataIO = {
nodes: nodesIO,
edges: edges
};
var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
<meta charset="UTF-8">
<title>Network | node as icon</title>
<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">
<style>
#mynetworkFA,
#mynetworkIO {
height: 300px;
}
</style>
<script language="JavaScript">
function draw() {
/*
* Example for FontAwesome
*/
var optionsFA = {
groups: {
usergroups: {
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf0c0',
size: 50,
color: '#57169a'
}
},
users: {
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf007',
size: 50,
color: '#aa00ff'
}
}
} }
</script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
};
// 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',
icon: {
face: 'FontAwesome',
code: '\uf1ad',
size: 50,
color: '#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);
/*
* Example for Ionicons
*/
var optionsIO = {
groups: {
usergroups: {
shape: 'icon',
icon: {
face: 'Ionicons',
code: '\uf47c',
size: 50,
color: '#57169a'
}
},
users: {
shape: 'icon',
icon: {
face: 'Ionicons',
code: '\uf47e',
size: 50,
color: '#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',
icon: {
face: 'Ionicons',
code: '\uf276',
size: 50,
color: '#f0a30a'
}
}];
// create a network
var containerIO = document.getElementById('mynetworkIO');
var dataIO = {
nodes: nodesIO,
edges: edges
};
var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()"> <body onload="draw()">
<h2>
<i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
<div id="mynetworkFA"></div>
<h2>
<i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
<div id="mynetworkIO"></div>
<h2>
<i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
<div id="mynetworkFA"></div>
<h2>
<i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
<div id="mynetworkIO"></div>
</body> </body>

+ 1
- 1
examples/network/39_newClustering.html View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Network | Basic usage</title>
<title>Network | Clustering</title>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

Write Preview
Loading…
Cancel
Save