Readme updated, example added

11 years ago · fdd92c01e9
--- a/Jakefile.js
+++ b/Jakefile.js
@ -46,7 +46,7 @@ task('timeline', function () {
            './src/component/itemset.js',
            './src/component/item/*.js',
            './src/visualization/timeline.js',
            './src/visualization/timeline/timeline.js',
            './lib/moment.js'
        ],
@ -84,7 +84,7 @@ task('timeline', function () {
    });
    // copy examples
    jake.cpR('./src/examples/timeline', './bin/timeline/examples/');
    jake.cpR('./src/visualization/timeline/examples', './bin/timeline/examples/');
    console.log('created timeline library');
 });
--- a/README.md
+++ b/README.md
@ -6,5 +6,97 @@ The library is designed to be easy to use, to handle large amounts
 of dynamic data, and to enable manipulation of the data.
 The library consists of Timeline, LineChart, LineChart3d, Graph, and Treegrid.
 vis.js Library is part of [CHAP](http://chap.almende.com),
 Vis.js Library is part of [CHAP](http://chap.almende.com),
 the Common Hybrid Agent Platform, developed by [Almende B.V](http://almende.com).
 # Install
 Install via bower:
    bower install vis
 Or download the library from the github project:
 [https://github.com/almende/vis.git](https://github.com/almende/vis.git).
 # Load
 To use a component, include the javascript and css file of the component
 in your webpage. For example for the Timeline:
 ```html
 <script src="../timeline.js"></script>
 <link href="../timeline.css" rel="stylesheet" type="text/css" />
 ```
 A timeline can be instantiated as:
 ```js
 var timeline = new Timeline(container, data, options);
 ```
 Where `container` is an HTML element, `data` is an Array with data or a DataSet,
 and `options` is an optional object with configuration options for the
 component.
 # Example
 A basic example on loading a Timeline is shown below. More examples can be
 found in the examples directories of each component.
 ```html
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline basic demo</title>
    <script src="../timeline.js"></script>
    <link href="../timeline.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>
 </head>
 <body>
 <div id="visualization"></div>
 <script type="text/javascript">
    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 Timeline(container, data, options);
 </script>
 </body>
 </html>
 ```
 # Build
 To build the library from source, clone the project from github
    git clone git://github.com/almende/vis.git
 The project uses [jake](https://github.com/mde/jake) as build tool.
 To be able to run jake from the command line, jake must be installed globally:
    sudo npm install -g jake
 Then, the project can be build by executing jake in the root of the project:
    cd vis
    jake
 This will build the library for each of the components. The built libraries can
 be found in the directory `bin`, and includes examples.
--- a/bin/timeline/examples/01_basic.html
+++ b/bin/timeline/examples/01_basic.html
@ -0,0 +1,31 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline basic demo</title>
    <script src="../timeline.js"></script>
    <link href="../timeline.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>
 </head>
 <body>
 <div id="visualization"></div>
 <script type="text/javascript">
    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 Timeline(container, data, options);
 </script>
 </body>
 </html>
--- a/bin/timeline/examples/02_dataset.html
+++ b/bin/timeline/examples/02_dataset.html
--- a/bin/timeline/timeline.js
+++ b/bin/timeline/timeline.js
@ -4,7 +4,7 @@
 *
 * A dynamic, browser-based visualization library.
 *
 * @version 3.0.0-SNAPSHOT
 * @version 0.0.1
 * @date    2013-04-16
 *
 * @license
--- a/bin/timeline/timeline.min.js
+++ b/bin/timeline/timeline.min.js
@ -4,7 +4,7 @@
 *
 * A dynamic, browser-based visualization library.
 *
 * @version 3.0.0-SNAPSHOT
 * @version 0.0.1
 * @date    2013-04-16
 *
 * @license
--- a/package.json
+++ b/package.json
@ -1,22 +1,23 @@
 {
    "name": "vis",
    "version": "3.0.0-SNAPSHOT",
    "version": "0.0.1",
    "description": "A dynamic, browser-based visualization library.",
    "homepage": "https://github.com/almende/vis",
    "homepage": "http://visjs.org/",
    "repository": {
        "type": "git",
        "url": "git://github.com/almende/vis.git"
    },
    "keywords": [
        "vis",
        "visualization",
        "web based",
        "browser based",
        "javascript",
        "chart",
        "linechart",
        "timeline",
        "graph",
        "network",
        "javascript",
        "browser"
    ],
    "dependencies": {},
--- a/src/visualization/timeline/examples/01_basic.html
+++ b/src/visualization/timeline/examples/01_basic.html
@ -0,0 +1,31 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline basic demo</title>
    <script src="../timeline.js"></script>
    <link href="../timeline.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>
 </head>
 <body>
 <div id="visualization"></div>
 <script type="text/javascript">
    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 Timeline(container, data, options);
 </script>
 </body>
 </html>
--- a/src/visualization/timeline/examples/02_dataset.html
+++ b/src/visualization/timeline/examples/02_dataset.html
--- a/src/visualization/timeline/timeline.js
+++ b/src/visualization/timeline/timeline.js
--- a/test/timeline.html
+++ b/test/timeline.html
@ -19,7 +19,7 @@
    <script src="../src/component/item/itembox.js"></script>
    <script src="../src/component/item/itemrange.js"></script>
    <script src="../src/component/item/itempoint.js"></script>
    <script src="../src/visualization/timeline.js"></script>
    <script src="../src/visualization/timeline/timeline.js"></script>
    <link href="../src/component/css/panel.css" rel="stylesheet" type="text/css" />
    <link href="../src/component/css/timeaxis.css" rel="stylesheet" type="text/css" />