@ -0,0 +1,63 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset='utf-8' /> | |||
<meta name="title" content="vis.js"> | |||
<meta name="description" content="vis.js is a dynamic, browser-based visualization library" /> | |||
<meta name="keywords" content="vis, visualization, javascript, browser based, web based, chart, linechart, timeline, graph, network, browser" /> | |||
<meta name="author" content="Almende B.V."> | |||
<link rel="stylesheet" type="text/css" href="css/style.css"> | |||
<title>vis.js | a dynamic, browser-based visualization library</title> | |||
</head> | |||
<body> | |||
<div id="container"> | |||
<div id="menu"> | |||
<div id="menu-inner"> | |||
<a href="http://visjs.org/"><img src="img/logo/vis128.png" alt="logo"></a> | |||
<br> | |||
<!-- TODO: menu | |||
<div class="nav"> | |||
<ul> | |||
<li> | |||
Vis | |||
<ul> | |||
<li><a class="nav" href="index.html">Overview</a></li> | |||
<li><a class="nav" href="downloads.html">Downloads</a></li> | |||
</ul> | |||
</li> | |||
<li> | |||
Components | |||
<ul> | |||
<li><a class="nav" href="graph.html">Graph</a></li> | |||
<li><a class="nav" href="graph3d.html">Graph3D</a></li> | |||
<li><a class="nav" href="network.html">Network</a></li> | |||
<li><a class="nav" href="timeline.html">Timeline</a></li> | |||
<li><a class="nav" href="treegrid.html">TreeGrid</a></li> | |||
</ul> | |||
</li> | |||
</ul> | |||
</div> | |||
--> | |||
</div> | |||
</div> | |||
<div id="contents"> | |||
{{ content }} | |||
</div> | |||
</div> | |||
<a id="forkme" href="https://github.com/almende/vis/" target="_blank"> | |||
<img src="img/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" > | |||
</a> | |||
</body> | |||
</html> |
@ -1,86 +0,0 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset='utf-8' /> | |||
<meta name="title" content="vis.js"> | |||
<meta name="description" content="vis.js is a dynamic, browser-based visualization library" /> | |||
<meta name="keywords" content="vis, visualization, javascript, browser based, web based, chart, linechart, timeline, graph, network, browser" /> | |||
<meta name="author" content="Almende B.V."> | |||
<link rel="stylesheet" type="text/css" href="css/style.css"> | |||
<title>vis.js | dynamic, browser-based visualization library</title> | |||
</head> | |||
<body> | |||
<div id="container"> | |||
<div id="menu"> | |||
<div id="menu-inner"> | |||
<a href="http://visjs.org/"><img src="img/logo/vis128.png" alt="logo"></a> | |||
<br> | |||
<!-- TODO: menu | |||
<div class="nav"> | |||
<ul> | |||
<li> | |||
Vis | |||
<ul> | |||
<li><a class="nav" href="index.html">Overview</a></li> | |||
<li><a class="nav" href="downloads.html">Downloads</a></li> | |||
</ul> | |||
</li> | |||
<li> | |||
Components | |||
<ul> | |||
<li><a class="nav" href="graph.html">Graph</a></li> | |||
<li><a class="nav" href="graph3d.html">Graph3D</a></li> | |||
<li><a class="nav" href="network.html">Network</a></li> | |||
<li><a class="nav" href="timeline.html">Timeline</a></li> | |||
<li><a class="nav" href="treegrid.html">TreeGrid</a></li> | |||
</ul> | |||
</li> | |||
</ul> | |||
</div> | |||
--> | |||
</div> | |||
</div> | |||
<div id="contents"> | |||
<h1>vis.js</h1> | |||
<p> | |||
Vis.js is a dynamic, browser based visualization library. | |||
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 the components Timeline, LineChart, | |||
LineChart3d, Graph, and TreeGrid. | |||
</p> | |||
<p> | |||
Vis.js Library is part of <a href="http://chap.almende.com" target="_blank">CHAP</a>, | |||
the Common Hybrid Agent Platform, developed by <a href="http://almende.com" target="_blank">Almende B.V</a>. | |||
It is the successor of the <a href="https://github.com/almende/chap-links-library" target="_blank">CHAP Links Library</a>. | |||
</p> | |||
<p> | |||
The source code of vis.js is available on github: | |||
<a href="https://github.com/almende/vis" target="_blank">https://github.com/almende/vis</a> | |||
</p> | |||
<p style="font-style: italic;"> | |||
Coming soon... | |||
</p> | |||
</div> | |||
</div> | |||
<a id="forkme" href="https://github.com/almende/vis/" target="_blank"> | |||
<img src="img/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" > | |||
</a> | |||
</body> | |||
</html> |
@ -0,0 +1,159 @@ | |||
--- | |||
layout: default | |||
title: vis.js | |||
--- | |||
# vis.js | |||
Vis.js is a dynamic, browser based visualization library. | |||
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), | |||
the Common Hybrid Agent Platform, developed by [Almende B.V](http://almende.com). | |||
## Install | |||
Install via npm: | |||
npm install vis | |||
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 file of vis in your webpage: | |||
```html | |||
<!DOCTYPE HTML> | |||
<html> | |||
<head> | |||
<script src="components/vis/vis.js"></script> | |||
</head> | |||
<body> | |||
<script type="text/javascript"> | |||
// ... load a visualization | |||
</script> | |||
</body> | |||
</html> | |||
``` | |||
or load vis.js using require.js: | |||
```js | |||
require.config({ | |||
paths: { | |||
vis: 'path/to/vis', | |||
} | |||
}); | |||
require(['vis'], function (math) { | |||
// ... load a visualization | |||
}); | |||
``` | |||
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 directory](https://github.com/almende/vis/tree/master/examples) | |||
of the project. | |||
```html | |||
<!DOCTYPE HTML> | |||
<html> | |||
<head> | |||
<title>Timeline basic demo</title> | |||
<script src="components/vis/vis.js"></script> | |||
<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 vis.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. | |||
The build script uses [Browserify](http://browserify.org/) to | |||
bundle the source code into a library, | |||
and uses [UglifyJS](http://lisperator.net/uglifyjs/) to minify the code. | |||
The source code uses the module style of node (require and module.exports) to | |||
organize dependencies. | |||
To install all dependencies and build the library, run `npm install` in the | |||
root of the project. | |||
cd vis | |||
npm install | |||
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: | |||
jake | |||
## License | |||
Copyright (C) 2010-2013 Almende B.V. | |||
Licensed under the Apache License, Version 2.0 (the "License"); | |||
you may not use this file except in compliance with the License. | |||
You may obtain a copy of the License at | |||
http://www.apache.org/licenses/LICENSE-2.0 | |||
Unless required by applicable law or agreed to in writing, software | |||
distributed under the License is distributed on an "AS IS" BASIS, | |||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |||
See the License for the specific language governing permissions and | |||
limitations under the License. | |||