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

Examples upated

gh-pages
josdejong 12 years ago
parent
81c0c4329b
commit
65e763c7a2
10 changed files with 291 additions and 31 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      examples/graph/02_random_nodes.html
  2. +4
    -15
      examples/graph/07_selections.html
  3. +2
    -9
      examples/graph/15_dot_language_playground.html
  4. +265
    -0
      examples/graph/16_dynamic_data.html
  5. +0
    -2
      examples/graph/graphviz/graphviz_gallery.html
  6. +6
    -2
      examples/timeline/02_dataset.html
  7. +1
    -1
      examples/timeline/03_much_data.html
  8. +6
    -1
      examples/timeline/05_groups.html
  9. BIN
      img/gallery/graph/16_dynamic_data.png
  10. +6
    -0
      index.html

+ 1
- 1
examples/graph/02_random_nodes.html View File

@ -88,7 +88,7 @@
// add event listeners // add event listeners
vis.events.addListener(graph, 'select', function(params) { vis.events.addListener(graph, 'select', function(params) {
document.getElementById('selection').innerHTML = document.getElementById('selection').innerHTML =
'Selection: ' + JSON.stringify(graph.getSelection());
'Selection: ' + graph.getSelection();
}); });
} }
</script> </script>

+ 4
- 15
examples/graph/07_selections.html View File

@ -52,24 +52,13 @@
// add event listener // add event listener
function onSelect() { function onSelect() {
var selection = graph.getSelection();
var info = 'selection: ';
selection.forEach(function (s) {
info += s.row + ' ';
});
document.getElementById('info').innerHTML += info + '<br>';
document.getElementById('info').innerHTML +=
'selection: ' + graph.getSelection().join(', ') + '<br>';
} }
vis.events.addListener(graph, 'select', onSelect); vis.events.addListener(graph, 'select', onSelect);
// set initial selection (row based, zero-based)
var selection = [
{'row': 2},
{'row': 3},
{'row': 4}
];
graph.setSelection(selection);
// set initial selection (id's of some nodes)
graph.setSelection([3, 4, 5]);
</script> </script>
</body> </body>

+ 2
- 9
examples/graph/15_dot_language_playground.html View File

@ -48,7 +48,7 @@
} }
</style> </style>
</head> </head>
<body>
<body onload="drawExample('example1')">
<table id="frame"> <table id="frame">
<col width="50%"> <col width="50%">
@ -140,8 +140,7 @@ digraph {
A -> A[label=0.5]; A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A; B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D; B -> D;
D -> B;
D -> C;
D -> {B; C}
D -> E[label=0.2]; D -> E[label=0.2];
F -> F; F -> F;
A [ A [
@ -199,11 +198,5 @@ digraph G {
} }
</textarea> </textarea>
<script>
// draw example1 now
drawExample('example1');
</script>
</body> </body>
</html> </html>

+ 265
- 0
examples/graph/16_dynamic_data.html View File

@ -0,0 +1,265 @@
<!doctype html>
<html>
<head>
<title>Graph | DataSet</title>
<style type="text/css">
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
input[type=text], pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#graph {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">
var nodes, edges, graph;
// convenience method to stringify a JSON object
function toJSON (obj) {
return JSON.stringify(obj, null, 4);
}
$(window).load(function () {
// attach actions to the node buttons
$('#node-add').click(function () {
try {
nodes.add({
id: $('#node-id').val(),
label: $('#node-label').val()
});
}
catch (err) {
alert(err);
}
});
$('#node-update').click(function () {
try {
nodes.update({
id: $('#node-id').val(),
label: $('#node-label').val()
});
}
catch (err) {
alert(err);
}
});
$('#node-remove').click(function () {
try {
var id = $('#node-id').val();
nodes.remove(id);
}
catch (err) {
alert(err);
}
});
// attach actions to the edge buttons
$('#edge-add').click(function () {
try {
edges.add({
id: $('#edge-id').val(),
from: $('#edge-from').val(),
to: $('#edge-to').val()
});
}
catch (err) {
alert(err);
}
});
$('#edge-update').click(function () {
try {
edges.update({
id: $('#edge-id').val(),
from: $('#edge-from').val(),
to: $('#edge-to').val()
});
}
catch (err) {
alert(err);
}
});
$('#edge-remove').click(function () {
try {
var id = $('#edge-id').val();
edges.remove(id);
}
catch (err) {
alert(err);
}
});
// create an array with nodes
nodes = new vis.DataSet();
nodes.subscribe('*', function () {
$('#nodes').html(toJSON(nodes.get()));
});
nodes.add([
{id: '1', label: 'Node 1'},
{id: '2', label: 'Node 2'},
{id: '3', label: 'Node 3'},
{id: '4', label: 'Node 4'},
{id: '5', label: 'Node 5'}
]);
// create an array with edges
edges = new vis.DataSet();
edges.subscribe('*', function () {
$('#edges').html(toJSON(edges.get()));
});
edges.add([
{id: '1', from: '1', to: '2'},
{id: '2', from: '1', to: '3'},
{id: '3', from: '2', to: '4'},
{id: '4', from: '2', to: '5'}
]);
// create a graph
var container = $('#graph').get(0);
var data = {
nodes: nodes,
edges: edges
};
var options = {};
graph = new vis.Graph(container, data, options);
});
</script>
</head>
<body>
<p>
This example demonstrates dynamically adding, updating and removing nodes
and edges using a DataSet.
</p>
<h1>Adjust</h1>
<table>
<tr>
<td>
<h2>Node</h2>
<table>
<tr>
<td></td>
<td><label for="node-id">Id</label></td>
<td><input id="node-id" type="text" value="6"></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" value="Node 6"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="node-add">Add</button>
<button id="node-update">Update</button>
<button id="node-remove">Remove</button>
</td>
</tr>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tr>
<td></td>
<td><label for="edge-id">Id</label></td>
<td><input id="edge-id" type="text" value="5"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-from">From</label></td>
<td><input id="edge-from" type="text" value="3"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To</label></td>
<td><input id="edge-to" type="text" value="4"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="edge-add">Add</button>
<button id="edge-update">Update</button>
<button id="edge-remove">Remove</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
<h1>View</h1>
<table class="view">
<colgroup>
<col width="25%">
<col width="25%">
<col width="50%">
</colgroup>
<tr>
<td>
<h2>Nodes</h2>
<pre id="nodes"></pre>
</td>
<td>
<h2>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Graph</h2>
<div id="graph"></div>
</td>
</tr>
</table>
</body>
</html>

+ 0
- 2
examples/graph/graphviz/graphviz_gallery.html View File

@ -57,9 +57,7 @@
<option value="data/transparency.gv.txt">transparency</option> <option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option> <option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option> <option value="data/unix.gv.txt">unix</option>
<!-- TODO: get example world working (needs some extension of the DOT parser)
<option value="data/world.gv.txt">world</option> <option value="data/world.gv.txt">world</option>
-->
</select> </select>
</p> </p>

+ 6
- 2
examples/timeline/02_dataset.html View File

@ -7,12 +7,15 @@
body, html { body, html {
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 11pt; font-size: 11pt;
height: 100%;
margin: 0;
padding: 0;
} }
#visualization { #visualization {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 300px;
height: 100%;
} }
</style> </style>
@ -26,7 +29,7 @@
// create a dataset with items // create a dataset with items
var items = new vis.DataSet({ var items = new vis.DataSet({
fieldTypes: {
convert: {
start: 'Date', start: 'Date',
end: 'Date' end: 'Date'
} }
@ -44,6 +47,7 @@
var options = { var options = {
start: now.clone().add('days', -3), start: now.clone().add('days', -3),
end: now.clone().add('days', 7), end: now.clone().add('days', 7),
orientation: 'top',
height: '100%' height: '100%'
}; };

+ 1
- 1
examples/timeline/03_much_data.html View File

@ -27,7 +27,7 @@
// create a dataset with items // create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0); var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({ var items = new vis.DataSet({
fieldTypes: {
convert: {
start: 'Date', start: 'Date',
end: 'Date' end: 'Date'
} }

+ 6
- 1
examples/timeline/05_groups.html View File

@ -19,6 +19,11 @@
<script src="../../vis.js"></script> <script src="../../vis.js"></script>
</head> </head>
<body> <body>
<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items
and groups via the DataSet.
</p>
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
@ -26,7 +31,7 @@
var groupCount = 3; var groupCount = 3;
var itemCount = 20; var itemCount = 20;
// create a dataset with groups
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant']; var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet(); var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) { for (var g = 0; g < groupCount; g++) {

BIN
img/gallery/graph/16_dynamic_data.png View File

Before After
Width: 504  |  Height: 370  |  Size: 17 KiB

+ 6
- 0
index.html View File

@ -264,6 +264,12 @@ bower install vis
<div>playground</div> <div>playground</div>
</a> </a>
</div> </div>
<div class="thumb">
<a href="examples/graph/16_dynamic_data.html">
<img src="img/gallery/graph/16_dynamic_data.png">
<div>dynamic data</div>
</a>
</div>
<div class="thumb"> <div class="thumb">
<a href="examples/graph/graphviz/graphviz_gallery.html"> <a href="examples/graph/graphviz/graphviz_gallery.html">
<img src="img/gallery/graph/graphviz_gallery.png"> <img src="img/gallery/graph/graphviz_gallery.png">

Write Preview
Loading…
Cancel
Save