jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Created gallery

gh-pages
josdejong 11 years ago
parent
49a00ceb5a
commit
db7cf5f85b
32 changed files with 12942 additions and 370 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      .gitignore
  2. +0
    -0
      _config.yml
  3. +0
    -63
      _layouts/default.html
  4. +25
    -153
      css/style.css
  5. +207
    -0
      css/style.css.bak
  6. +4
    -0
      docs/css/prettify.css
  7. +4
    -2
      docs/css/style.css
  8. BIN
      img/gallery/graph/01_basic_usage.png
  9. BIN
      img/gallery/graph/02_random_nodes.png
  10. BIN
      img/gallery/graph/03_images.png
  11. BIN
      img/gallery/graph/04_shapes.png
  12. BIN
      img/gallery/graph/05_social_network.png
  13. BIN
      img/gallery/graph/06_groups.png
  14. BIN
      img/gallery/graph/07_selections.png
  15. BIN
      img/gallery/graph/08_mobile_friendly.png
  16. BIN
      img/gallery/graph/09_sizing.png
  17. BIN
      img/gallery/graph/10_multiline_text.png
  18. BIN
      img/gallery/graph/11_custom_style.png
  19. BIN
      img/gallery/graph/12_scalable_images.png
  20. BIN
      img/gallery/graph/13_dashed_lines.png
  21. BIN
      img/gallery/graph/14_dot_language.png
  22. BIN
      img/gallery/graph/15_dot_language_playground.png
  23. BIN
      img/gallery/graph/graphviz_gallery.png
  24. BIN
      img/gallery/timeline/01_basic.png
  25. BIN
      img/gallery/timeline/02_dataset.png
  26. BIN
      img/gallery/timeline/03_much_data.png
  27. BIN
      img/gallery/timeline/04_html_data.png
  28. BIN
      img/gallery/timeline/05_groups.png
  29. +294
    -0
      index.html
  30. +0
    -151
      index.md
  31. +12379
    -0
      vis.js
  32. +29
    -0
      vis.min.js

+ 0
- 1
.gitignore View File

@ -1,2 +1 @@
.idea .idea
_site

+ 0
- 0
_config.yml View File


+ 0
- 63
_layouts/default.html View File

@ -1,63 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="title" content="vis.js">
<meta name="description" content="vis.js is a dynamic, browser-based visualization library" />
<meta name="keywords" content="vis, visualization, javascript, browser based, web based, chart, linechart, timeline, graph, network, browser" />
<meta name="author" content="Almende B.V.">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>vis.js | a dynamic, browser-based visualization library</title>
</head>
<body>
<div id="container">
<div id="menu">
<div id="menu-inner">
<a href="http://visjs.org/"><img src="img/logo/vis128.png" alt="logo"></a>
<br>
<!-- TODO: menu
<div class="nav">
<ul>
<li>
Vis
<ul>
<li><a class="nav" href="index.html">Overview</a></li>
<li><a class="nav" href="downloads.html">Downloads</a></li>
</ul>
</li>
<li>
Components
<ul>
<li><a class="nav" href="graph.html">Graph</a></li>
<li><a class="nav" href="graph3d.html">Graph3D</a></li>
<li><a class="nav" href="network.html">Network</a></li>
<li><a class="nav" href="timeline.html">Timeline</a></li>
<li><a class="nav" href="treegrid.html">TreeGrid</a></li>
</ul>
</li>
</ul>
</div>
-->
</div>
</div>
<div id="contents">
{{ content }}
</div>
</div>
<a id="forkme" href="https://github.com/almende/vis/" target="_blank">
<img src="img/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" >
</a>
</body>
</html>

+ 25
- 153
css/style.css View File

@ -1,105 +1,20 @@
html, body {
font-family: arial;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
body {
overflow-y: scroll;
}
#container {
margin: 0 auto;
width: 900px;
/* TODO: cleanup
height: 100%;
*/
}
#menu { #menu {
width: 150px;
float: left;
text-align: right;
/* TODO: cleanup
height: 100%;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
*/
}
#menu-inner {
padding: 70px 20px 0px 0px;
}
#contents {
/* TODO: cleanup
margin-left: 150px;
*/
padding: 50px 25px;
width: 700px;
float: left;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
/*
ul.nav {
text-decoration: none;
text-transform: uppercase;
margin-bottom: 30px;
padding-left: 0px;
}
li.nav {
list-style: none;
position: absolute;
left: -150px;
top: 35px;
} }
ul li.nav {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 11pt;
color: #2B7CE9;
margin-top: 5px;
#forkme {
position: fixed;
top: 0;
right: 0;
border: 0;
} }
ul li ul li.nav {
text-decoration: none;
text-transform: none;
font-weight: normal;
font-size: 11pt;
color: #4D4D4D;
div.nav {
text-align: right;
} }
*/
div.nav ul { div.nav ul {
text-decoration: none; text-decoration: none;
@ -115,7 +30,7 @@ li.nav {
div.nav ul li { div.nav ul li {
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold;
font-weight: normal;
font-size: 11pt; font-size: 11pt;
color: #2B7CE9; color: #2B7CE9;
@ -141,67 +56,24 @@ a.nav:hover {
color: #2B7CE9; color: #2B7CE9;
} }
table.example {
border-collapse: collapse;
}
th.example {
font-weight: normal;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td.example {
border: 1px solid lightgray;
padding: 5px;
.gallery .thumb {
display: inline-block;
text-align: center;
margin-right: 10px;
margin-bottom: 20px;
} }
pre {
line-height: 1.5em;
font-size: 10pt;
overflow-x: auto;
background-color: #F5F5F5;
border: 1px solid lightgray;
padding: 5px;
.gallery .thumb img {
border: 1px solid white;
border-radius: 5px;
height: 90px;
margin: 0;
} }
pre.example {
background-color: transparent;
border: none;
padding: 0px;
margin: 0px;
.gallery .thumb a:hover img {
border-color: lightgray;
} }
div.lastupdate {
font-size: 75%;
margin-top: 40px;
border-top: 1px solid #a0c0f0;
color: #2B7CE9;
}
img {
border: none;
}
img.thumb {
border: 1px solid #a0c0f0;
width: 120px;
height: 60px;
}
img.thumb:hover {
border-color: #2E60A4;
}
#forkme {
position: fixed;
top: 0;
right: 0;
border: 0;
.gallery .thumb div {
margin: 0;
} }

+ 207
- 0
css/style.css.bak View File

@ -0,0 +1,207 @@
html, body {
font-family: arial;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
body {
overflow-y: scroll;
}
#container {
margin: 0 auto;
width: 900px;
/* TODO: cleanup
height: 100%;
*/
}
#menu {
width: 150px;
float: left;
text-align: right;
/* TODO: cleanup
height: 100%;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
*/
}
#menu-inner {
padding: 70px 20px 0px 0px;
}
#contents {
/* TODO: cleanup
margin-left: 150px;
*/
padding: 50px 25px;
width: 700px;
float: left;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
/*
ul.nav {
text-decoration: none;
text-transform: uppercase;
margin-bottom: 30px;
padding-left: 0px;
}
li.nav {
list-style: none;
}
ul li.nav {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 11pt;
color: #2B7CE9;
margin-top: 5px;
}
ul li ul li.nav {
text-decoration: none;
text-transform: none;
font-weight: normal;
font-size: 11pt;
color: #4D4D4D;
}
*/
div.nav ul {
text-decoration: none;
text-transform: uppercase;
margin-bottom: 30px;
padding-left: 0px;
}
li.nav {
}
div.nav ul li {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 11pt;
color: #2B7CE9;
list-style: none;
margin-top: 5px;
}
div.nav ul li ul li {
text-decoration: none;
text-transform: none;
font-weight: normal;
font-size: 11pt;
color: #4D4D4D;
list-style: none;
}
a.nav {
color: #4D4D4D;
}
a.nav:hover {
color: #2B7CE9;
}
table.example {
border-collapse: collapse;
}
th.example {
font-weight: normal;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td.example {
border: 1px solid lightgray;
padding: 5px;
}
pre {
line-height: 1.5em;
font-size: 10pt;
overflow-x: auto;
background-color: #F5F5F5;
border: 1px solid lightgray;
padding: 5px;
}
pre.example {
background-color: transparent;
border: none;
padding: 0px;
margin: 0px;
}
div.lastupdate {
font-size: 75%;
margin-top: 40px;
border-top: 1px solid #a0c0f0;
color: #2B7CE9;
}
img {
border: none;
}
img.thumb {
border: 1px solid #a0c0f0;
width: 120px;
height: 60px;
}
img.thumb:hover {
border-color: #2E60A4;
}
#forkme {
position: fixed;
top: 0;
right: 0;
border: 0;
}

+ 4
- 0
docs/css/prettify.css View File

@ -16,12 +16,16 @@
pre.prettyprint { pre.prettyprint {
border: 1px solid lightgray; border: 1px solid lightgray;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #fcfcfc; background-color: #fcfcfc;
padding: 5px; padding: 5px;
font-size: 10pt; font-size: 10pt;
line-height: 1.5em; line-height: 1.5em;
font-family: monospace; font-family: monospace;
overflow-x: auto;
width: 100%;
} }
ol.linenums { ol.linenums {

+ 4
- 2
docs/css/style.css View File

@ -13,9 +13,12 @@ body, td, th {
} }
#container { #container {
position: relative;
margin: 0 auto; margin: 0 auto;
padding-bottom: 50px;
padding: 10px 10px 50px 10px;
width: 700px; width: 700px;
max-width: 100%;
box-sizing: border-box;
} }
h1 { h1 {
@ -36,7 +39,6 @@ h3 {
font-size: 140%; font-size: 140%;
} }
a { a {
color: #2B7CE9; color: #2B7CE9;
text-decoration: none; text-decoration: none;

BIN
img/gallery/graph/01_basic_usage.png View File

Before After
Width: 400  |  Height: 400  |  Size: 21 KiB

BIN
img/gallery/graph/02_random_nodes.png View File

Before After
Width: 600  |  Height: 600  |  Size: 58 KiB

BIN
img/gallery/graph/03_images.png View File

Before After
Width: 600  |  Height: 600  |  Size: 88 KiB

BIN
img/gallery/graph/04_shapes.png View File

Before After
Width: 797  |  Height: 600  |  Size: 50 KiB

BIN
img/gallery/graph/05_social_network.png View File

Before After
Width: 600  |  Height: 600  |  Size: 76 KiB

BIN
img/gallery/graph/06_groups.png View File

Before After
Width: 600  |  Height: 600  |  Size: 40 KiB

BIN
img/gallery/graph/07_selections.png View File

Before After
Width: 400  |  Height: 400  |  Size: 14 KiB

BIN
img/gallery/graph/08_mobile_friendly.png View File

Before After
Width: 605  |  Height: 551  |  Size: 45 KiB

BIN
img/gallery/graph/09_sizing.png View File

Before After
Width: 600  |  Height: 600  |  Size: 27 KiB

BIN
img/gallery/graph/10_multiline_text.png View File

Before After
Width: 600  |  Height: 600  |  Size: 40 KiB

BIN
img/gallery/graph/11_custom_style.png View File

Before After
Width: 600  |  Height: 600  |  Size: 59 KiB

BIN
img/gallery/graph/12_scalable_images.png View File

Before After
Width: 600  |  Height: 600  |  Size: 104 KiB

BIN
img/gallery/graph/13_dashed_lines.png View File

Before After
Width: 600  |  Height: 600  |  Size: 26 KiB

BIN
img/gallery/graph/14_dot_language.png View File

Before After
Width: 381  |  Height: 330  |  Size: 13 KiB

BIN
img/gallery/graph/15_dot_language_playground.png View File

Before After
Width: 429  |  Height: 384  |  Size: 31 KiB

BIN
img/gallery/graph/graphviz_gallery.png View File

Before After
Width: 1237  |  Height: 729  |  Size: 262 KiB

BIN
img/gallery/timeline/01_basic.png View File

Before After
Width: 544  |  Height: 195  |  Size: 9.0 KiB

BIN
img/gallery/timeline/02_dataset.png View File

Before After
Width: 544  |  Height: 195  |  Size: 9.0 KiB

BIN
img/gallery/timeline/03_much_data.png View File

Before After
Width: 544  |  Height: 263  |  Size: 14 KiB

BIN
img/gallery/timeline/04_html_data.png View File

Before After
Width: 544  |  Height: 248  |  Size: 16 KiB

BIN
img/gallery/timeline/05_groups.png View File

Before After
Width: 711  |  Height: 459  |  Size: 24 KiB

+ 294
- 0
index.html View File

@ -0,0 +1,294 @@
<!doctype html>
<html>
<head>
<title>vis.js | a dynamic, browser-based visualization library</title>
<meta charset='utf-8' />
<meta name="title" content="vis.js">
<meta name="description" content="vis.js is a dynamic, browser-based visualization library" />
<meta name="keywords" content="vis, visualization, javascript, browser based, web based, chart, linechart, timeline, graph, network, browser" />
<meta name="author" content="Almende B.V.">
<link href="docs/css/prettify.css" type="text/css" rel="stylesheet" />
<link href='docs/css/style.css' type='text/css' rel='stylesheet'>
<link href="css/style.css" type="text/css" rel="stylesheet" >
<script type="text/javascript" src="docs/lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<div id="menu">
<a href="http://visjs.org/"><img src="img/logo/vis128.png" alt="logo"></a>
<div class="nav">
<ul>
<li><a href="#install">Install</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#docs">Docs</a></li>
<li><a href="#license">License</a></li>
</ul>
</div>
</div>
<h1>vis.js</h1>
<p>
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 the data.
The library consists of the components DataSet, Timeline, and Graph.
</p>
<p>
The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>.
</p>
<h2 id="install">Install</h2>
<h3>npm</h3>
Install via npm:
<pre class="prettyprint">
npm install vis
</pre>
<h3>bower</h3>
Install via bower:
<pre class="prettyprint">
bower install vis
</pre>
<h3>download</h3>
Or download the library from the github project:
<a href="https://github.com/almende/vis.git" target="_blank">https://github.com/almende/vis.git</a>.
<h2 id="example">Example</h2>
<p>
A basic example demonstrating how to use the vis.js timeline is shown below.
</p>
<p>
More examples can be found in the
<a href="examples" target="_blank">examples directory</a>.
</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="http://visjs.org/vis.js"&gt;&lt;/script&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="mytimeline"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var container = document.getElementById('mytimeline');
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);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="gallery">Gallery</h2>
<h3 id="timeline">Timeline</h3>
<div class="gallery">
<div class="thumb">
<a href="examples/timeline/01_basic.html">
<img src="img/gallery/timeline/01_basic.png">
<div>basic usage</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/02_dataset.html">
<img src="img/gallery/timeline/02_dataset.png">
<div>dataset</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/03_much_data.html">
<img src="img/gallery/timeline/03_much_data.png">
<div>much data</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/04_html_data.html">
<img src="img/gallery/timeline/04_html_data.png">
<div>html data</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/05_groups.html">
<img src="img/gallery/timeline/05_groups.png">
<div>groups</div>
</a>
</div>
</div>
<h3 id="graph">Graph</h3>
<div class="gallery">
<div class="thumb">
<a href="examples/graph/01_basic_usage.html">
<img src="img/gallery/graph/01_basic_usage.png">
<div>basic usage</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/02_random_nodes.html">
<img src="img/gallery/graph/02_random_nodes.png">
<div>random nodes</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/03_images.html">
<img src="img/gallery/graph/03_images.png">
<div>images</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/04_shapes.html">
<img src="img/gallery/graph/04_shapes.png">
<div>shapes</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/05_social_network.html">
<img src="img/gallery/graph/05_social_network.png">
<div>social network</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/06_groups.html">
<img src="img/gallery/graph/06_groups.png">
<div>groups</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/07_selections.html">
<img src="img/gallery/graph/07_selections.png">
<div>selections</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/08_mobile_friendly.html">
<img src="img/gallery/graph/08_mobile_friendly.png">
<div>mobile friendly</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/09_sizing.html">
<img src="img/gallery/graph/09_sizing.png">
<div>sizing</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/10_multiline_text.html">
<img src="img/gallery/graph/10_multiline_text.png">
<div>multiline text</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/11_custom_style.html">
<img src="img/gallery/graph/11_custom_style.png">
<div>custom style</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/12_scalable_images.html">
<img src="img/gallery/graph/12_scalable_images.png">
<div>scalable images</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/13_dashed_lines.html">
<img src="img/gallery/graph/13_dashed_lines.png">
<div>dashed lines</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/14_dot_language.html">
<img src="img/gallery/graph/14_dot_language.png">
<div>dot language</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/15_dot_language_playground.html">
<img src="img/gallery/graph/15_dot_language_playground.png">
<div>playground</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/graphviz/graphviz_gallery.html">
<img src="img/gallery/graph/graphviz_gallery.png">
<div>graphviz gallery</div>
</a>
</div>
</div>
<h2 id="docs">Docs</h2>
<p>
The following documentation is available:
</p>
<ul>
<li><a href="https://github.com/almende/vis#readme" target="_blank">Introduction</a></li>
<li><a href="docs/dataset.html" target="_blank">DataSet</a></li>
<li><a href="docs/graph.html" target="_blank">Graph</a></li>
<li><a href="docs/timeline.html" target="_blank">Timeline</a></li>
</ul>
<h2 id="license">License</h2>
<p>
Copyright (C) 2010-2013 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>
http://www.apache.org/licenses/LICENSE-2.0
</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>
<a id="forkme" href="https://github.com/almende/vis/" target="_blank">
<img src="img/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" >
</a>
</div>
</body>
</html>

+ 0
- 151
index.md View File

@ -1,151 +0,0 @@
---
layout: default
title: vis.js
---
# vis.js
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 the data.
The library consists of Timeline, LineChart, LineChart3d, Graph, and Treegrid.
Vis.js Library is part of [CHAP](http://chap.almende.com),
the Common Hybrid Agent Platform, developed by [Almende B.V](http://almende.com).
## Install
Install via npm:
npm install vis
Install via bower:
bower install vis
Or download the library from the github project:
[https://github.com/almende/vis.git](https://github.com/almende/vis.git).
## Load
To use a component, include the javascript file of vis in your webpage:
<!DOCTYPE HTML>
<html>
<head>
<script src="components/vis/vis.js"></script>
</head>
<body>
<script type="text/javascript">
// ... load a visualization
</script>
</body>
</html>
or load vis.js using require.js:
require.config({
paths: {
vis: 'path/to/vis',
}
});
require(['vis'], function (math) {
// ... load a visualization
});
A timeline can be instantiated as:
var timeline = new Timeline(container, data, options);
Where `container` is an HTML element, `data` is an Array with data or a DataSet,
and `options` is an optional object with configuration options for the
component.
## Example
A basic example on loading a Timeline is shown below. More examples can be
found in the [examples directory](https://github.com/almende/vis/tree/master/examples)
of the project.
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline basic demo</title>
<script src="components/vis/vis.js"></script>
<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>
## Build
To build the library from source, clone the project from github
git clone git://github.com/almende/vis.git
The project uses [jake](https://github.com/mde/jake) as build tool.
The build script uses [Browserify](http://browserify.org/) to
bundle the source code into a library,
and uses [UglifyJS](http://lisperator.net/uglifyjs/) to minify the code.
The source code uses the module style of node (require and module.exports) to
organize dependencies.
To install all dependencies and build the library, run `npm install` in the
root of the project.
cd vis
npm install
To be able to run jake from the command line, jake must be installed globally:
sudo npm install -g jake
Then, the project can be build by executing jake in the root of the project:
jake
## License
Copyright (C) 2010-2013 Almende B.V.
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
http://www.apache.org/licenses/LICENSE-2.0
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.

+ 12379
- 0
vis.js
File diff suppressed because it is too large
View File


+ 29
- 0
vis.min.js
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save