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

Released version 0.3.0

gh-pages
josdejong 11 years ago
parent
748a5ba8f7
commit
1f6064b491
43 changed files with 19997 additions and 18652 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +235
    -0
      dist/vis.css
  2. +15765
    -0
      dist/vis.js
  3. +29
    -0
      dist/vis.min.js
  4. +51
    -51
      docs/css/prettify.css
  5. +39
    -39
      docs/css/style.css
  6. +551
    -544
      docs/dataset.html
  7. +136
    -136
      docs/dataview.html
  8. +821
    -815
      docs/graph.html
  9. +129
    -126
      docs/index.html
  10. +464
    -419
      docs/timeline.html
  11. BIN
      download/vis.zip
  12. +34
    -34
      examples/graph/01_basic_usage.html
  13. +84
    -84
      examples/graph/02_random_nodes.html
  14. +72
    -72
      examples/graph/03_images.html
  15. +57
    -57
      examples/graph/04_shapes.html
  16. +58
    -58
      examples/graph/05_social_network.html
  17. +141
    -141
      examples/graph/06_groups.html
  18. +44
    -44
      examples/graph/07_selections.html
  19. +87
    -87
      examples/graph/08_mobile_friendly.html
  20. +63
    -63
      examples/graph/09_sizing.html
  21. +36
    -36
      examples/graph/10_multiline_text.html
  22. +114
    -114
      examples/graph/11_custom_style.html
  23. +66
    -66
      examples/graph/12_scalable_images.html
  24. +52
    -52
      examples/graph/13_dashed_lines.html
  25. +10
    -10
      examples/graph/14_dot_language.html
  26. +172
    -172
      examples/graph/15_dot_language_playground.html
  27. +224
    -224
      examples/graph/16_dynamic_data.html
  28. +140
    -140
      examples/graph/17_network_info.html
  29. +60
    -60
      examples/graph/graphviz/graphviz_gallery.html
  30. +21
    -21
      examples/graph/index.html
  31. +19
    -18
      examples/timeline/01_basic.html
  32. +51
    -49
      examples/timeline/02_dataset.html
  33. +2
    -1
      examples/timeline/03_much_data.html
  34. +52
    -47
      examples/timeline/04_html_data.html
  35. +51
    -50
      examples/timeline/05_groups.html
  36. +8
    -8
      examples/timeline/index.html
  37. +5
    -3
      examples/timeline/requirejs/requirejs_example.html
  38. +14
    -14
      examples/timeline/requirejs/scripts/main.js
  39. +23
    -40
      index.html
  40. +0
    -0
      package.js
  41. +17
    -61
      updateversion.js
  42. +0
    -14667
      vis.js
  43. +0
    -29
      vis.min.js

+ 235
- 0
dist/vis.css View File

@ -0,0 +1,235 @@
.vis.timeline {
}
.vis.timeline.rootpanel {
position: relative;
overflow: hidden;
border: 1px solid #bfbfbf;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vis.timeline .panel {
position: absolute;
overflow: hidden;
}
.vis.timeline .groupset {
position: absolute;
padding: 0;
margin: 0;
}
.vis.timeline .labels {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border-right: 1px solid #bfbfbf;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.vis.timeline .labels .label-set {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labels .label-set .label {
position: absolute;
left: 0;
top: 0;
width: 100%;
color: #4d4d4d;
}
.vis.timeline.top .labels .label-set .label,
.vis.timeline.top .groupset .itemset-axis {
border-top: 1px solid #bfbfbf;
border-bottom: none;
}
.vis.timeline.bottom .labels .label-set .label,
.vis.timeline.bottom .groupset .itemset-axis {
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labels .label-set .label .inner {
display: inline-block;
padding: 5px;
}
.vis.timeline .itemset {
position: absolute;
padding: 0;
margin: 0;
overflow: hidden;
}
.vis.timeline .background {
}
.vis.timeline .foreground {
}
.vis.timeline .itemset-axis {
position: absolute;
}
.vis.timeline .item {
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
background-color: #D5DDF6;
display: inline-block;
}
.vis.timeline .item.selected {
border-color: #FFC200;
background-color: #FFF785;
z-index: 999;
}
.vis.timeline .item.cluster {
/* TODO: use another color or pattern? */
background: #97B0F8 url('img/cluster_bg.png');
color: white;
}
.vis.timeline .item.cluster.point {
border-color: #D5DDF6;
}
.vis.timeline .item.box {
text-align: center;
border-style: solid;
border-width: 1px;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.point {
background: none;
}
.vis.timeline .dot {
border: 5px solid #97B0F8;
position: absolute;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.range {
overflow: hidden;
border-style: solid;
border-width: 1px;
border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.rangeoverflow {
border-style: solid;
border-width: 1px;
border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.range .drag-left, .vis.timeline .item.rangeoverflow .drag-left {
cursor: w-resize;
z-index: 1000;
}
.vis.timeline .item.range .drag-right, .vis.timeline .item.rangeoverflow .drag-right {
cursor: e-resize;
z-index: 1000;
}
.vis.timeline .item.range .content, .vis.timeline .item.rangeoverflow .content {
position: relative;
display: inline-block;
}
.vis.timeline .item.line {
position: absolute;
width: 0;
border-left-width: 1px;
border-left-style: solid;
}
.vis.timeline .item .content {
margin: 5px;
white-space: nowrap;
overflow: hidden;
}
.vis.timeline .axis {
position: relative;
}
.vis.timeline .axis .text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
.vis.timeline .axis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
visibility: hidden;
}
.vis.timeline .axis .grid.vertical {
position: absolute;
width: 0;
border-right: 1px solid;
}
.vis.timeline .axis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .axis .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .axis .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .currenttime {
background-color: #FF7F6E;
width: 2px;
z-index: 9;
}
.vis.timeline .customtime {
background-color: #6E94FF;
width: 2px;
cursor: move;
z-index: 9;
}

+ 15765
- 0
dist/vis.js
File diff suppressed because it is too large
View File


+ 29
- 0
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 51
- 51
docs/css/prettify.css View File

@ -1,87 +1,87 @@
.com {
color: gray;
color: gray;
}
.lit {
color: red;
color: red;
}
.pun {
color: gray;
color: gray;
}
.pln {
color: #333333;
color: #333333;
}
pre.prettyprint {
border: 1px solid lightgray;
background-color: #fcfcfc;
padding: 5px;
border: 1px solid lightgray;
background-color: #fcfcfc;
padding: 5px;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
ol.linenums {
margin-top:0;
margin-bottom:0;
margin-top:0;
margin-bottom:0;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
list-style:none;
list-style:none;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
background:#eee;
background:#eee;
}
.str,.atv {
color: green;
color: green;
}
.kwd,.tag {
color:#2B7CE9;
color:#2B7CE9;
}
.typ,.atn,.dec {
color: darkorange;
color: darkorange;
}
@media print {
.com {
color:#600;
font-style:italic;
}
.typ {
color:#404;
font-weight:700;
}
.lit {
color:#044;
}
.pun {
color:#440;
}
.pln {
color:#000;
}
.atn {
color:#404;
}
.str,.atv {
color:#060;
}
.kwd,.tag {
color:#006;
font-weight:700;
}
.com {
color:#600;
font-style:italic;
}
.typ {
color:#404;
font-weight:700;
}
.lit {
color:#044;
}
.pun {
color:#440;
}
.pln {
color:#000;
}
.atn {
color:#404;
}
.str,.atv {
color:#060;
}
.kwd,.tag {
color:#006;
font-weight:700;
}
}

+ 39
- 39
docs/css/style.css View File

@ -1,77 +1,77 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
position: relative;
margin: 0 auto;
padding: 10px 10px 50px 10px;
width: 700px;
max-width: 100%;
box-sizing: border-box;
position: relative;
margin: 0 auto;
padding: 10px 10px 50px 10px;
width: 700px;
max-width: 100%;
box-sizing: border-box;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
font-size: 140%;
}
a > img {
border: none;
border: none;
}
a {
color: #2B7CE9;
text-decoration: none;
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
color: red;
text-decoration: underline;
}
table {
border-collapse: collapse;
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 551
- 544
docs/dataset.html
File diff suppressed because it is too large
View File


+ 136
- 136
docs/dataview.html View File

@ -2,69 +2,69 @@
<html>
<head>
<title>vis.js | DataView documentation</title>
<title>vis.js | DataView documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>DataView documentation</h1>
<h1>DataView documentation</h1>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Getting_Data">Getting Data</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Getting_Data">Getting Data</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Overview">Overview</h2>
<h2 id="Overview">Overview</h2>
<p>
A DataView offers a filtered and/or formatted view on a
<a href="dataset.html">DataSet</a>.
One can subscribe on changes in a DataView, and easily get filtered or
formatted data without having to specify filters and field types all
the time.
</p>
<p>
A DataView offers a filtered and/or formatted view on a
<a href="dataset.html">DataSet</a>.
One can subscribe on changes in a DataView, and easily get filtered or
formatted data without having to specify filters and field types all
the time.
</p>
<h2 id="Example">Example</h2>
<h2 id="Example">Example</h2>
<p>
The following example shows how to use a DataView.
</p>
<p>
The following example shows how to use a DataView.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
data.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
// create a DataView
// the view will only contain items having a property group with value 1,
// and will only output fields id, text, and date.
var view = new vis.DataView(data, {
filter: function (item) {
return (item.group == 1);
},
fields: ['id', 'text', 'date']
filter: function (item) {
return (item.group == 1);
},
fields: ['id', 'text', 'date']
});
// subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
console.log('event', event, params);
console.log('event', event, params);
});
// update an item in the data set
@ -78,131 +78,131 @@ console.log('ids', ids); // will output [1, 2]
var items = view.get();
</pre>
<h2 id="Construction">Construction</h2>
<h2 id="Construction">Construction</h2>
<p>
A DataView can be constructed as:
</p>
<p>
A DataView can be constructed as:
</p>
<pre class="prettyprint lang-js">
var data = new vis.DataView(dataset, options)
</pre>
<p>
where:
</p>
<ul>
<li>
<code>dataset</code> is a DataSet or DataView.
</li>
<li>
<code>options</code> is an object which can
contain the following properties. Note that these properties
are exactly the same as the properties available in methods
<code>DataSet.get</code> and <code>DataView.get</code>.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>convert</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>
An object containing field names as key, and data types as value.
By default, the type of the properties of an item are left
unchanged. When a field type is specified, this field in the
items will be converted to the specified type. This can be used
for example to convert ISO strings containing a date to a
JavaScript Date object, or convert strings to numbers or vice
versa. The available data types are listed in section
<a href="dataset.html#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>fields</td>
<td>String[&nbsp;]</td>
<td>
An array with field names.
By default, all properties of the items are emitted.
When <code>fields</code> is defined, only the properties
whose name is specified in <code>fields</code> will be included
in the returned items.
</td>
</tr>
<tr>
<td>filter</td>
<td>function</td>
<td>Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
</tr>
</table>
</li>
</ul>
<h2 id="Getting_Data">Getting Data</h2>
<p>
Data of the DataView can be retrieved using the method <code>get</code>.
</p>
<p>
where:
</p>
<ul>
<li>
<code>dataset</code> is a DataSet or DataView.
</li>
<li>
<code>options</code> is an object which can
contain the following properties. Note that these properties
are exactly the same as the properties available in methods
<code>DataSet.get</code> and <code>DataView.get</code>.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>convert</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>
An object containing field names as key, and data types as value.
By default, the type of the properties of an item are left
unchanged. When a field type is specified, this field in the
items will be converted to the specified type. This can be used
for example to convert ISO strings containing a date to a
JavaScript Date object, or convert strings to numbers or vice
versa. The available data types are listed in section
<a href="dataset.html#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>fields</td>
<td>String[&nbsp;]</td>
<td>
An array with field names.
By default, all properties of the items are emitted.
When <code>fields</code> is defined, only the properties
whose name is specified in <code>fields</code> will be included
in the returned items.
</td>
</tr>
<tr>
<td>filter</td>
<td>function</td>
<td>Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
</tr>
</table>
</li>
</ul>
<h2 id="Getting_Data">Getting Data</h2>
<p>
Data of the DataView can be retrieved using the method <code>get</code>.
</p>
<pre class="prettyprint lang-js">
var items = view.get();
</pre>
<p>
Data of a DataView can be filtered and formatted again, in exactly the
same way as in a DataSet. See sections
<a href="dataset.html#Data_Filtering">Data Filtering</a> and
<a href="dataset.html#Data_Formatting">Data Formatting</a> for more
information.
</p>
<p>
Data of a DataView can be filtered and formatted again, in exactly the
same way as in a DataSet. See sections
<a href="dataset.html#Data_Filtering">Data Filtering</a> and
<a href="dataset.html#Data_Formatting">Data Formatting</a> for more
information.
</p>
<pre class="prettyprint lang-js">
var items = view.get({
fields: ['id', 'score'],
filter: function (item) {
return (item.score > 50);
}
fields: ['id', 'score'],
filter: function (item) {
return (item.score > 50);
}
});
</pre>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in the DataView. Subscription works exactly
the same as for DataSets. See the documentation on
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
for more information.
</p>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in the DataView. Subscription works exactly
the same as for DataSets. See the documentation on
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
for more information.
</p>
<pre class="prettyprint lang-js">
// create a DataSet and a view on the data set
var data = new vis.DataSet();
var view = new vis.DataView({
filter: function (item) {
return (item.group == 2);
}
filter: function (item) {
return (item.group == 2);
}
});
// subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
console.log('event:', event, 'params:', params, 'senderId:', senderId);
console.log('event:', event, 'params:', params, 'senderId:', senderId);
});
// add, update, and remove data in the DataSet...
@ -210,11 +210,11 @@ view.subscribe('*', function (event, params, senderId) {
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
</div>
</body>

+ 821
- 815
docs/graph.html
File diff suppressed because it is too large
View File


+ 129
- 126
docs/index.html View File

@ -2,201 +2,204 @@
<html>
<head>
<title>vis.js | documentation</title>
<title>vis.js | documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>vis.js documentation</h1>
<p>
Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data.
</p>
<p>
The library is developed by
<a href="http://almende.com" target="_blank">Almende B.V.</a>
</p>
<h2 id="Components">Components</h2>
<p>
Vis.js contains of the following components:
</p>
<ul>
<li>
<a href="dataset.html"><b>DataSet</b></a>.
A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
A DataSet can filter and order items, and convert fields of items.
</li>
<li>
<a href="dataview.html"><b>DataView</b></a>.
A filtered and/or formatted view on a DataSet.
</li>
<li>
<a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges.
</li>
<li>
<a href="timeline.html"><b>Timeline</b></a>.
Display different types of data on a timeline. The timeline and the
items on the timeline can be interactively moved, zoomed, and
manipulated.
</li>
</ul>
<div style="text-align: center;">
<a href="img/vis_overview.png" target="_blank">
<img src="img/vis_overview.png" style="width: 250px; "/><br>
(click for a larger view)
</a>
</div>
<h2 id="Install">Install</h2>
<h3>npm</h3>
<h1>vis.js documentation</h1>
<p>
Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data.
</p>
<p>
The library is developed by
<a href="http://almende.com" target="_blank">Almende B.V.</a>
</p>
<h2 id="Components">Components</h2>
<p>
Vis.js contains of the following components:
</p>
<ul>
<li>
<a href="dataset.html"><b>DataSet</b></a>.
A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
A DataSet can filter and order items, and convert fields of items.
</li>
<li>
<a href="dataview.html"><b>DataView</b></a>.
A filtered and/or formatted view on a DataSet.
</li>
<li>
<a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges.
</li>
<li>
<a href="timeline.html"><b>Timeline</b></a>.
Display different types of data on a timeline. The timeline and the
items on the timeline can be interactively moved, zoomed, and
manipulated.
</li>
</ul>
<div style="text-align: center;">
<a href="img/vis_overview.png" target="_blank">
<img src="img/vis_overview.png" style="width: 250px; "/><br>
(click for a larger view)
</a>
</div>
<h2 id="Install">Install</h2>
<h3>npm</h3>
<pre class="prettyprint">
npm install vis
</pre>
<h3>bower</h3>
<h3>bower</h3>
<pre class="prettyprint">
bower install vis
</pre>
<h3>download</h3>
Download the library from the website:
<a href="http://visjs.org" target="_blank">http://visjs.org</a>.
<h3>download</h3>
Download the library from the website:
<a href="http://visjs.org" target="_blank">http://visjs.org</a>.
<h2 id="Load">Load</h2>
<h2 id="Load">Load</h2>
<p>
To use a component, include the javascript file of vis in your web page:
</p>
<p>
To load vis.js, include the javascript and css files of vis in your web page:
</p>
<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
// ... load a visualization
// ... load a visualization
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
or load vis.js using require.js:
</p>
<p>
or load vis.js using require.js:
</p>
<pre class="prettyprint lang-js">
require.config({
paths: {
vis: 'path/to/vis',
}
paths: {
vis: 'path/to/vis',
}
});
require(['vis'], function (math) {
// ... load a visualization
// ... load a visualization
});
</pre>
<p>
A timeline can be instantiated as follows. Other components can be
created in a similar way.
</p>
<p>
A timeline can be instantiated as follows. Other components can be
created in a similar way.
</p>
<pre class="prettyprint lang-js">
var timeline = new vis.Timeline(container, data, options);
</pre>
<p>
Where <code>container</code> is an HTML element, <code>data</code> is
an Array with data or a DataSet, and <code>options</code> is an optional
object with configuration options for the component.
</p>
<p>
Where <code>container</code> is an HTML element, <code>data</code> is
an Array with data or a DataSet, and <code>options</code> is an optional
object with configuration options for the component.
</p>
<h2 id="Use">Use</h2>
<h2 id="Use">Use</h2>
<p>
<p>
A basic example on using a Timeline is shown below. More examples can be
found in the <a href="https://github.com/almende/vis/tree/master/examples"
target="_blank">examples directory</a> of the project.
</p>
target="_blank">examples directory</a> of the project.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="license">License</h2>
<h2 id="license">License</h2>
<p>
Copyright (C) 2010-2013 Almende B.V.
</p>
<p>
Copyright (C) 2010-2013 Almende B.V.
</p>
<p>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
</p>
<p>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
</p>
<p>
<a href="http://www.apache.org/licenses/LICENSE-2.0"
target="_blank">http://www.apache.org/licenses/LICENSE-2.0</a>
</p>
<p>
<a href="http://www.apache.org/licenses/LICENSE-2.0"
target="_blank">http://www.apache.org/licenses/LICENSE-2.0</a>
</p>
<p>
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
</p>
<p>
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
</p>
</div>
</body>

+ 464
- 419
docs/timeline.html
File diff suppressed because it is too large
View File


BIN
download/vis.zip View File


+ 34
- 34
examples/graph/01_basic_usage.html View File

@ -1,17 +1,17 @@
<!doctype html>
<html>
<head>
<title>Graph | Basic usage</title>
<title>Graph | Basic usage</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
@ -19,31 +19,31 @@
<div id="mygraph"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{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
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var graph = new vis.Graph(container, data, options);
// create an array with nodes
var nodes = [
{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
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// 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>
</body>

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

@ -1,105 +1,105 @@
<!doctype html>
<html>
<head>
<title>Graph | Random nodes</title>
<title>Graph | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
connectionCount[i] = 0;
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
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++;
}
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
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
});
connectionCount[from]++;
connectionCount[to]++;
}
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle'
},
edges: {
length: 50
},
stabilize: false
};
graph = new vis.Graph(container, data, options);
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle'
},
edges: {
length: 50
},
stabilize: false
};
graph = new vis.Graph(container, data, options);
// add event listeners
vis.events.addListener(graph, 'select', function(params) {
document.getElementById('selection').innerHTML =
'Selection: ' + graph.getSelection();
});
}
</script>
// add event listeners
vis.events.addListener(graph, 'select', function(params) {
document.getElementById('selection').innerHTML =
'Selection: ' + graph.getSelection();
});
}
</script>
</head>
<body onload="draw();">
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>

+ 72
- 72
examples/graph/03_images.html View File

@ -1,78 +1,78 @@
<!doctype html>
<html>
<head>
<title>Graph | Images</title>
<style type="text/css">
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/refresh-cl/';
var LENGTH_MAIN = 150;
var LENGTH_SUB = 50;
// 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: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
edges.push({from: 1, to: 2, length: LENGTH_MAIN});
edges.push({from: 1, to: 3, length: LENGTH_MAIN});
for (var i = 4; i <= 7; i++) {
nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
edges.push({from: 2, to: i, length: LENGTH_SUB});
}
nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
edges.push({from: 2, to: 101, length: LENGTH_SUB});
nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
edges.push({from: 3, to: 102, length: LENGTH_SUB});
nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
edges.push({from: 1, to: 103, length: LENGTH_SUB});
nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
edges.push({from: 1, to: 104, length: LENGTH_SUB});
for (var i = 200; i <= 201; i++ ) {
nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
edges.push({from: 3, to: i, length: LENGTH_SUB});
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false // stabilize positions before displaying
};
graph = new vis.Graph(container, data, options);
}
</script>
<title>Graph | Images</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var DIR = 'img/refresh-cl/';
var LENGTH_MAIN = 150;
var LENGTH_SUB = 50;
// 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: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
edges.push({from: 1, to: 2, length: LENGTH_MAIN});
edges.push({from: 1, to: 3, length: LENGTH_MAIN});
for (var i = 4; i <= 7; i++) {
nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
edges.push({from: 2, to: i, length: LENGTH_SUB});
}
nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
edges.push({from: 2, to: 101, length: LENGTH_SUB});
nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
edges.push({from: 3, to: 102, length: LENGTH_SUB});
nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
edges.push({from: 1, to: 103, length: LENGTH_SUB});
nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
edges.push({from: 1, to: 104, length: LENGTH_SUB});
for (var i = 200; i <= 201; i++ ) {
nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
edges.push({from: 3, to: i, length: LENGTH_SUB});
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false // stabilize positions before displaying
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">

+ 57
- 57
examples/graph/04_shapes.html View File

@ -1,71 +1,71 @@
<!doctype html>
<html>
<head>
<title>Graph | Shapes</title>
<title>Graph | Shapes</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [
{id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
{id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
{id: 3, label: 'database', shape: 'database', group: 'group_x'},
{id: 4, label: 'box', shape: 'box', group: 'group_x'}
];
function draw() {
nodes = [
{id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
{id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
{id: 3, label: 'database', shape: 'database', group: 'group_x'},
{id: 4, label: 'box', shape: 'box', group: 'group_x'}
];
edges = [
{from: 3, to: 1, style: 'arrow'},
{from: 1, to: 4, style: 'dash-line'},
{from: 1, to: 2, style: 'arrow-center'}
];
edges = [
{from: 3, to: 1, style: 'arrow'},
{from: 1, to: 4, style: 'dash-line'},
{from: 1, to: 2, style: 'arrow-center'}
];
var mainId = 5;
nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
var id = 6;
for (var size = 1; size < 4; size++) {
var groupId = id;
nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
edges.push({from: mainId, to: groupId, color: 'gray', width: size});
id++;
var mainId = 5;
nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
var id = 6;
for (var size = 1; size < 4; size++) {
var groupId = id;
nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
edges.push({from: mainId, to: groupId, color: 'gray', width: size});
id++;
for (var i in shapes) {
if (shapes.hasOwnProperty(i)) {
nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
edges.push({from: groupId, to: id, color: 'gray', width: size});
id++;
}
}
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false
};
graph = new vis.Graph(container, data, options);
for (var i in shapes) {
if (shapes.hasOwnProperty(i)) {
nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
edges.push({from: groupId, to: id, color: 'gray', width: size});
id++;
}
}
</script>
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">

+ 58
- 58
examples/graph/05_social_network.html View File

@ -1,76 +1,76 @@
<!doctype html>
<html>
<head>
<title>Graph | Social Network</title>
<title>Graph | Social Network</title>
<style>
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
background: #F3F3F3;
}
</style>
<style>
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
background: #F3F3F3;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
var nodes = null;
var edges = null;
var graph = null;
var nodes = null;
var edges = null;
var graph = null;
function draw() {
// create people
nodes = [
{id: 1, label: 'Algie', image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
{id: 2, label: 'Alston', image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
{id: 3, label: 'Barney', image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
{id: 4, label: 'Coley', image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
{id: 5, label: 'Grant', image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
{id: 6, label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
{id: 7, label: 'Lee', image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
{id: 8, label: 'Merlin', image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
{id: 9, label: 'Mick', image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
{id: 10, label: 'Tod', image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
];
function draw() {
// create people
nodes = [
{id: 1, label: 'Algie', image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
{id: 2, label: 'Alston', image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
{id: 3, label: 'Barney', image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
{id: 4, label: 'Coley', image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
{id: 5, label: 'Grant', image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
{id: 6, label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
{id: 7, label: 'Lee', image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
{id: 8, label: 'Merlin', image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
{id: 9, label: 'Mick', image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
{id: 10, label: 'Tod', image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
];
// create connections
var color = '#BFBFBF';
edges = [
{from: 2, to: 8, value: 3, label: 3, color: color},
{from: 2, to: 9, value: 5, label: 5, color: color},
{from: 2, to: 10, value: 1, label: 1, color: color},
{from: 4, to: 6, value: 8, label: 8, color: color},
{from: 5, to: 7, value: 2, label: 2, color: color},
{from: 4, to: 5, value: 1, label: 1, color: color},
{from: 9, to: 10, value: 2, label: 2, color: color},
{from: 2, to: 3, value: 6, label: 6, color: color},
{from: 3, to: 9, value: 4, label: 4, color: color},
{from: 5, to: 3, value: 1, label: 1, color: color},
{from: 2, to: 7, value: 4, label: 4, color: color}
];
// create connections
var color = '#BFBFBF';
edges = [
{from: 2, to: 8, value: 3, label: 3, color: color},
{from: 2, to: 9, value: 5, label: 5, color: color},
{from: 2, to: 10, value: 1, label: 1, color: color},
{from: 4, to: 6, value: 8, label: 8, color: color},
{from: 5, to: 7, value: 2, label: 2, color: color},
{from: 4, to: 5, value: 1, label: 1, color: color},
{from: 9, to: 10, value: 2, label: 2, color: color},
{from: 2, to: 3, value: 6, label: 6, color: color},
{from: 3, to: 9, value: 4, label: 4, color: color},
{from: 5, to: 3, value: 1, label: 1, color: color},
{from: 2, to: 7, value: 4, label: 4, color: color}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
graph = new vis.Graph(container, data, options);
}
</script>
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<p>
Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
</p>
<div id="info"></div>

+ 141
- 141
examples/graph/06_groups.html View File

@ -1,156 +1,156 @@
<!doctype html>
<html>
<head>
<title>Graph | Groups</title>
<title>Graph | Groups</title>
<style>
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
google.load('visualization', '1');
// Set callback to run when API is loaded
google.setOnLoadCallback(draw);
// Called when the Visualization API is loaded.
function draw() {
var from, to;
nodes = [];
edges = [];
var color = 'gray';
var len = undefined;
// randomly create some nodes
var nodeCount = parseInt(document.getElementById('nodeCount').value);
var nodeOffset = 0;
var groupMin = 0;
var groupMax = parseInt(document.getElementById('groupCount').value);
var group = groupMin;
var groupLeader = []; // will contain the node id with the most links of each group
while (group < groupMax) {
// randomly create some nodes
var i = 0;
var cols = parseInt(Math.sqrt(nodeCount));
var connectionCount = [];
while (i < nodeCount) {
nodes.push({
id: i + nodeOffset,
label: String(i + nodeOffset),
group: group
});
connectionCount[i] = 0;
// create links in a scale-free-graph way
if (i == 1) {
from = i;
to = 0;
edges.push({
from: from + nodeOffset,
to: to + nodeOffset,
length: len,
color: color
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = (i - 1) * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
<style>
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
from = i;
to = j;
edges.push({
from: from + nodeOffset,
to: to + nodeOffset,
length: len,
color: color
});
connectionCount[from]++;
connectionCount[to]++;
}
i++;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
google.load('visualization', '1');
// Set callback to run when API is loaded
google.setOnLoadCallback(draw);
// Called when the Visualization API is loaded.
function draw() {
var from, to;
nodes = [];
edges = [];
var color = 'gray';
var len = undefined;
// randomly create some nodes
var nodeCount = parseInt(document.getElementById('nodeCount').value);
var nodeOffset = 0;
var groupMin = 0;
var groupMax = parseInt(document.getElementById('groupCount').value);
var group = groupMin;
var groupLeader = []; // will contain the node id with the most links of each group
while (group < groupMax) {
// randomly create some nodes
var i = 0;
var cols = parseInt(Math.sqrt(nodeCount));
var connectionCount = [];
while (i < nodeCount) {
nodes.push({
id: i + nodeOffset,
label: String(i + nodeOffset),
group: group
});
connectionCount[i] = 0;
// create links in a scale-free-graph way
if (i == 1) {
from = i;
to = 0;
edges.push({
from: from + nodeOffset,
to: to + nodeOffset,
length: len,
color: color
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = (i - 1) * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
from = i;
to = j;
edges.push({
from: from + nodeOffset,
to: to + nodeOffset,
length: len,
color: color
});
connectionCount[from]++;
connectionCount[to]++;
}
i++;
}
// calculate the node with the most number of connections
var leader = 0;
for (var c in connectionCount) {
if (connectionCount.hasOwnProperty(c)) {
if (connectionCount[c] > connectionCount[leader]) {
leader = parseInt(c);
}
}
}
if (group > groupMin) {
// connect to the leader of this group to the leader of a random other group
from = leader + nodeOffset;
to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
edges.push({
from: from,
to: to,
length: len,
color: color
});
}
// add this leader to the list
groupLeader[group] = leader + nodeOffset;
nodeOffset += nodeCount;
group++;
// calculate the node with the most number of connections
var leader = 0;
for (var c in connectionCount) {
if (connectionCount.hasOwnProperty(c)) {
if (connectionCount[c] > connectionCount[leader]) {
leader = parseInt(c);
}
}
}
if (group > groupMin) {
// connect to the leader of this group to the leader of a random other group
from = leader + nodeOffset;
to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
edges.push({
from: from,
to: to,
length: len,
color: color
});
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false,
nodes: {
shape: 'dot'
},
edges: {
length: 50
}
};
graph = new vis.Graph(container, data, options);
// add this leader to the list
groupLeader[group] = leader + nodeOffset;
nodeOffset += nodeCount;
group++;
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false,
nodes: {
shape: 'dot'
},
edges: {
length: 50
}
</script>
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">
<form onsubmit= "javascript: draw(); return false;">
Number of groups:
<input type="text" value="6" id="groupCount" style="width: 50px;">
Number of nodes per group:
<input type="text" value="7" id="nodeCount" style="width: 50px;">
<input type="submit" value="Go">
Number of groups:
<input type="text" value="6" id="groupCount" style="width: 50px;">
Number of nodes per group:
<input type="text" value="7" id="nodeCount" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>

+ 44
- 44
examples/graph/07_selections.html View File

@ -1,17 +1,17 @@
<!doctype html>
<html>
<head>
<title>Graph | Selections</title>
<title>Graph | Selections</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
@ -20,45 +20,45 @@
<div id="info"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{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
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create an array with nodes
var nodes = [
{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 a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
}
};
graph = new vis.Graph(container, data, options);
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// add event listener
function onSelect() {
document.getElementById('info').innerHTML +=
'selection: ' + graph.getSelection().join(', ') + '<br>';
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
}
vis.events.addListener(graph, 'select', onSelect);
};
graph = new vis.Graph(container, data, options);
// add event listener
function onSelect() {
document.getElementById('info').innerHTML +=
'selection: ' + graph.getSelection().join(', ') + '<br>';
}
vis.events.addListener(graph, 'select', onSelect);
// set initial selection (id's of some nodes)
graph.setSelection([3, 4, 5]);
// set initial selection (id's of some nodes)
graph.setSelection([3, 4, 5]);
</script>
</body>

+ 87
- 87
examples/graph/08_mobile_friendly.html View File

@ -1,105 +1,105 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph | Mobile friendly</title>
<title>Graph | Mobile friendly</title>
<style type="text/css">
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
<style type="text/css">
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
width: 100%;
height: 100%;
}
</style>
#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">
<!-- 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" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
<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 = [];
// 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
});
// 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;
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++;
}
// 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]++;
}
}
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);
// 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
}
</script>
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()" onresize="graph.redraw();">

+ 63
- 63
examples/graph/09_sizing.html View File

@ -1,77 +1,77 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Sizing</title>
<title>Graph | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<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" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var DIR = 'img/soft-scraps-icons/';
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)'}
];
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'}
];
// 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);
// Instantiate our graph object.
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot'
},
edges: {
color: '#97C2FC'
}
</script>
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">

+ 36
- 36
examples/graph/10_multiline_text.html View File

@ -1,47 +1,47 @@
<!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>
<title>Graph | Multiline text</title>
<style type="text/css">
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/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'}
];
<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 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>
// 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()">

+ 114
- 114
examples/graph/11_custom_style.html View File

@ -1,128 +1,128 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Custom style</title>
<title>Graph | Custom style</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
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" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var options = null;
var graph = null;
<script type="text/javascript">
var nodes = null;
var edges = null;
var options = null;
var graph = null;
// Called when the Visualization API is loaded.
function draw() {
// create nodes
nodes = [
{id: 1, label: 'black node', group: 'black'},
{id: 2, label: 'black node', group: 'black'},
{id: 3, label: 'black node', group: 'black'},
{id: 4, label: 'red node', group: 'black', color: 'red'},
{id: 5, label: 'gray node', group: 'gray'},
{id: 6, label: 'gray node', group: 'gray'},
{id: 7, label: 'gray node', group: 'gray'},
{id: 8, label: 'gray node', group: 'gray'},
{id: 9, label: 'image node', group: 'white'},
{id: 10, label: 'image node', group: 'white'},
{id: 11, label: 'default node'},
{id: 12, label: 'default node'}
];
// Called when the Visualization API is loaded.
function draw() {
// create nodes
nodes = [
{id: 1, label: 'black node', group: 'black'},
{id: 2, label: 'black node', group: 'black'},
{id: 3, label: 'black node', group: 'black'},
{id: 4, label: 'red node', group: 'black', color: 'red'},
{id: 5, label: 'gray node', group: 'gray'},
{id: 6, label: 'gray node', group: 'gray'},
{id: 7, label: 'gray node', group: 'gray'},
{id: 8, label: 'gray node', group: 'gray'},
{id: 9, label: 'image node', group: 'white'},
{id: 10, label: 'image node', group: 'white'},
{id: 11, label: 'default node'},
{id: 12, label: 'default node'}
];
// create edges
edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 1, to: 4},
{from: 5, to: 6},
{from: 5, to: 7},
{from: 5, to: 8},
{from: 9, to: 10},
{from: 9, to: 11},
{from: 9, to: 12},
// create edges
edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 1, to: 4},
{from: 5, to: 6},
{from: 5, to: 7},
{from: 5, to: 8},
{from: 9, to: 10},
{from: 9, to: 11},
{from: 9, to: 12},
{from: 1, to: 5},
{from: 5, to: 9},
{from: 9, to: 1}
];
{from: 1, to: 5},
{from: 5, to: 9},
{from: 9, to: 1}
];
// specify options
options = {
stabilize: false,
edges: {
length: 120,
width: 2,
style: 'arrow',
color: 'gray'
},
nodes: {
// default for all nodes
fontFace: 'times',
shape: 'circle',
color: {
border: 'orange',
background: 'yellow',
highlight: {
border: 'darkorange',
background: 'gold'
}
}
},
groups: {
black: {
// defaults for nodes in this group
radius: 15,
color: 'black',
fontColor: 'white',
fontSize: 18,
fontFace: 'courier',
shape: 'rect'
},
gray: {
color: {
border: 'black',
background: 'gray',
highlight: {
border: 'black',
background: 'lightgray'
}
},
fontSize: 18,
fontFace: 'arial',
shape: 'circle'
},
white: {
color: {
border: 'black',
background: 'white'
},
fontColor: 'red',
shape: 'image',
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
}
}
};
// create the graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
graph = new vis.Graph(container, data, options);
// specify options
options = {
stabilize: false,
edges: {
length: 120,
width: 2,
style: 'arrow',
color: 'gray'
},
nodes: {
// default for all nodes
fontFace: 'times',
shape: 'circle',
color: {
border: 'orange',
background: 'yellow',
highlight: {
border: 'darkorange',
background: 'gold'
}
}
},
groups: {
black: {
// defaults for nodes in this group
radius: 15,
color: 'black',
fontColor: 'white',
fontSize: 18,
fontFace: 'courier',
shape: 'rect'
},
gray: {
color: {
border: 'black',
background: 'gray',
highlight: {
border: 'black',
background: 'lightgray'
}
},
fontSize: 18,
fontFace: 'arial',
shape: 'circle'
},
white: {
color: {
border: 'black',
background: 'white'
},
fontColor: 'red',
shape: 'image',
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
}
}
</script>
};
// create the graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">

+ 66
- 66
examples/graph/12_scalable_images.html View File

@ -1,80 +1,80 @@
<!doctype html>
<html>
<head>
<title>Graph | Scalable images</title>
<title>Graph | Scalable images</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
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" src="../../dist/vis.js"></script>
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
var nodes = null;
var edges = null;
var graph = null;
var nodes = null;
var edges = null;
var graph = null;
// Called when the Visualization API is loaded.
function draw() {
// create people.
// value corresponds with the age of the person
var DIR = 'img/soft-scraps-icons/';
nodes = [
{id: 1, value: 2, shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
{id: 2, value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
{id: 3, value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
{id: 4, value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
{id: 5, value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
{id: 6, value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
{id: 7, value: 6, shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
{id: 8, value: 5, shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
{id: 9, value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
{id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
];
// Called when the Visualization API is loaded.
function draw() {
// create people.
// value corresponds with the age of the person
var DIR = 'img/soft-scraps-icons/';
nodes = [
{id: 1, value: 2, shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
{id: 2, value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
{id: 3, value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
{id: 4, value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
{id: 5, value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
{id: 6, value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
{id: 7, value: 6, shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
{id: 8, value: 5, shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
{id: 9, value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
{id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
];
// create connetions between people
// 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'}
];
// create connetions between people
// 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'}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
widthMin: 20, // min width in pixels
widthMax: 100 // max width in pixels
},
edges: {
color: 'lightgray'
}
};
graph = new vis.Graph(container, data, options);
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
widthMin: 20, // min width in pixels
widthMax: 100 // max width in pixels
},
edges: {
color: 'lightgray'
}
</script>
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">

+ 52
- 52
examples/graph/13_dashed_lines.html View File

@ -1,65 +1,65 @@
<!doctype html>
<html>
<head>
<title>Graph | Dashed lines</title>
<title>Graph | Dashed lines</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
// Called on page load
function draw() {
var nodes = [
{id: 1, label: 'dashed\nline\nexamples'},
{id: 2, label: 'default'},
{id: 3, label: 'dash.length: 20\ndash.gap: 20'},
{id: 4, label: 'dash.length: 20\ndash.gap: 5'},
{id: 5, label: 'dash.length: 5\ndash.gap: 20'},
{id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
];
var edges = [
{from: 1, to: 2, style: 'dash-line'},
{from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
{from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
{from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
{from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
];
<script type="text/javascript">
// Called on page load
function draw() {
var nodes = [
{id: 1, label: 'dashed\nline\nexamples'},
{id: 2, label: 'default'},
{id: 3, label: 'dash.length: 20\ndash.gap: 20'},
{id: 4, label: 'dash.length: 20\ndash.gap: 5'},
{id: 5, label: 'dash.length: 5\ndash.gap: 20'},
{id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
];
var edges = [
{from: 1, to: 2, style: 'dash-line'},
{from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
{from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
{from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
{from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
];
// create the graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
},
edges: {
length: 180
},
stabilize: false
};
var graph = new vis.Graph(container, data, options);
}
</script>
// create the graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
},
edges: {
length: 180
},
stabilize: false
};
var graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw();">
<p>
This example shows the different options for dashed lines.
</p>
<p>
This example shows the different options for dashed lines.
</p>
<div id="mygraph"></div>
<div id="mygraph"></div>
</body>
</html>

+ 10
- 10
examples/graph/14_dot_language.html View File

@ -1,18 +1,18 @@
<html>
<head>
<title>Graph | DOT Language</title>
<title>Graph | DOT Language</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
</head>
<body>
<div id="mygraph"></div>
<div id="mygraph"></div>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var data = {
dot: 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
var graph = new vis.Graph(container, data);
</script>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var data = {
dot: 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
var graph = new vis.Graph(container, data);
</script>
</body>
</html>

+ 172
- 172
examples/graph/15_dot_language_playground.html View File

@ -1,201 +1,201 @@
<!doctype html>
<html>
<head>
<title>Graph | DOT language playground</title>
<script type="text/javascript" src="../../vis.js"></script>
<style type="text/css">
body, html {
font: 10pt sans;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
}
<title>Graph | DOT language playground</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
body, html {
font: 10pt sans;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
}
#frame {
width: 100%;
height: 99%;
}
#frame td {
padding: 10px;
height: 100%;
}
#error {
color: red;
}
#frame {
width: 100%;
height: 99%;
}
#frame td {
padding: 10px;
height: 100%;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
}
#mygraph {
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
#mygraph {
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
display: none;
}
</style>
textarea.example {
display: none;
}
</style>
</head>
<body onload="drawExample('example1')">
<table id="frame">
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<div>
<a href="javascript: drawExample('example1')">example 1</a>
<a href="javascript: drawExample('example2')">example 2</a>
<a href="javascript: drawExample('example3')">example 3</a>
</div>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<textarea id="data"></textarea>
</td>
<td>
<div id="mygraph"></div>
</td>
</tr>
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<div>
<a href="javascript: drawExample('example1')">example 1</a>
<a href="javascript: drawExample('example2')">example 2</a>
<a href="javascript: drawExample('example3')">example 3</a>
</div>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<textarea id="data"></textarea>
</td>
<td>
<div id="mygraph"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var graph, data;
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the graph when window resizes
window.onresize = function () {
graph.redraw()
};
// parse and draw the data
function draw () {
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = {
dot: txtData.value
};
// create a graph
var container = document.getElementById('mygraph');
var options = {};
graph = new vis.Graph(container, data, options);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
}
}
// show an error message
txtError.innerHTML = err.toString();
}
var graph, data;
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the graph when window resizes
window.onresize = function () {
graph.redraw()
};
// parse and draw the data
function draw () {
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = {
dot: txtData.value
};
// create a graph
var container = document.getElementById('mygraph');
var options = {};
graph = new vis.Graph(container, data, options);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
}
}
/**
* Draw an example
* @param {String} id HTML id of the textarea containing the example code
*/
function drawExample(id) {
txtData.value = document.getElementById(id).value;
draw();
// show an error message
txtError.innerHTML = err.toString();
}
}
/**
* Draw an example
* @param {String} id HTML id of the textarea containing the example code
*/
function drawExample(id) {
txtData.value = document.getElementById(id).value;
draw();
}
</script>
<textarea id="example1" class="example">
digraph {
node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontColor=white,
color=red,
]
}
digraph {
node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontColor=white,
color=red,
]
}
</textarea>
<textarea id="example2" class="example">
digraph topology
{
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}
digraph topology
{
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}
</textarea>
<textarea id="example3" class="example">
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}
</textarea>
</body>

+ 224
- 224
examples/graph/16_dynamic_data.html View File

@ -1,264 +1,264 @@
<!doctype html>
<html>
<head>
<title>Graph | DataSet</title>
<title>Graph | DataSet</title>
<style type="text/css">
html, body {
font: 11pt arial;
}
<style type="text/css">
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
table table td {
vertical-align: middle;
}
input[type=text], pre {
border: 1px solid lightgray;
}
input[type=text], pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#graph {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
#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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes, edges, graph;
<script type="text/javascript">
var nodes, edges, graph;
// convenience method to stringify a JSON object
function toJSON (obj) {
return JSON.stringify(obj, null, 4);
}
// 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);
}
});
$(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);
}
});
// 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 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 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>
// 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.
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>
<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>
<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>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Graph</h2>
<div id="graph"></div>
</td>
</tr>
<td>
<h2>Graph</h2>
<div id="graph"></div>
</td>
</tr>
</table>
</body>

+ 140
- 140
examples/graph/17_network_info.html View File

@ -1,149 +1,149 @@
<!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;
<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="../../dist/vis.min.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var LENGTH_MAIN = 350,
LENGTH_SERVER = 150,
LENGTH_SUB = 50,
WIDTH_SCALE = 2,
GREEN = 'green',
RED = '#C5000B',
ORANGE = 'orange',
//GRAY = '#666666',
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: WIDTH_SCALE * 6, label: '0.71 mbps'});
edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
// group around 2
for (var i = 100; i <= 104; i++) {
var value = 1;
var width = WIDTH_SCALE * 2;
var color = GRAY;
var label = null;
if (i === 103) {
value = 5;
width = 3;
}
#mygraph {
width: 100%;
height: 100%;
box-sizing: border-box;
if (i === 102) {
color = RED;
label = 'error';
}
</style>
<script type="text/javascript" src="../../vis.min.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var LENGTH_MAIN = 350,
LENGTH_SERVER = 150,
LENGTH_SUB = 50,
WIDTH_SCALE = 2,
GREEN = 'green',
RED = '#C5000B',
ORANGE = 'orange',
//GRAY = '#666666',
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: WIDTH_SCALE * 6, label: '0.71 mbps'});
edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
// group around 2
for (var i = 100; i <= 104; i++) {
var value = 1;
var width = WIDTH_SCALE * 2;
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, width: WIDTH_SCALE});
// 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: WIDTH_SCALE * 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: WIDTH_SCALE});
}
// 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: WIDTH_SCALE * 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: WIDTH_SCALE * 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, width: WIDTH_SCALE, label: '0.3 mbps'});
nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
// legend
var mygraph = document.getElementById('mygraph');
var x = - mygraph.clientWidth / 2 + 50;
var y = - mygraph.clientHeight / 2 + 50;
var step = 70;
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false, // stabilize positions before displaying
nodes: {
radiusMin: 16,
radiusMax: 32,
fontColor: BLACK
},
edges: {
color: GRAY
},
groups: {
'switch': {
shape: 'triangle',
color: '#FF9900' // orange
},
desktop: {
shape: 'dot',
color: "#2B7CE9" // blue
},
mobile: {
shape: 'dot',
color: "#5A1E5C" // purple
},
server: {
shape: 'square',
color: "#C5000B" // red
},
internet: {
shape: 'square',
color: "#109618" // green
}
}
};
graph = new vis.Graph(container, data, options);
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, width: WIDTH_SCALE});
// 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: WIDTH_SCALE * 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: WIDTH_SCALE});
}
// 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: WIDTH_SCALE * 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: WIDTH_SCALE * 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, width: WIDTH_SCALE, label: '0.3 mbps'});
nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
// legend
var mygraph = document.getElementById('mygraph');
var x = - mygraph.clientWidth / 2 + 50;
var y = - mygraph.clientHeight / 2 + 50;
var step = 70;
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false, // stabilize positions before displaying
nodes: {
radiusMin: 16,
radiusMax: 32,
fontColor: BLACK
},
edges: {
color: GRAY
},
groups: {
'switch': {
shape: 'triangle',
color: '#FF9900' // orange
},
desktop: {
shape: 'dot',
color: "#2B7CE9" // blue
},
mobile: {
shape: 'dot',
color: "#5A1E5C" // purple
},
server: {
shape: 'square',
color: "#C5000B" // red
},
internet: {
shape: 'square',
color: "#109618" // green
}
}
</script>
};
graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">

+ 60
- 60
examples/graph/graphviz/graphviz_gallery.html View File

@ -1,86 +1,86 @@
<html>
<head>
<title>Graph | Graphviz Gallery</title>
<title>Graph | Graphviz Gallery</title>
<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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<style type="text/css">
p {
width: 600px;
}
html, body, select {
font: 11pt arial;
}
#mygraph {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
p {
width: 600px;
}
html, body, select {
font: 11pt arial;
}
#mygraph {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<script>
if (location.href.substr(0, 5) == 'file:') {
document.write(
'<p style="color: red;">' +
'Error: Cannot fetch the example data because of security ' +
'restrictions in JavaScript. Run the example from a server ' +
'instead of as a local file to resolve this problem. ' +
'Alternatively, you can load DOT graphs in ' +
'the <a href="../15_dot_language_playground.html" ' +
'style="color:red;">playground</a>.' +
if (location.href.substr(0, 5) == 'file:') {
document.write(
'<p style="color: red;">' +
'Error: Cannot fetch the example data because of security ' +
'restrictions in JavaScript. Run the example from a server ' +
'instead of as a local file to resolve this problem. ' +
'Alternatively, you can load DOT graphs in ' +
'the <a href="../15_dot_language_playground.html" ' +
'style="color:red;">playground</a>.' +
'</p>');
}
}
</script>
<p>
The following examples are unmodified copies from the
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
The following examples are unmodified copies from the
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
</p>
<p>
Note that some style attributes of Graphviz are not supported by vis.js,
and that vis.js offers options not supported by Graphviz (which could make
some examples look much nicer).
Note that some style attributes of Graphviz are not supported by vis.js,
and that vis.js offers options not supported by Graphviz (which could make
some examples look much nicer).
</p>
<p>
<label for="url">Select an example:</label>
<select id="url" onchange="loadData()">
<option value="data/fsm.gv.txt">fsm</option>
<option value="data/hello.gv.txt">hello</option>
<option value="data/process.gv.txt">process</option>
<option value="data/siblings.gv.txt">siblings</option>
<option value="data/softmaint.gv.txt">softmaint</option>
<option value="data/traffic_lights.gv.txt">traffic_lights</option>
<option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option>
<option value="data/world.gv.txt">world</option>
</select>
<label for="url">Select an example:</label>
<select id="url" onchange="loadData()">
<option value="data/fsm.gv.txt">fsm</option>
<option value="data/hello.gv.txt">hello</option>
<option value="data/process.gv.txt">process</option>
<option value="data/siblings.gv.txt">siblings</option>
<option value="data/softmaint.gv.txt">softmaint</option>
<option value="data/traffic_lights.gv.txt">traffic_lights</option>
<option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option>
<option value="data/world.gv.txt">world</option>
</select>
</p>
<div id="mygraph"></div>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var url = document.getElementById('url');
var graph = new vis.Graph(container);
var container = document.getElementById('mygraph');
var url = document.getElementById('url');
var graph = new vis.Graph(container);
function loadData () {
$.ajax({
type: "GET",
url: url.value
}).done(function(data) {
graph.setOptions({
stabilize: false
});
graph.setData( {
dot: data
});
function loadData () {
$.ajax({
type: "GET",
url: url.value
}).done(function(data) {
graph.setOptions({
stabilize: false
});
graph.setData( {
dot: data
});
});
}
loadData();
}
loadData();
</script>
</body>
</html>

+ 21
- 21
examples/graph/index.html View File

@ -2,34 +2,34 @@
<html>
<head>
<title>vis.js | graph examples</title>
<title>vis.js | graph examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div id="container">
<h1>vis.js graph examples</h1>
<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>
<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>

+ 19
- 18
examples/timeline/01_basic.html View File

@ -1,31 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../vis.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 51
- 49
examples/timeline/02_dataset.html View File

@ -1,60 +1,62 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Dataset example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
height: 100%;
margin: 0;
padding: 0;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 100%;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../vis.js"></script>
<title>Timeline | Dataset example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
height: 100%;
margin: 0;
padding: 0;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 100%;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
// create a dataset with items
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
items.add([
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
{id: 2, content: 'item 2', start: now.clone().add('days', -2)},
{id: 3, content: 'item 3', start: now.clone().add('days', 2)},
{id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11)}
]);
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 7),
orientation: 'top',
height: '100%'
};
var timeline = new vis.Timeline(container, items, options);
var now = moment().minutes(0).seconds(0).milliseconds(0);
// create a dataset with items
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
items.add([
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
{id: 2, content: 'item 2', start: now.clone().add('days', -2)},
{id: 3, content: 'item 3', start: now.clone().add('days', 2)},
{id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11)}
]);
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 7),
orientation: 'top',
height: '100%',
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>

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

@ -13,7 +13,8 @@
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../vis.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>

+ 52
- 47
examples/timeline/04_html_data.html View File

@ -1,69 +1,74 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | HTML data</title>
<title>Timeline | HTML data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
</style>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../vis.js"></script>
</head>
<body>
<p>
Load HTML contents in the Timeline
Load HTML contents in the Timeline
</p>
<div id="visualization"></div>
<script>
// create a couple of HTML items in various ways
// create a couple of HTML items in various ways
var item1 = document.createElement('div');
item1.appendChild(document.createTextNode('item 1'));
var item1 = document.createElement('div');
item1.appendChild(document.createTextNode('item 1'));
var item2 = document.createElement('div');
item2.innerHTML = '<span>item 2</span>';
var item2 = document.createElement('div');
item2.innerHTML = '<span>item 2</span>';
var item3 = document.createElement('div');
var span3 = document.createElement('span');
span3.className = 'large';
span3.appendChild(document.createTextNode('item 3'));
item3.appendChild(span3);
var item3 = document.createElement('div');
var span3 = document.createElement('span');
span3.className = 'large';
span3.appendChild(document.createTextNode('item 3'));
item3.appendChild(span3);
var item4 = 'item <span class="large">4</span>';
var item4 = 'item <span class="large">4</span>';
var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
img5.src = 'img/attachment-icon.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);
var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
img5.src = 'img/attachment-icon.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);
var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';
// create data and a Timeline
var container = document.getElementById('visualization');
var items = [
{id: 1, content: item1, start: '2013-04-20'},
{id: 2, content: item2, start: '2013-04-14'},
{id: 3, content: item3, start: '2013-04-18'},
{id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: item5, start: '2013-04-25'},
{id: 6, content: item6, start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
// create data and a Timeline
var container = document.getElementById('visualization');
var items = [
{id: 1, content: item1, start: '2013-04-20'},
{id: 2, content: item2, start: '2013-04-14'},
{id: 3, content: item3, start: '2013-04-18'},
{id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: item5, start: '2013-04-25'},
{id: 6, content: item6, start: '2013-04-27'},
{id: 7, content: item7, start: '2013-04-21'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 51
- 50
examples/timeline/05_groups.html View File

@ -1,71 +1,72 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Group example</title>
<title>Timeline | Group example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../vis.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<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.
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>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
groupsOrder: 'content'
};
// create visualization
var container = document.getElementById('visualization');
var options = {
groupOrder: 'content'
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>

+ 8
- 8
examples/timeline/index.html View File

@ -2,21 +2,21 @@
<html>
<head>
<title>vis.js | timeline examples</title>
<title>vis.js | timeline examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div id="container">
<h1>vis.js timeline examples</h1>
<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>
<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>

+ 5
- 3
examples/timeline/requirejs/requirejs_example.html View File

@ -1,11 +1,13 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline requirejs demo</title>
<title>Timeline requirejs demo</title>
<script data-main="scripts/main" src="scripts/require.js"></script>
<script data-main="scripts/main" src="scripts/require.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<div id="visualization"></div>
</body>
</html>

+ 14
- 14
examples/timeline/requirejs/scripts/main.js View File

@ -1,19 +1,19 @@
require.config({
paths: {
vis: '../../../../vis'
}
paths: {
vis: '../../../../dist/vis'
}
});
require(['vis'], function (vis) {
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
});

+ 23
- 40
index.html View File

@ -72,26 +72,8 @@ bower install vis
<h3>download</h3>
<table class="download">
<tr>
<td>
<a href="vis.js" target="_blank">Development
(version <span class="version">0.2.0</span>)</a>
</td>
<td>
<span id="development-size">441 kB</span>, uncompressed with comments
</td>
</tr>
<tr>
<td>
<a href="vis.min.js" target="_blank">Production
(version <span class="version">0.2.0</span>)</a>
</td>
<td>
<span id="production-size">39 kB</span>, minified and gzipped
</td>
</tr>
</table>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">0.3.0</span>)
<h2 id="example">Example</h2>
@ -104,30 +86,31 @@ bower install vis
<pre class="prettyprint lang-html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline | Basic demo&lt;/title&gt;
&lt;script src="http://visjs.org/vis.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;title&gt;Timeline | Basic demo&lt;/title&gt;
&lt;script src="http://visjs.org/dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mytimeline"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var container = document.getElementById('mytimeline');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
var container = document.getElementById('mytimeline');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
@ -304,7 +287,7 @@ The source code of the examples can be found in the
<h2 id="license">License</h2>
<p>
Copyright (C) 2010-2013 Almende B.V.
Copyright (C) 2010-2014 Almende B.V.
</p>
<p>

+ 0
- 0
package.js View File


+ 17
- 61
updateversion.js View File

@ -1,48 +1,14 @@
// Update the version numbers and library sizes in index.md
// Update the version numbers and library sizes in index.html
var fs = require('fs'),
zlib = require('zlib');
var VIS = 'vis.js',
VIS_MIN = 'vis.min.js',
var VIS_ZIP = './dist/vis.js',
INDEX = 'index.html';
// get development size
function developmentSize(callback) {
fs.readFile(VIS, function (err, data) {
if (!err) {
var size = Math.round(data.length / 1024) + ' kB';
callback(null, size);
}
else {
callback(err);
}
});
}
// get (gzipped) production size
function productionSize(callback) {
fs.readFile(VIS_MIN, function (err, data) {
if (!err) {
zlib.gzip(data, function (err, data) {
if (!err) {
var size = Math.round(data.length / 1024) + ' kB';
callback(null, size)
}
else {
callback(err);
}
});
}
else {
callback(err);
}
});
}
// get version
// read version from dist/vis.js
function version(callback) {
fs.readFile(VIS_MIN, function (err, data) {
fs.readFile(VIS_ZIP, function (err, data) {
if (!err) {
var match = /@version\s*([\w\.-]*)/i.exec(data);
var version = undefined;
@ -58,15 +24,10 @@ function version(callback) {
}
// update version and library sizes in index.md
function updateVersion(developmentSize, productionSize, version, callback) {
function updateVersion(version, callback) {
fs.readFile(INDEX, function (err, data) {
if (!err) {
data = String(data);
data = data.replace(/<span id="development-size">([\w\s]*)<\/span>/g,
'<span id="development-size">' + developmentSize + '</span>');
data = data.replace(/<span id="production-size">([\w\s]*)<\/span>/g,
'<span id="production-size">' + productionSize + '</span>');
data = data.replace(/<span class="version">([\w\.-]*)<\/span>/g,
'<span class="version">' + version + '</span>');
@ -79,24 +40,19 @@ function updateVersion(developmentSize, productionSize, version, callback) {
});
}
developmentSize(function (err, devSize) {
console.log('development size: ' + devSize);
productionSize(function (err, prodSize) {
console.log('production size: ' + prodSize);
version(function (err, version) {
console.log('version: ' + version);
if (devSize && prodSize && version) {
updateVersion(devSize, prodSize, version, function (err, res) {
if (err) {
console.log(err);
}
else {
console.log('done');
}
});
version(function (err, version) {
console.log('version: ' + version);
if (version) {
updateVersion(version, function (err, res) {
if (err) {
console.log(err);
}
else {
console.log('done');
}
});
});
});
}
else {
}
});

+ 0
- 14667
vis.js
File diff suppressed because it is too large
View File


+ 0
- 29
vis.min.js
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save