vis.js is a dynamic, browser-based visualization library
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.8 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="js/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</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">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
// ... load a visualization
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</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">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// 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);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</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>