UNPKG

5.45 kBMarkdownView Raw
1# vis-timeline
2
3![example chart](docs/img/timeline.png)
4
5The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or have a start and end date (a range). You can freely move and zoom in the timeline by dragging and scrolling in the Timeline. Items can be created, edited, and deleted in the timeline. The time scale on the axis is adjusted automatically, and supports scales ranging from milliseconds to years.
6
7## Badges
8
9[![GitHub contributors](https://img.shields.io/github/contributors/visjs/vis-timeline.svg)](https://github.com/visjs/vis-timeline/graphs/contributors)
10[![GitHub stars](https://img.shields.io/github/stars/visjs/vis-timeline.svg)](https://github.com/almende/vis/stargazers)
11
12[![Backers on Open Collective](https://opencollective.com/visjs/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/visjs/sponsors/badge.svg)](#sponsors)
13
14## Install
15
16Install via npm:
17
18 $ npm install vis-timeline
19
20## Example
21
22A basic example on loading a Timeline is shown below. More examples can be
23found in the [examples directory](https://github.com/visjs/vis-timeline/tree/master/examples/)
24of the project.
25
26```html
27<!doctype html>
28<html>
29<head>
30 <title>Network</title>
31 <script type="text/javascript" src="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"></script>
32 <link href="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
33 <style type="text/css">
34 #mynetwork {
35 width: 600px;
36 height: 400px;
37 border: 1px solid lightgray;
38 }
39 </style>
40</head>
41<body>
42<div id="visualization"></div>
43<script type="text/javascript">
44 // DOM element where the Timeline will be attached
45 var container = document.getElementById('visualization');
46
47 // Create a DataSet (allows two way data-binding)
48 var items = new vis.DataSet([
49 {id: 1, content: 'item 1', start: '2014-04-20'},
50 {id: 2, content: 'item 2', start: '2014-04-14'},
51 {id: 3, content: 'item 3', start: '2014-04-18'},
52 {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
53 {id: 5, content: 'item 5', start: '2014-04-25'},
54 {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
55 ]);
56
57 // Configuration for the Timeline
58 var options = {};
59
60 // Create a Timeline
61 var timeline = new vis.Timeline(container, items, options);
62</script>
63</body>
64</html>
65```
66
67## Build
68
69To build the library from source, clone the project from github
70
71 $ git clone git://github.com/visjs/vis-timeline.git
72
73The source code uses the module style of node (require and module.exports) to
74organize dependencies. To install all dependencies and build the library,
75run `npm install` in the root of the project.
76
77 $ cd vis-timeline
78 $ npm install
79
80Then, the project can be build running:
81
82 $ npm run build
83
84### Excluding external dependencies
85
86External dependencies such as moment, hammerjs can be excluded in the build by running:
87
88 $ npm run build -- -e [comma separated module names]
89
90Example:
91
92 $ npm run build -- -e moment,hammerjs
93
94## Test
95
96To test the library, install the project dependencies once:
97
98 $ npm install
99
100Then run the tests:
101
102 $ npm run test
103
104## Contribute
105
106Contributions to the vis.js library are very welcome! We can't do this alone!
107
108### Backers
109
110Thank you to all our backers! 🙏
111
112<a href="https://opencollective.com/visjs#backers" target="_blank"><img src="https://opencollective.com/visjs/backers.svg?width=890"></a>
113
114### Sponsors
115
116Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
117
118<a href="https://opencollective.com/visjs/sponsor/0/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/0/avatar.svg"></a>
119<a href="https://opencollective.com/visjs/sponsor/1/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/1/avatar.svg"></a>
120<a href="https://opencollective.com/visjs/sponsor/2/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/2/avatar.svg"></a>
121<a href="https://opencollective.com/visjs/sponsor/3/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/3/avatar.svg"></a>
122<a href="https://opencollective.com/visjs/sponsor/4/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/4/avatar.svg"></a>
123<a href="https://opencollective.com/visjs/sponsor/5/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/5/avatar.svg"></a>
124<a href="https://opencollective.com/visjs/sponsor/6/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/6/avatar.svg"></a>
125<a href="https://opencollective.com/visjs/sponsor/7/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/7/avatar.svg"></a>
126<a href="https://opencollective.com/visjs/sponsor/8/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/8/avatar.svg"></a>
127<a href="https://opencollective.com/visjs/sponsor/9/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/9/avatar.svg"></a>
128
129## License
130
131Copyright (c) 2014-2017 Almende B.V. and contributors
132Copyright (c) 2017-2019 vis.js contributors
133
134This work is dual-licensed under [Apache-2.0](./LICENSE.Apache-2.0.txt) and [MIT](./LICENSE.MIT.txt).
135You can choose between one of them if you use this work.
136
137`SPDX-License-Identifier: Apache-2.0 OR MIT`