Timeline/Graph2D is an interactive visualization chart to visualize data in time.

Overview

vis-timeline

example chart

The 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.

Badges

GitHub contributors GitHub stars

Backers on Open Collective Sponsors on Open Collective

Install

Install via npm:

$ npm install vis-timeline

Example

A basic example on loading a Timeline is shown below. More examples can be found in the examples directory of the project.

">
>
<html>
<head>
  <title>Timelinetitle>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/standalone/umd/vis-timeline-graph2d.min.js">script>
  <link href="https://unpkg.com/[email protected]/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #visualization {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  style>
head>
<body>
<div id="visualization">div>
<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2014-04-20'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {id: 3, content: 'item 3', start: '2014-04-18'},
    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
    {id: 5, content: 'item 5', start: '2014-04-25'},
    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
script>
body>
html>

Builds

There are four builds provided at the moment.

Standalone build

">
<script
  type="text/javascript"
  src="https://unpkg.com/[email protected]/standalone/umd/vis-timeline-graph2d.min.js"
>script>
import { Timeline } from "vis-timeline/standalone";

This has no dependencies and therefore is great for things like MWEs but has more issues with interoperability and bundle bloat. For more information see the following example.

Peer build

">
<script
  type="text/javascript"
  src="https://unpkg.com/[email protected]/peer/umd/vis-timeline-graph2d.min.js"
>script>
import { Timeline } from "vis-timeline/peer";

For this build to work you have to load Vis Data and Moment (including locales except English) packages yourself. The advantage here is that it works well with other packages. For more information see the following example.

ESNext build

">
<script
  type="text/javascript"
  src="https://unpkg.com/[email protected]/esnext/umd/vis-timeline-graph2d.min.js"
>script>
import { Timeline } from "vis-timeline/esnext";

This is the same as the peer build but without any bundled dependencies or pollyfills. It's indented to be used with bundlers like Rollup or Webpack which will fetch the dependencies, prevent duplicate dependencies in the bundle, use transpilers to add necessary polyfills etc.

Legacy build

">
<script
  type="text/javascript"
  src="https://unpkg.com/[email protected]/dist/vis-timeline-graph2d.min.js"
>script>
import { Timeline } from "vis-timeline";

This is solely kept for backwards compatibility. It is deprecated and will be removed in case of URLs and replaced by the peer build in case of Node.js/bundlers. Don't use this, please.

Build

To build the library from source, clone the project from github

$ git clone git://github.com/visjs/vis-timeline.git

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-timeline
$ npm install

Then, the project can be build running:

$ npm run build

Excluding external dependencies

External dependencies such as moment, hammerjs can be excluded in the build by running:

$ npm run build -- -e [comma separated module names]

Example:

$ npm run build -- -e moment,hammerjs

Test

To test the library, install the project dependencies once:

$ npm install

Then run the tests:

$ npm run test

Contribute

Contributions to the vis.js library are very welcome! We can't do this alone!

Backers

Thank you to all our backers! 🙏

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

License

Copyright (c) 2014-2017 Almende B.V. and contributors Copyright (c) 2017-2019 vis.js contributors

This work is dual-licensed under Apache-2.0 and MIT. You can choose between one of them if you use this work.

SPDX-License-Identifier: Apache-2.0 OR MIT

Comments
  • exclude moment from bundle by default?

    exclude moment from bundle by default?

    Since #9 it is possible to exclude external libraries (e.g. moment) from the build. The question is should be exclude e.g. moment by default? This would be a breaking change because than the user would always need to import moment manually.

    What do you folks think?

    documentation released 
    opened by mojoaxel 19
  • content attribute for timeline item started striping HTML code breaking timeline renders

    content attribute for timeline item started striping HTML code breaking timeline renders

    This morning, I logged into a few internal tools I wrote that use vis-timeline, and utilise the https://unpkg.com/[email protected]/standalone/umd/vis-timeline-graph2d.min.js to import the package. Two different apps started displaying the timeline wrong. Meaning it must be pulling in a newer version that is now broken. Broken in the sense that I set the "content" attribute of a timeline item with a lot of HTML code to render quite a bit of data in the timeline items. The content appears to be "STRIPPED" of certain html code now resulting in a broken render of the timeline item.

    I have been digging around and have not found any reference to this behaviour or change. Can someone help me out here, is there a way around this new bug, or maybe it's an intentional sanitization of the content? No idea. but there must be a way to fix this.

    I would consider this a major issue that needs to be addressed quickly as any tool leveraging the public unpkg version above is likely now broken. (Like my tools).

    Thanks James

    bug released 
    opened by jamiegau 18
  • Merge timeline plus

    Merge timeline plus

    This PR should merge all the work done in https://github.com/yotamberk/timeline-plus in to this repo. Unfortunately I could not preserve the amazing original contributors of some of the features implemented.

    opened by yotamberk 17
  • Network and Graph2d not working in the same app

    Network and Graph2d not working in the same app

    We use both network and 2d charts in the same app. This worked fine in vis 4.x but no longer works. I get the following error:

    TypeError: vis.Network is not a constructor

    If the load order is

            <!--Vis-->
            <script src="dist/vis-network.min.js"></script>
            <script src="dist/vis-timeline-graph2d.min.js"></script>
    

    and

    TypeError: vis.Graph2d is not a constructor

    if the graph2d module loads first. It appears like the one module overwrites the other. The last module in the load order is the one that works.

    bug released 
    opened by richardeaxon 13
  • What happened to tooltip.template option?

    What happened to tooltip.template option?

    According to the "latest" documentation there should be a way to define a tooltip template. Unfortunately, every time I try to define a template for tooltips I get an error that template is not a valid option for tooltip. I verified I have the latest version

    • @version 5.1.0
    • @date 2019-08-02T15:25:33Z

    According to the new documentation found here https://visjs.github.io/vis-timeline/docs/timeline/

    "tooltip.template | Function | none | A template function used to generate the contents of the tooltip. The function is called by the Timeline with an item's data as the first argument, and the edited data as the second argument. It must return HTML code, a string or a template as result. See section Templates for a detailed explanation. See also: tooltipOnItemUpdateTime.template"

    This is what I see when I try to use the documented option.

    Unknown option detected: "template" in options = { tooltip: { template }}

    Am I missing something? It appears that the template is supposed to be new; however, it doesn't appear to be implemented as of 2019-08-02.

    Thank you for your time and consideration.

    bug 
    opened by payitforwardnow 12
  • [BUG] Some (large) items doesn't show up on horizontal scrolling

    [BUG] Some (large) items doesn't show up on horizontal scrolling

    Replicable here: https://visjs.github.io/vis-timeline/examples/timeline/

    Extend the Order 251's start to 10:00 AM, after this, do as follows:

    Vis-Bug

    Why does the Order 251 item appear after a certain threshold, Is this a normal behavior or a bug?

    This occurs only with particularly large items.

    bug 
    opened by gmcinalli 11
  • fix(timeline.setgroups): nested groups fold correcly when input is array

    fix(timeline.setgroups): nested groups fold correcly when input is array

    Squash preferered, HEAD is a revert of a commit that added a demo

    Fixes #113

    checkout https://github.com/visjs/vis-timeline/commit/1a8fd7e26ffe7c198584a660524253cee63531e7 to see demonstration, head doesn't include this as the example isn't intended for production, and I want to expedite the review.

    released 
    opened by strazto 10
  • Type coercion has been deprecated. Please, use data pipes instead.

    Type coercion has been deprecated. Please, use data pipes instead.

    I'm getting the following log printing to my console whenever I update the timeline's DataSet with dataSet.update()

    backend.js:6 Type coercion has been deprecated. Please, use data pipes instead. See https://visjs.github.io/vis-data/data/datapipe.html#TypeCoercion for more details with working migration example.
    
    r | @ | backend.js:6
      | warnTypeCorectionDeprecation | @ | esm.js:14
      | _getItem | @ | esm.js:14
      | get | @ | esm.js:14
      | (anonymous) | @ | ItemSet.js:1146
      | _onUpdate | @ | ItemSet.js:1145
      | update | @ | ItemSet.js:165
      | (anonymous) | @ | esm.js:14
      | _trigger | @ | esm.js:14
      | update | @ | esm.js:14
    

    I'm on the latest version of vis-timeline.

    bug question 
    opened by rvillalba-novetta 9
  • Composer unable to install vis-timeline as NPM asset

    Composer unable to install vis-timeline as NPM asset

    After adding the NPM package to my composer file (require > "vis-timeline": "5.1.0"). composer is unable to find it. However it does find the vis-network NPM package. Composer search cannot find it either, it only returns "cliffparnitzky/vis.js-timeline". Am I the only one experiencing this issue?

    bug help wanted wontfix 
    opened by LetsIncreaseThatKnowledge 9
  • "infinite loop in redraw" warning on browser zoom

    I'm using the VisJs timeline from the 'almende/vis' repo and come across an issue where if you change the zoom level (80% causes the most problems) then the redraw function gets stuck in a infinite loop. There is a repeated warning in the console 'WARNING: infinite loop in redraw?'.

    There is an issue raised in the old repo: Timeline Issue: Sometimes the redraw cycle can become stuck in an infinite loop #450

    I've gone through the examples for this repo and i can see is it still occurring. If the old issues are still being tracked then i apologise and feel free to close this one.

    bug released 
    opened by Waddas 9
  • fix: vertical-scrolling to be out of sync

    fix: vertical-scrolling to be out of sync

    Fixes #422

    If vertical scrolling is enabled, scrolling on the left group panel scrolls the left and right part out of sync (see the GIF in #433). I found the following line to be the reason for this:

    if (me._isProgramaticallyScrolled) {
            me._isProgramaticallyScrolled = false;
            return;
    }
    

    I removed this code and then saw a behavior I guess was the reason for this: When I scrolled down to the end of the group panel, the panel started flickering for some seconds. The reason for this flickering was that the following boundary check

    // limit the scrollTop to the feasible scroll range
    ...
    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
    

    used a scrollTopMin 2 (pixels) higher than the actual .scrollTop at the last scroll position.This updated the scrollTop property in the opposite direction the mouse scrolling did.

    The reason for these 2 pixel difference is the how the container heights are calculated. Instead of rewriting this calculation, I found it safer to just improve the scrollTopMin calculation to also consider the borders.

    released 
    opened by Sennahoi 8
  • Timeline::updateOnly causes 'Cannot convert object of type object to type Date' when setting date

    Timeline::updateOnly causes 'Cannot convert object of type object to type Date' when setting date

    The issue may be reproduced by the Update data on event example by simply changing the line 42 from

    data.update(item);
    

    ... to ...

    data.updateOnly(item);
    

    The item.end that is filled in few lines above in the sample is somehow wiped out by the code inside updateOnly and when the code comes to the value conversion, instead of the Date object, there is an empty object {} that obviously fails to convert:

    	    case "Date":
    	      try {
    	        return convert(object, "Moment").toDate();
    	      } catch (e) {
    	        if (e instanceof TypeError) {
    	          throw new TypeError("Cannot convert object of type " + getType(object) + " to type " + type);
    	        } else {
    	          throw e;
    	        }
    	      }
    
    opened by jan-dolejsi 0
  • Add xss notes/examples to templates section in documentation

    Add xss notes/examples to templates section in documentation

    Adding the notes and examples from https://github.com/visjs/vis-timeline/pull/1010 to the template() option function documentation (https://github.com/visjs/vis-timeline/blob/master/docs/timeline/index.html#LL2071C15) would help prevent a lot of confusion as to why it doesn't work according to the current documentation.

    opened by wickkidd 1
  • Group background color drawing over minor/major gridlines

    Group background color drawing over minor/major gridlines

    Unsure if a bug, but I've tried a lot of CSS trickery now and cannot seem to resolve....

    using a Vis.js Timeline, I have a group timeline wherein I'm setting the background color of one of the groups, but the color is over-riding the vis-grid minor/major gridlines such that they don't show.

    Repeatable example below wherein you can see the gridlines don't show on both timelines (one group with a className and one without). My group classroom is "baseline" and I've tried CSS .vis-time-axis.baseline .vis-grid.vis-minor.baseline with no luck... among lots of other variations.

    <!DOCTYPE HTML>
    <html>
    <head>
        <script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
        <link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            body,
            html {
                font-family: sans-serif;
                background-color: black;
    
            }
            .vis-item .vis-item-overflow {
                overflow: visible;
            }
            .vis-group.baseline {
                font-family: sans-serif;
                font-style: italic;
                font-size: 11pt;
                background-color: #b1a3a3;
            }
            .baseline {
                font-family: sans-serif;
                font-style: italic;
                font-size: 11pt;
            }
            .vis-time-axis .vis-text {
                box-sizing: border-box;
                color: #ffffff;
                overflow: hidden;
                padding: 3px;
                position: absolute;
                white-space: nowrap
            }
            .vis-time-axis .vis-grid.vis-minor {
                border-color: #ececee
            }
        </style>
    </head>
    <body>
        <div id="visualization"></div>
        <script>
            var groups = new vis.DataSet([
                { id: 0, content: 'Solution #0', value: 0, className: "baseline" },
                { id: 1, content: 'Solution #1', value: 1 },
            ]);
            var items = new vis.DataSet([
                { id: 0, group: 0, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
                { id: 1, group: 0, content: 'BBB', start: new Date(2020, 04, 06), end: new Date(2020, 04, 06), type: 'point' },
                { id: 2, group: 0, content: 'CCC', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
                { id: 22, group: 1, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
                { id: 23, group: 1, content: 'BBB', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
                { id: 24, group: 1, content: 'CCC', start: new Date(2021, 09, 22), end: new Date(2021, 09, 27), type: 'range' },
            ]);
            var container = document.getElementById('visualization');
            var options = {};
            var timeline = new vis.Timeline(container,items,groups,options);
        </script>
    </body>
    </html>
    
    opened by chipnetics 0
  • item of type point does not apply style property

    item of type point does not apply style property

    Hello,

    please check this JSFiddle: https://jsfiddle.net/kc7h43w2/

    It demonstrates that a point would apply the className-property but not the style-property.

    Please check if this would be considered a bug or if the behavior is intended.

    Many Thanks.

    Best Regards, René

    opened by rkappel 0
  • Prevent range selection with CTRL-Key by keeping selectable and editable options

    Prevent range selection with CTRL-Key by keeping selectable and editable options

    Hi there,

    i've extend the drag&drop behavior of the timeline elements. if item is moved and than the ctrl key is hold down, i create a placeholder of the "sourceitem" on the old position and on move stopped (still ctrl down) i create a new item as copy of the "sourceitem". this works if the user select a item, starts dragging and THAN hold down ctrl.

    As soon as the user select an item, hold down CTRL and than start moving, timeline creates a range-object. i successfully blocked the creation of a new item based on this range, but I cant prevent this range selection at all. Any way to block this? i need to move the item even if the ctrl key is hold down befor moving started.

    we are using "vis-timeline-graph2d.min.7.7.0.js"

    Greetings!

    opened by ragesoft 0
  • `redraw` resets all classes to default

    `redraw` resets all classes to default

    Hello, I suppose this 'is by design', but IMHO it is a flaw. Each time _redraw (in Core.js) is called classes on the container are reset. It makes it hard to customize that lib - I would like to add my own class on each item, not to mention that these components natively are rather generic - no way to customize it straight (vis-left/right/center are rather not specific).

    You may use classList.toggle(<class name>, true/false).

    same here: dom.rightContainer.className.replace(new RegExp('(?:^|\\s)' + 'vis-vertical-scroll' + '(?:\\s|$)'), ' ') - you may use classList.toggle(..., false)

    opened by Azbesciak 0
Releases(v7.7.0)
Owner
vis.js
Dynamic, browser based visualization libraries
vis.js
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Synchro Charts Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data. You can learn m

Amazon Web Services - Labs 60 Dec 29, 2022
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
vizflow is an ES6 interactive visualization engine

Vizflow vizflow.js - a render-loop library written using EcmaScript.6 (ES6) with no other external dependencies. Vizflow is a relatively small library

Vizflow 332 Oct 27, 2022
Apache Superset is a Data Visualization and Data Exploration Platform

Superset A modern, enterprise-ready business intelligence web application. Why Superset? | Supported Databases | Installation and Configuration | Rele

The Apache Software Foundation 49.9k Dec 31, 2022
DataSphereStudio is a one stop data application development& management portal, covering scenarios including data exchange, desensitization/cleansing, analysis/mining, quality measurement, visualization, and task scheduling.

English | 中文 Introduction DataSphere Studio (DSS for short) is WeDataSphere, a big data platform of WeBank, a self-developed one-stop data application

WeBankFinTech 2.4k Jan 2, 2023
Timeline maker, based on D3.js

Timeline maker, based on D3.js

Altilunium 7 Sep 6, 2022
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Epoch 5k Dec 30, 2022