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

Added documentation for the Timeline

css_transitions
josdejong 11 years ago
parent
1ecb550d59
commit
54696f86ce
25 changed files with 185 additions and 104 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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


Write Preview
Loading…
Cancel
Save