Added documentation for the Timeline

11 years ago · 54696f86ce
--- a/HISTORY.md
+++ b/HISTORY.md
@ -5,6 +5,7 @@ http://visjs.org
 ## version 0.0.9

 - 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
--- a/docs/css/prettify.css
+++ b/docs/css/prettify.css
@ -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;
    }
 }
--- a/docs/css/style.css
+++ b/docs/css/style.css
@ -15,7 +15,7 @@ body, td, th {
 #container {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 900px;
    width: 700px;
 }

 h1 {
--- a/docs/graph.html
+++ b/docs/graph.html
@ -2,17 +2,13 @@
 <html>

 <head>
    <title>Graph documentation</title>
    <title>vis.js | graph documentation</title>
    <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>

 <body onload="prettyPrint();">
@ -73,50 +69,50 @@
 </p>

 <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>


@ -131,7 +127,7 @@
 </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>

 The constructor accepts three parameters:
@ -174,10 +170,10 @@ The constructor accepts three parameters:
 <pre class="prettyprint lang-js">
 var nodes = [
    {
      'id': 1,
      'text': 'Node 1'
        'id': 1,
        'text': 'Node 1'
    },
    // ... more data
    // ... more nodes
 ];
 </pre>

@ -363,12 +359,12 @@ var nodes = [
    A JavaScript Array with edges is constructed as:
 </p>
 <pre class="prettyprint lang-js">
 var edges= [
 var edges = [
    {
      'from': 1,
      'to': 3
        'from': 1,
        'to': 3
    },
    // ... more data
    // ... more edges
 ];
 </pre>

@ -424,7 +420,7 @@ var edges= [
        <td>String</td>
        <td>"black"</td>
        <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>
@ -525,20 +521,20 @@ var edges= [


 <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>
        <td>vis.util.DOTToGraph(data)</td>
        <td>Object</td>
@ -553,7 +549,7 @@ var edges= [
 </table>

 <p>
 Example usage:
    Example usage:
 </p>

 <pre class="prettyprint lang-js">
@ -831,25 +827,25 @@ var options = {

 <pre class="prettyprint lang-js">
 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 = [
    {id: 1, text: 'Node 1'},                    // will get the default style
    {id: 2, text: 'Node 2', group: 'mygroup'},  // will get the style from 'mygroup'
    // ... more data
    // ... more nodes
 ];
 </pre>

@ -1005,14 +1001,14 @@ var nodes = [

 <pre class="prettyprint lang-js">
 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);
--- a/docs/img/graph.png
+++ b/docs/img/graph.png
--- a/docs/img/graph120x60.png
+++ b/docs/img/graph120x60.png
--- a/docs/lib/prettify/lang-apollo.js
+++ b/docs/lib/prettify/lang-apollo.js
--- a/docs/lib/prettify/lang-css.js
+++ b/docs/lib/prettify/lang-css.js
--- a/docs/lib/prettify/lang-hs.js
+++ b/docs/lib/prettify/lang-hs.js
--- a/docs/lib/prettify/lang-lisp.js
+++ b/docs/lib/prettify/lang-lisp.js
--- a/docs/lib/prettify/lang-lua.js
+++ b/docs/lib/prettify/lang-lua.js
--- a/docs/lib/prettify/lang-ml.js
+++ b/docs/lib/prettify/lang-ml.js
--- a/docs/lib/prettify/lang-proto.js
+++ b/docs/lib/prettify/lang-proto.js
--- a/docs/lib/prettify/lang-scala.js
+++ b/docs/lib/prettify/lang-scala.js
--- a/docs/lib/prettify/lang-sql.js
+++ b/docs/lib/prettify/lang-sql.js
--- a/docs/lib/prettify/lang-vb.js
+++ b/docs/lib/prettify/lang-vb.js
--- a/docs/lib/prettify/lang-vhdl.js
+++ b/docs/lib/prettify/lang-vhdl.js
--- a/docs/lib/prettify/lang-wiki.js
+++ b/docs/lib/prettify/lang-wiki.js
--- a/docs/lib/prettify/lang-yaml.js
+++ b/docs/lib/prettify/lang-yaml.js
--- a/docs/lib/prettify/prettify.css
+++ b/docs/lib/prettify/prettify.css
@ -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}}
--- a/docs/lib/prettify/prettify.js
+++ b/docs/lib/prettify/prettify.js
--- a/examples/timeline/01_basic.html
+++ b/examples/timeline/01_basic.html
@ -24,7 +24,8 @@
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ];
    var options = {};
    var options = {
    };
    var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
--- a/src/timeline/Timeline.js
+++ b/src/timeline/Timeline.js
@ -13,8 +13,8 @@ function Timeline (container, items, options) {
        max: null,
        zoomMin: 10,     // 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,
        showMajorLabels: true,
        autoResize: false
--- a/vis.js
+++ b/vis.js
@ -6561,8 +6561,8 @@ function Timeline (container, items, options) {
        max: null,
        zoomMin: 10,     // 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,
        showMajorLabels: true,
        autoResize: false
--- a/vis.min.js
+++ b/vis.min.js