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

Added and renamed some examples for Graph

css_transitions
josdejong 12 years ago
parent
c1b7103618
commit
f1fc98035b
9 changed files with 230 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -0
      examples/graph/07_selections.html
  2. +108
    -0
      examples/graph/08_mobile_friendly.html
  3. +80
    -0
      examples/graph/09_automatic_sizing.html
  4. +42
    -0
      examples/graph/10_multiline_text.html
  5. +0
    -0
      examples/graph/11_custom_style.html
  6. +0
    -0
      examples/graph/12_scalable_images.html
  7. +0
    -0
      examples/graph/13_dashed_lines.html
  8. +0
    -0
      examples/graph/14_dot_language.html
  9. +0
    -0
      examples/graph/15_dot_language_playground.html

examples/graph/08_selections.html → examples/graph/07_selections.html View File


+ 108
- 0
examples/graph/08_mobile_friendly.html View File

@ -0,0 +1,108 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Mobile friendly</title>
<style type="text/css">
body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
// Called when the Visualization API is loaded.
function draw() {
nodes = [];
edges = [];
var EDGE_LENGTH = 50;
var connectionCount = [];
// randomly create some nodes
var nodeCount = 20;
var cols = parseInt(Math.sqrt(nodeCount));
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: '' + i
});
connectionCount[i] = 0;
// create links in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to,
length: EDGE_LENGTH
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to,
length: EDGE_LENGTH
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// Create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false,
nodes: {
shape: 'dot',
radius: 24,
fontSize: 24
},
edges: {
width: 2
}
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()" onresize="graph.redraw();">
<div id="mygraph"></div>
</body>
</html>

+ 80
- 0
examples/graph/09_automatic_sizing.html View File

@ -0,0 +1,80 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Automatic sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var DIR = 'img/soft-scraps-icons/';
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
{id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
{id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
{id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
{id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
{id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
{id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
{id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
{id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
{id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
];
// create connections.
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3, title: '3 emails per week'},
{from: 2, to: 9, value: 5, title: '5 emails per week'},
{from: 2, to: 10,value: 1, title: '1 emails per week'},
{from: 4, to: 6, value: 8, title: '8 emails per week'},
{from: 5, to: 7, value: 2, title: '2 emails per week'},
{from: 4, to: 5, value: 1, title: '1 emails per week'},
{from: 9, to: 10,value: 2, title: '2 emails per week'},
{from: 2, to: 3, value: 6, title: '6 emails per week'},
{from: 3, to: 9, value: 4, title: '4 emails per week'},
{from: 5, to: 3, value: 1, title: '1 emails per week'},
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// Instantiate our graph object.
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot'
},
edges: {
color: '#97C2FC'
}
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
</body>
</html>

+ 42
- 0
examples/graph/10_multiline_text.html View File

@ -0,0 +1,42 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Multiline text</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id: 1, label: 'Node in\nthe center', shape: 'text'},
{id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'},
{id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'},
{id: 4, label: 'This is text\non multiple lines', shape: 'box'},
{id: 5, label: 'Little text', shape: 'ellipse'}
];
// create some edges
var edges = [
{from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200},
{from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
{from: 1, to: 4, style: 'line', width: 1, length: 200},
{from: 1, to: 5, style: 'arrow', width: 3, length: 200}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
</body>
</html>

examples/graph/15_custom_style.html → examples/graph/11_custom_style.html View File


examples/graph/16_scalable_images.html → examples/graph/12_scalable_images.html View File


examples/graph/18_dashed_lines.html → examples/graph/13_dashed_lines.html View File


examples/graph/19_dot_language.html → examples/graph/14_dot_language.html View File


examples/graph/20_dot_language_playground.html → examples/graph/15_dot_language_playground.html View File


Write Preview
Loading…
Cancel
Save