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