You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
225 lines
5.5 KiB
225 lines
5.5 KiB
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>vis.js | documentation</title>
|
|
|
|
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
|
|
<link href='css/style.css' type='text/css' rel='stylesheet'>
|
|
|
|
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
|
|
</head>
|
|
|
|
<body onload="prettyPrint();">
|
|
<div id="container">
|
|
|
|
<h1>vis.js documentation</h1>
|
|
|
|
<p>
|
|
Vis.js is a dynamic, browser based visualization library.
|
|
The library is designed to be easy to use, handle large amounts
|
|
of dynamic data, and enable manipulation of the data.
|
|
</p>
|
|
|
|
<p>
|
|
The library is developed by
|
|
<a href="http://almende.com" target="_blank">Almende B.V.</a>.
|
|
Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile
|
|
browsers (with full touch support).
|
|
</p>
|
|
|
|
<h2 id="Components">Components</h2>
|
|
|
|
<p>
|
|
Vis.js contains of the following components:
|
|
</p>
|
|
|
|
<div style="text-align: center; float: right; padding-left: 30px;">
|
|
<a href="img/vis_overview.png" target="_blank">
|
|
<img src="img/vis_overview.png" style="width: 350px; "/><br>
|
|
(click for a larger view)
|
|
</a>
|
|
</div>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="dataset.html"><b>DataSet</b></a>.
|
|
A flexible key/value based data set.
|
|
Add, update, and remove items. Subscribe on changes in the data set.
|
|
A DataSet can filter and order items, and convert fields of items.
|
|
</li>
|
|
<li>
|
|
<a href="dataview.html"><b>DataView</b></a>.
|
|
A filtered and/or formatted view on a DataSet.
|
|
</li>
|
|
<li>
|
|
<a href="network.html"><b>Network</b></a>.
|
|
Display a network (force directed graph) with nodes and edges (previously called Graph).
|
|
</li>
|
|
<li>
|
|
<a href="graph2d.html"><b>Graph2d</b></a>.
|
|
Plot data on a timeline with lines or barcharts.
|
|
</li>
|
|
<li>
|
|
<a href="graph3d.html"><b>Graph3d</b></a>.
|
|
Display data in a three dimensional graph.
|
|
</li>
|
|
<li>
|
|
<a href="timeline.html"><b>Timeline</b></a>.
|
|
Display different types of data on a timeline.
|
|
</li>
|
|
</ul>
|
|
|
|
<h2 id="Install">Install</h2>
|
|
|
|
<h3>npm</h3>
|
|
|
|
<pre class="prettyprint">
|
|
npm install vis
|
|
</pre>
|
|
|
|
<h3>bower</h3>
|
|
|
|
<pre class="prettyprint">
|
|
bower install vis
|
|
</pre>
|
|
|
|
<h3>download</h3>
|
|
Download the library from the website:
|
|
<a href="http://visjs.org" target="_blank">http://visjs.org</a>.
|
|
|
|
<h2 id="Load">Load</h2>
|
|
|
|
<p>
|
|
To load vis.js, include the javascript and css files of vis in your web page:
|
|
</p>
|
|
|
|
<pre class="prettyprint lang-html"><!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<script src="components/vis/vis.js"></script>
|
|
<link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
// ... load a visualization
|
|
</script>
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
|
|
<p>
|
|
or load vis.js using require.js:
|
|
</p>
|
|
|
|
<pre class="prettyprint lang-js">
|
|
require.config({
|
|
paths: {
|
|
vis: 'path/to/vis',
|
|
}
|
|
});
|
|
|
|
require(['vis'], function (math) {
|
|
// ... load a visualization
|
|
});
|
|
</pre>
|
|
|
|
<p>
|
|
A timeline can be instantiated as follows. Other components can be
|
|
created in a similar way.
|
|
</p>
|
|
|
|
<pre class="prettyprint lang-js">
|
|
var timeline = new vis.Timeline(container, data, options);
|
|
</pre>
|
|
|
|
<p>
|
|
Where <code>container</code> is an HTML element, <code>data</code> is
|
|
an Array with data or a DataSet, and <code>options</code> is an optional
|
|
object with configuration options for the component.
|
|
</p>
|
|
|
|
<h2 id="Use">Use</h2>
|
|
|
|
<p>
|
|
A basic example on using a Timeline is shown below. More examples can be
|
|
found in the <a href="https://github.com/almende/vis/tree/master/examples"
|
|
target="_blank">examples directory</a> of the project.
|
|
</p>
|
|
|
|
<pre class="prettyprint lang-html">
|
|
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Timeline basic demo</title>
|
|
|
|
<script src="components/vis/vis.js"></script>
|
|
<link href="components/vis/vis.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">
|
|
// DOM element where the Timeline will be attached
|
|
var container = document.getElementById('visualization');
|
|
|
|
// Create a DataSet (allows two way data-binding)
|
|
var data = new vis.DataSet([
|
|
{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'}
|
|
]);
|
|
|
|
// Configuration for the Timeline
|
|
var options = {};
|
|
|
|
// Create a Timeline
|
|
var timeline = new vis.Timeline(container, data, options);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
|
|
|
|
<h2 id="license">License</h2>
|
|
|
|
<p>
|
|
Copyright 2010-2014 Almende B.V.
|
|
</p>
|
|
|
|
<p>
|
|
Vis.js is dual licensed under both
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
The Apache 2.0 License<br>
|
|
<a href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
and
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
The MIT License<br>
|
|
<a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
Vis.js may be distributed under either license.
|
|
</p>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|