Browse Source

Added documentation for the Timeline

css_transitions
josdejong 11 years ago
parent
commit
54696f86ce
25 changed files with 185 additions and 104 deletions
  1. +1
    -0
      HISTORY.md
  2. +82
    -0
      docs/css/prettify.css
  3. +1
    -1
      docs/css/style.css
  4. +91
    -95
      docs/graph.html
  5. BIN
      docs/img/graph.png
  6. BIN
      docs/img/graph120x60.png
  7. +0
    -0
      docs/lib/prettify/lang-apollo.js
  8. +0
    -0
      docs/lib/prettify/lang-css.js
  9. +0
    -0
      docs/lib/prettify/lang-hs.js
  10. +0
    -0
      docs/lib/prettify/lang-lisp.js
  11. +0
    -0
      docs/lib/prettify/lang-lua.js
  12. +0
    -0
      docs/lib/prettify/lang-ml.js
  13. +0
    -0
      docs/lib/prettify/lang-proto.js
  14. +0
    -0
      docs/lib/prettify/lang-scala.js
  15. +0
    -0
      docs/lib/prettify/lang-sql.js
  16. +0
    -0
      docs/lib/prettify/lang-vb.js
  17. +0
    -0
      docs/lib/prettify/lang-vhdl.js
  18. +0
    -0
      docs/lib/prettify/lang-wiki.js
  19. +0
    -0
      docs/lib/prettify/lang-yaml.js
  20. +1
    -0
      docs/lib/prettify/prettify.css
  21. +0
    -0
      docs/lib/prettify/prettify.js
  22. +2
    -1
      examples/timeline/01_basic.html
  23. +2
    -2
      src/timeline/Timeline.js
  24. +2
    -2
      vis.js
  25. +3
    -3
      vis.min.js

+ 1
- 0
HISTORY.md View File

@ -5,6 +5,7 @@ http://visjs.org
## version 0.0.9 ## version 0.0.9
- First working version of the Graph imported from the old library. - First working version of the Graph imported from the old library.
- Documentation added for both Timeline and Graph.
## 2013-05-03, version 0.0.8 ## 2013-05-03, version 0.0.8

+ 82
- 0
docs/css/prettify.css View File

@ -0,0 +1,82 @@
.com {
color: gray;
}
.lit {
color: red;
}
.pun {
color: gray;
}
.pln {
color: #1C1C1C;
}
pre.prettyprint {
border:1px solid lightgray;
padding:2px;
}
ol.linenums {
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;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
background:#eee;
}
.str,.atv {
color: green;
}
.kwd,.tag {
color:#2B7CE9;
}
.typ,.atn,.dec {
color: orange;
}
@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;
}
}

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

@ -15,7 +15,7 @@ body, td, th {
#container { #container {
margin: 0 auto; margin: 0 auto;
padding-bottom: 50px; padding-bottom: 50px;
width: 900px;
width: 700px;
} }
h1 { h1 {

+ 91
- 95
docs/graph.html View File

@ -2,17 +2,13 @@
<html> <html>
<head> <head>
<title>Graph documentation</title>
<title>vis.js | graph documentation</title>
<link rel='stylesheet' href='css/style.css' type='text/css' /> <link rel='stylesheet' href='css/style.css' type='text/css' />
<link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify/prettify.js"></script>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<style>
pre.prettyprint {
border-color: lightgray;
}
</style>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head> </head>
<body onload="prettyPrint();"> <body onload="prettyPrint();">
@ -73,50 +69,50 @@
</p> </p>
<pre class="prettyprint lang-html">&lt;!doctype html&gt; <pre class="prettyprint lang-html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Graph | Basic usage&lt;/title&gt;
&lt;script type="text/javascript" src="../../vis.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// create an array with nodes
var nodes = [
{id: 1, text: 'Node 1'},
{id: 2, text: 'Node 2'},
{id: 3, text: 'Node 3'},
{id: 4, text: 'Node 4'},
{id: 5, text: '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 = {
width: '400px',
height: '400px'
};
var graph = new vis.Graph(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Graph | Basic usage&lt;/title&gt;
&lt;script type="text/javascript" src="../../vis.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// create an array with nodes
var nodes = [
{id: 1, text: 'Node 1'},
{id: 2, text: 'Node 2'},
{id: 3, text: 'Node 3'},
{id: 4, text: 'Node 4'},
{id: 5, text: '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 = {
width: '400px',
height: '400px'
};
var graph = new vis.Graph(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre> </pre>
@ -131,7 +127,7 @@
</pre> </pre>
The class name of the Graph is <code>vis.Graph</code>.
The constructor of the Graph is <code>vis.Graph</code>.
<pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre> <pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
The constructor accepts three parameters: The constructor accepts three parameters:
@ -174,10 +170,10 @@ The constructor accepts three parameters:
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
var nodes = [ var nodes = [
{ {
'id': 1,
'text': 'Node 1'
'id': 1,
'text': 'Node 1'
}, },
// ... more data
// ... more nodes
]; ];
</pre> </pre>
@ -363,12 +359,12 @@ var nodes = [
A JavaScript Array with edges is constructed as: A JavaScript Array with edges is constructed as:
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
var edges= [
var edges = [
{ {
'from': 1,
'to': 3
'from': 1,
'to': 3
}, },
// ... more data
// ... more edges
]; ];
</pre> </pre>
@ -424,7 +420,7 @@ var edges= [
<td>String</td> <td>String</td>
<td>"black"</td> <td>"black"</td>
<td>Font color for the text label of the link. <td>Font color for the text label of the link.
Only applicable when "text" is defined.</td>
Only applicable when "text" is defined.</td>
</tr> </tr>
<tr> <tr>
@ -525,20 +521,20 @@ var edges= [
<table> <table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>vis.util.parseDOT(data)</td>
<td>Object</td>
<td>
Parse a string containing data in DOT language into a JSON object.
The returned object contains two arrays, <code>nodes</code>,
<code>edges</code>, containing the parsed nodes and edges.
</td>
</tr>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>vis.util.parseDOT(data)</td>
<td>Object</td>
<td>
Parse a string containing data in DOT language into a JSON object.
The returned object contains two arrays, <code>nodes</code>,
<code>edges</code>, containing the parsed nodes and edges.
</td>
</tr>
<tr> <tr>
<td>vis.util.DOTToGraph(data)</td> <td>vis.util.DOTToGraph(data)</td>
<td>Object</td> <td>Object</td>
@ -553,7 +549,7 @@ var edges= [
</table> </table>
<p> <p>
Example usage:
Example usage:
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
@ -831,25 +827,25 @@ var options = {
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
var options = { var options = {
// ...
'groups': {
'mygroup': {
'style': 'circle',
'borderColor': 'black',
'backgroundColor': 'white',
'fontColor': 'red',
'fontSize': 18,
'highlightColor': 'yellow'
// ...
groups: {
mygroup: {
style: 'circle',
borderColor: 'black',
backgroundColor: 'white',
fontColor: 'red',
fontSize: 18,
highlightColor: 'yellow'
}
// add more groups here
} }
// add more groups here
}
}; };
var nodes = [ var nodes = [
{id: 1, text: 'Node 1'}, // will get the default style {id: 1, text: 'Node 1'}, // will get the default style
{id: 2, text: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup' {id: 2, text: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
// ... more data
// ... more nodes
]; ];
</pre> </pre>
@ -1005,14 +1001,14 @@ var nodes = [
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
function onselect() { function onselect() {
var sel = graph.getSelection();
var sel = graph.getSelection();
var info = 'selected row(s): ';
for (var i = 0; i &lt; sel.length; i++) {
info += sel[i].row + ' ';
}
var info = 'selected row(s): ';
for (var i = 0; i &lt; sel.length; i++) {
info += sel[i].row + ' ';
}
alert(info);
alert(info);
} }
vis.events.addListener(graph, 'select', onselect); vis.events.addListener(graph, 'select', onselect);

BIN
docs/img/graph.png View File

Before After
Width: 564  |  Height: 328  |  Size: 23 KiB

BIN
docs/img/graph120x60.png View File

Before After
Width: 120  |  Height: 60  |  Size: 4.6 KiB

docs/prettify/lang-apollo.js → docs/lib/prettify/lang-apollo.js View File


docs/prettify/lang-css.js → docs/lib/prettify/lang-css.js View File


docs/prettify/lang-hs.js → docs/lib/prettify/lang-hs.js View File


docs/prettify/lang-lisp.js → docs/lib/prettify/lang-lisp.js View File


docs/prettify/lang-lua.js → docs/lib/prettify/lang-lua.js View File


docs/prettify/lang-ml.js → docs/lib/prettify/lang-ml.js View File


docs/prettify/lang-proto.js → docs/lib/prettify/lang-proto.js View File


docs/prettify/lang-scala.js → docs/lib/prettify/lang-scala.js View File


docs/prettify/lang-sql.js → docs/lib/prettify/lang-sql.js View File


docs/prettify/lang-vb.js → docs/lib/prettify/lang-vb.js View File


docs/prettify/lang-vhdl.js → docs/lib/prettify/lang-vhdl.js View File


docs/prettify/lang-wiki.js → docs/lib/prettify/lang-wiki.js View File


docs/prettify/lang-yaml.js → docs/lib/prettify/lang-yaml.js View File


+ 1
- 0
docs/lib/prettify/prettify.css View File

@ -0,0 +1 @@
.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{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}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}

docs/prettify/prettify.js → docs/lib/prettify/prettify.js View File


+ 2
- 1
examples/timeline/01_basic.html View File

@ -24,7 +24,8 @@
{id: 5, content: 'item 5', start: '2013-04-25'}, {id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'} {id: 6, content: 'item 6', start: '2013-04-27'}
]; ];
var options = {};
var options = {
};
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);
</script> </script>
</body> </body>

+ 2
- 2
src/timeline/Timeline.js View File

@ -13,8 +13,8 @@ function Timeline (container, items, options) {
max: null, max: null,
zoomMin: 10, // milliseconds zoomMin: 10, // milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
moveable: true,
zoomable: true,
// moveable: true, // TODO: option moveable
// zoomable: true, // TODO: option zoomable
showMinorLabels: true, showMinorLabels: true,
showMajorLabels: true, showMajorLabels: true,
autoResize: false autoResize: false

+ 2
- 2
vis.js View File

@ -6561,8 +6561,8 @@ function Timeline (container, items, options) {
max: null, max: null,
zoomMin: 10, // milliseconds zoomMin: 10, // milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
moveable: true,
zoomable: true,
// moveable: true, // TODO: option moveable
// zoomable: true, // TODO: option zoomable
showMinorLabels: true, showMinorLabels: true,
showMajorLabels: true, showMajorLabels: true,
autoResize: false autoResize: false

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


Loading…
Cancel
Save