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

Readme updated, example added

css_transitions
josdejong 11 years ago
parent
45afd42252
commit
fdd92c01e9
11 changed files with 164 additions and 9 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      Jakefile.js
  2. +93
    -1
      README.md
  3. +31
    -0
      bin/timeline/examples/01_basic.html
  4. +0
    -0
      bin/timeline/examples/02_dataset.html
  5. +1
    -1
      bin/timeline/timeline.js
  6. +1
    -1
      bin/timeline/timeline.min.js
  7. +4
    -3
      package.json
  8. +31
    -0
      src/visualization/timeline/examples/01_basic.html
  9. +0
    -0
      src/visualization/timeline/examples/02_dataset.html
  10. +0
    -0
      src/visualization/timeline/timeline.js
  11. +1
    -1
      test/timeline.html

+ 2
- 2
Jakefile.js View File

@ -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');
});

+ 93
- 1
README.md View File

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

+ 31
- 0
bin/timeline/examples/01_basic.html View File

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

bin/timeline/examples/01_basics.html → bin/timeline/examples/02_dataset.html View File


+ 1
- 1
bin/timeline/timeline.js View File

@ -4,7 +4,7 @@
*
* A dynamic, browser-based visualization library.
*
* @version 3.0.0-SNAPSHOT
* @version 0.0.1
* @date 2013-04-16
*
* @license

+ 1
- 1
bin/timeline/timeline.min.js View File

@ -4,7 +4,7 @@
*
* A dynamic, browser-based visualization library.
*
* @version 3.0.0-SNAPSHOT
* @version 0.0.1
* @date 2013-04-16
*
* @license

+ 4
- 3
package.json View File

@ -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": {},

+ 31
- 0
src/visualization/timeline/examples/01_basic.html View File

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

src/examples/timeline/01_basics.html → src/visualization/timeline/examples/02_dataset.html View File


src/visualization/timeline.js → src/visualization/timeline/timeline.js View File


+ 1
- 1
test/timeline.html View File

@ -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" />

Write Preview
Loading…
Cancel
Save