vis.js
a visual interaction system

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 and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d.

The vis.js library is developed by Almende B.V, as part of CHAP. Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support).

This site contains documentation, downloads and live examples of vis.js. The sourcecode of vis.js is available at Github. For questions, issues, and suggestions please use the issues section of the Github project.

Install

npm

npm install vis

bower

bower install vis

download

Click here to download vis.js (version 3.6.4)

Example

A basic example demonstrating how to use the vis.js timeline is shown below. See the gallery below for more examples. 

<!doctype html>
<html>
<head>
  <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="http://visjs.org/dist/vis.js"></script>
</head>
<body>
  <div id="mytimeline"></div>

  <script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('mytimeline');

    // Create a DataSet with data (enables 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>
This gallery gives an idea of the features and possibilities of the library. The source code of the examples can be found in the examples directory.

Timeline

The timeline from vis.js displays different types of data on a timeline.

basic usage
interactive
performance
html data
groups
event listeners
custom time bar
edit items
order groups
limit move and zoom
points
custom styling
past and future
group performance
item class names
navigation menu
data serialization
range overflow
localization
click to use
set selection
window adjustment
data attributes
all data attributes
background areas
external data
templates
hiding times
subgroups
31 background areas with groups

Network

The Network visualization visualizes graphs and networks with customizable styles.

basic usage
random nodes
images
shapes
social network
groups
selections
mobile friendly
sizing
multiline text
custom style
scalable images
dashed lines
dot language
playground
dynamic data
network info
fully random nodes clustering
scale free graph clustering
navigation
data manipulation
les miserables
hierarchical layout
hierarchical layout userdefined
physics configuration
static smooth curves
world cup network
world cup network performance
neighborhood highlight
importing from gephi
localization
hierarchical layout methods
animation
graphviz gallery

Graph2d

The Graph2d visualizes bars and lines in time.

basic
bars
groups
right axis
both axis
interpolation
scrolling and sorting
performance
external legend
bars side by side
bars side by side groups
custom range
localization
toggle groups
streaming data
axis titles
dynamic styling

Graph3d

The Graph3d from vis.js visualizes three and four dimensional data.

basis
camera
filter
animate
line
moving dots
dot cloud colors
dot cloud size
mobile
styles
tooltips
playground

Docs

Documentation is available here: Documentation

License

Copyright 2010-2014 Almende B.V.

Vis.js is dual licensed under both

and

Vis.js may be distributed under either license.

Fork me on GitHub