UNPKG

7.46 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>Timeline</title>
31 <script type="text/javascript" src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
32 <link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
33 <style type="text/css">
34 #visualization {
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## Builds
68
69There are four builds provided at the moment.
70
71### Standalone build
72
73```html
74<script
75 type="text/javascript"
76 src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"
77></script>
78```
79
80```javascript
81import { Timeline } from "vis-timeline/standalone";
82```
83
84This has no dependencies and therefore is great for things like MWEs but has
85more issues with interoperability and bundle bloat. For more information see the
86following [example](https://visjs.github.io/vis-timeline/examples/timeline/standalone-build.html).
87
88### Peer build
89
90```html
91<script
92 type="text/javascript"
93 src="https://unpkg.com/vis-timeline@latest/peer/umd/vis-timeline-graph2d.min.js"
94></script>
95```
96
97```javascript
98import { Timeline } from "vis-timeline/peer";
99```
100
101For this build to work you have to load Vis Data and Moment (including locales
102except English) packages yourself. The advantage here is that it works well with
103other packages. For more information see the following [example](https://visjs.github.io/vis-timeline/examples/timeline/peer-build.html).
104
105### ESNext build
106
107```html
108<script
109 type="text/javascript"
110 src="https://unpkg.com/vis-timeline@latest/esnext/umd/vis-timeline-graph2d.min.js"
111></script>
112```
113
114```javascript
115import { Timeline } from "vis-timeline/esnext";
116```
117
118This is the same as the peer build but without any bundled dependencies or
119pollyfills. It's indented to be used with bundlers like Rollup or Webpack which
120will fetch the dependencies, prevent duplicate dependencies in the bundle, use
121transpilers to add necessary polyfills etc.
122
123### Legacy build
124
125```html
126<script
127 type="text/javascript"
128 src="https://unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"
129></script>
130```
131
132```javascript
133import { Timeline } from "vis-timeline";
134```
135
136This is solely kept for backwards compatibility. It is deprecated and will be
137removed in case of URLs and replaced by the peer build in case of
138Node.js/bundlers. Don't use this, please.
139
140## Build
141
142To build the library from source, clone the project from github
143
144 $ git clone git://github.com/visjs/vis-timeline.git
145
146The source code uses the module style of node (require and module.exports) to
147organize dependencies. To install all dependencies and build the library,
148run `npm install` in the root of the project.
149
150 $ cd vis-timeline
151 $ npm install
152
153Then, the project can be build running:
154
155 $ npm run build
156
157### Excluding external dependencies
158
159External dependencies such as moment, hammerjs can be excluded in the build by running:
160
161 $ npm run build -- -e [comma separated module names]
162
163Example:
164
165 $ npm run build -- -e moment,hammerjs
166
167## Test
168
169To test the library, install the project dependencies once:
170
171 $ npm install
172
173Then run the tests:
174
175 $ npm run test
176
177## Contribute
178
179Contributions to the vis.js library are very welcome! We can't do this alone!
180
181### Backers
182
183Thank you to all our backers! 🙏
184
185<a href="https://opencollective.com/visjs#backers" target="_blank"><img src="https://opencollective.com/visjs/backers.svg?width=890"></a>
186
187### Sponsors
188
189Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
190
191<a href="https://opencollective.com/visjs/sponsor/0/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/0/avatar.svg"></a>
192<a href="https://opencollective.com/visjs/sponsor/1/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/1/avatar.svg"></a>
193<a href="https://opencollective.com/visjs/sponsor/2/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/2/avatar.svg"></a>
194<a href="https://opencollective.com/visjs/sponsor/3/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/3/avatar.svg"></a>
195<a href="https://opencollective.com/visjs/sponsor/4/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/4/avatar.svg"></a>
196<a href="https://opencollective.com/visjs/sponsor/5/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/5/avatar.svg"></a>
197<a href="https://opencollective.com/visjs/sponsor/6/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/6/avatar.svg"></a>
198<a href="https://opencollective.com/visjs/sponsor/7/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/7/avatar.svg"></a>
199<a href="https://opencollective.com/visjs/sponsor/8/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/8/avatar.svg"></a>
200<a href="https://opencollective.com/visjs/sponsor/9/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/9/avatar.svg"></a>
201
202## License
203
204Copyright (c) 2014-2017 Almende B.V. and contributors
205Copyright (c) 2017-2019 vis.js contributors
206
207This work is dual-licensed under [Apache-2.0](./LICENSE.Apache-2.0.txt) and [MIT](./LICENSE.MIT.txt).
208You can choose between one of them if you use this work.
209
210`SPDX-License-Identifier: Apache-2.0 OR MIT`