|
|
- <!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>
-
- <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="graph.html"><b>Graph</b></a>.
- Display a graph or network with nodes and edges.
- </li>
- <li>
- <a href="timeline.html"><b>Timeline</b></a>.
- Display different types of data on a timeline. The timeline and the
- items on the timeline can be interactively moved, zoomed, and
- manipulated.
- </li>
- </ul>
-
- <div style="text-align: center;">
- <a href="img/vis_overview.png" target="_blank">
- <img src="img/vis_overview.png" style="width: 250px; "/><br>
- (click for a larger view)
- </a>
- </div>
-
-
- <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">
- 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>
- </pre>
-
-
- <h2 id="license">License</h2>
-
- <p>
- Copyright (C) 2010-2014 Almende B.V.
- </p>
-
- <p>
- 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
- </p>
-
- <p>
- <a href="http://www.apache.org/licenses/LICENSE-2.0"
- target="_blank">http://www.apache.org/licenses/LICENSE-2.0</a>
- </p>
-
- <p>
- 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.
- </p>
-
- </div>
- </body>
- </html>
|