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

Merge remote-tracking branch 'remotes/upstream/develop' into develop

css_transitions
Eric Gillingham 11 years ago
parent
446bea0b4e 1c200f7dfc
commit
fa7eba5db8
9 changed files with 238 additions and 8 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      docs/dataset.html
  2. +0
    -1
      docs/dataview.html
  3. +0
    -1
      docs/index.html
  4. +1
    -3
      docs/timeline.html
  5. +156
    -0
      examples/graph/17_network_info.html
  6. +36
    -0
      examples/graph/index.html
  7. +20
    -0
      examples/index.html
  8. +23
    -0
      examples/timeline/index.html
  9. +2
    -2
      src/timeline/component/ItemSet.js

+ 0
- 1
docs/dataset.html View File

@ -3,7 +3,6 @@
<head>
<title>vis.js | DataSet documentation</title>
<link rel='stylesheet' href='css/style.css' type='text/css' />
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>

+ 0
- 1
docs/dataview.html View File

@ -3,7 +3,6 @@
<head>
<title>vis.js | DataView documentation</title>
<link rel='stylesheet' href='css/style.css' type='text/css' />
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>

+ 0
- 1
docs/index.html View File

@ -3,7 +3,6 @@
<head>
<title>vis.js | documentation</title>
<link rel='stylesheet' href='css/style.css' type='text/css' />
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>

+ 1
- 3
docs/timeline.html View File

@ -141,9 +141,7 @@ var items = [
start: new Date(2010, 7, 15),
end: new Date(2010, 8, 2), // end is optional
content: 'Trajectory A'
// Optional: a field 'group'
// Optional: a field 'className'
// Optional: a field 'editable'
// Optional: fields 'id', 'type', 'group', 'className'
}
// more items...
]);

+ 156
- 0
examples/graph/17_network_info.html View File

@ -0,0 +1,156 @@
<!DOCTYPE html>
<!-- saved from url=(0046)http://visjs.org/examples/graph/03_images.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Graph | Images</title>
<style type="text/css">
body {
font: 10pt arial;
padding: 0;
margin: 0;
overflow: hidden;
}
#mygraph {
width: 100%;
height: 100%;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="../../vis.min.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var DIR = 'img/refresh-cl/',
SWITCH = DIR + 'Network-Pipe-icon.png',
COMPUTER = DIR + 'Hardware-My-Computer-3-icon.png',
PRINTER = DIR + 'Hardware-Printer-Blue-icon.png',
LENGTH_MAIN = 350,
LENGTH_SERVER = 150,
LENGTH_SUB = 50,
GREEN = 'green',
RED = '#FA0A10',
ORANGE = 'orange',
GRAY = 'gray',
BLACK = '#2B1B17';
// Called when the Visualization API is loaded.
function draw() {
// Create a data table with nodes.
nodes = [];
// Create a data table with links.
edges = [];
nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: 6, label: '0.71 mbps'});
edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: 4, label: '0.55 mbps'});
// group around 2
for (var i = 100; i <= 104; i++) {
var value = 1;
var width = 1;
var color = GRAY;
var label = null;
if (i === 103) {
value = 5;
width = 3;
}
if (i === 102) {
color = RED;
label = 'error';
}
nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value});
edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
}
nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY});
// group around 3
nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: 2});
for (var i = 230; i <= 231; i++ ) {
nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: 1});
}
// group around 1
nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: 6, label: '0.92 mbps'});
nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: 3, label: '0.68 mbps'});
nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, label: '0.3 mbps'});
nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
edges.push({from: 1, to: 204, length: 200, width: 3, label: '0.63 mbps'});
// legend
var mygraph = document.getElementById('mygraph');
var x = - mygraph.clientWidth / 2 + 50;
var y = - mygraph.clientHeight / 2 + 20;
nodes.push({id: 1000, x: x, y: y + 0, label: 'Internet', group: 'internet'});
nodes.push({id: 1001, x: x, y: y + 50, label: 'Switch', group: 'switch'});
nodes.push({id: 1002, x: x, y: y + 100, label: 'Server', group: 'server'});
nodes.push({id: 1003, x: x, y: y + 150, label: 'Computer', group: 'desktop'});
nodes.push({id: 1004, x: x, y: y + 200, label: 'Smartphone', group: 'mobile'});
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false, // stabilize positions before displaying
nodes: {
widthMin: 24,
maxWidth: 64,
fontColor: BLACK
},
edges: {
color: GRAY
},
groups: {
'switch': {
shape: 'triangle',
color: vis.graph.Groups.DEFAULT[1] // yellow
},
desktop: {
shape: 'dot',
color: vis.graph.Groups.DEFAULT[0] // blue
},
mobile: {
shape: 'dot',
color: vis.graph.Groups.DEFAULT[4] // purple
},
server: {
shape: 'square',
color: vis.graph.Groups.DEFAULT[2] // red
},
internet: {
shape: 'square',
color: vis.graph.Groups.DEFAULT[3] // green
}
}
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"><div class="graph-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
</body></html>

+ 36
- 0
examples/graph/index.html View File

@ -0,0 +1,36 @@
<!doctype html>
<html>
<head>
<title>vis.js | graph examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div id="container">
<h1>vis.js graph examples</h1>
<p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
<p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
<p><a href="03_images.html">03_images.html</a></p>
<p><a href="04_shapes.html">04_shapes.html</a></p>
<p><a href="05_social_network.html">05_social_network.html</a></p>
<p><a href="06_groups.html">06_groups.html</a></p>
<p><a href="07_selections.html">07_selections.html</a></p>
<p><a href="08_mobile_friendly.html">08_mobile_friendly.html</a></p>
<p><a href="09_sizing.html">09_sizing.html</a></p>
<p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
<p><a href="11_custom_style.html">11_custom_style.html</a></p>
<p><a href="12_scalable_images.html">12_scalable_images.html</a></p>
<p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
<p><a href="14_dot_language.html">14_dot_language.html</a></p>
<p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
<p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
<p><a href="17_network_info.html">17_network_info.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div>
</body>
</html>

+ 20
- 0
examples/index.html View File

@ -0,0 +1,20 @@
<!doctype html>
<html>
<head>
<title>vis.js | examples</title>
<link href='../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div id="container">
<h1>vis.js examples</h1>
<p><a href="graph">graph</a></p>
<p><a href="timeline">timeline</a></p>
</div>
</body>
</html>

+ 23
- 0
examples/timeline/index.html View File

@ -0,0 +1,23 @@
<!doctype html>
<html>
<head>
<title>vis.js | timeline examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div id="container">
<h1>vis.js timeline examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_dataset.html">02_dataset.html</a></p>
<p><a href="03_much_data.html">03_much_data.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p>
</div>
</body>
</html>

+ 2
- 2
src/timeline/component/ItemSet.js View File

@ -192,9 +192,9 @@ ItemSet.prototype.repaint = function repaint() {
itemsData = this.itemsData,
items = this.items,
dataOptions = {
fields: [(itemsData && itemsData.fieldId || 'id'), 'start', 'end', 'content', 'type']
// TODO: cleanup
//fields: [(itemsData && itemsData.fieldId || 'id'), 'start', 'end', 'content', 'type']
};
// TODO: copy options from the itemset itself?
// show/hide added/changed/removed items
Object.keys(queue).forEach(function (id) {

Write Preview
Loading…
Cancel
Save