visjs / vis-timeline Goto Github PK

Feature Request

description

I think it's nice to be able to add markers which indicate what happened at the time to graphs.
This is useful, e.g, to supplement why the graph has been changed.

Current

We can do almost the same thing by using addCustomTime and setCustomTimeTitle but, It's inconvenient in the use case since the title is displayed only when the time bar is hovered.

Before releasing the v6 we should discuss introduce code-styling with Prettier like we did in vis-network and the other libraries.

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Hi :)

thanks for plugin, good job!

I found in Graph2d.js file a redundant assignment in line 153. You try to set me.itemSet.initialDrawDone = true; but one line above You assigned the 'initialDrawDone' property to 'me' object. That 'itemSet' object is not exist in script. Please check this and give me a feedback :)

Hi,

Is there a way to pass an attribute to item so I can get it on an event?
I mean, in my project, I have to check if an item is a boolean value or not but when I added a listener to check that, an obj has some default properties but no dynamic properties.

I added a click event with on method like so:

timeline.on('click', (e) => {
      console.log(e)
 })

I want to know or suggest that could be possible to add dynamic properties to events so it could be possible to handle every item click.

Thanks and regards

Since deprecation of timeline-plus and its merge into the vis-timeline repo, I ported my project to use this repo, but I am experiencing major performance issues that are not present in timeline-plus.

My project containing about 100 groups and each group around 10-20 nodes. I have all my groups load asynchronously such that the UI is not blocked when loading the groups. Using timeline-plus, each group takes around a quarter of a second to load, no problems once everything is loaded into memory; the UI is as smooth as butter. With vis-timeline, the first 10 groups take the same time but after that, each one group dramatically needs more time. The 100th group can take almost a minute to load. Then once everything is loaded, navigating around the timeline is severely laggy. I would say unusable.

With timeline-plus, the timeline's UI is like butter. But unusable with this repo. I am concerned that the performance improvements made in timeline-plus were not correctly ported over to this timeline.

Hello,

I am using timeline with a significant amount of groups (Names sorted by Alphabet) that cannot be displayed on the screen at once. By default, when timeline is created, it starts out the very bottom (so Names starting with Z are in view). Is there a way to change this behaviour so timeline starts at the top instead?

Both groups and items are populated via ajax.

Item focus is not really a solution, since the first item does not necesseraly belong to the first Group (and in fact since I don't need them at the moment, my items don't have id's at all currently, allthough I could add some if that somehow helps).

Also, related, is there a way to make timeline jump to a group by name? So I can have like a search field and once executed, the view centers on that group?

1. open https://visjs.github.io/vis-timeline/examples/graph2d/15_streaming_data.html
2. switch to "Discrete"
3. switch back to "Continous"

1. open https://visjs.github.io/vis-timeline/examples/graph2d/13_localization.html or https://visjs.github.io/vis-timeline/examples/timeline/other/localization.html or http://localhost:8080/examples/timeline/styling/weekStyling.html
2. try selecting another language
3. nothing happens 😞

This example does not work anymore:
https://visjs.github.io/vis-timeline/examples/timeline/styling/itemTemplates.html

I can't seem to fix the issue and I cant continue without fixing this.
Can you please help me figure what's wrong @mojoaxel ?

Hi all,
I've just downloaded the last vis-timeline repo by git tool.
I'm taking a look to this sample and running on Firefox I see an error on the browser console:

TypeError: a.itemSet is undefined[Ulteriori informazioni] Graph2d.js:141:8

PS: I'm looking for a library to draw a chart that allows to drag every point of a chart; is there a sample that does it?

Hey,
this request was originally raised here but seems not to work with the timeline.
Would be really nice if this could be implemented for the timeline as well.

I need help with drag and drop from one timeline to another.

When creating a new timeline with the options object, moveable, zoomable and showMajorLabels values even though are set to false are not taken in consideration. Other attributes like orientation: 'top' for i.e work fine. Also tested setting this attributes in the example provided in the readme of this repo.

I'm using Graph2d. Not sure if this is an issue or my own stupidity but I get the following error:

Error: attribute d: Expected number, "M522,NaN CNaN,NaN NaN…".

My code looks like:

this.data = {
  groups: new V.DataSet([]),
  items: new V.DataSet([])
};
this.data.groups.update([
  { id: 1, content: 'A', options: {
    drawPoints: false
}},
{ id: 2, content: 'B', options: {
    drawPoints: false
  }}
]);
this.data.items.update([
  { x: new Date('2014-06-13'), y: 10, group: 1 },
  { x: new Date('2014-06-14'), y: 20, group: 1 },
  { x: new Date('2014-06-21'), y: 20, group: 2 },
  { x: new Date('2014-06-25'), y: 30, group: 2 }
]);
let container = document.getElementById("chart");
let options = {
  start: new Date('2014-06-10'),
  end: new Date('2014-07-04'),
  legend: true,
  height: '100%',
  autoResize: true,
  clickToUse: true
};
this.c = new V.Graph2d(container, this.data.items, this.data.groups, options);

Any ideas?

I've noticed that having many timeline items drastically decreases performance.

I was attempting to solve this issue and I came across either a forked or different version of Vis.js timeline.

http://almende.github.io/chap-links-library/js/timeline/examples/example16_performance_grouping.html

It appears to be combing or clustering the items to give better performance.

I want to throw this out there because it definitely exists and it would be awesome to see this implemented. I will happily aid in the contribution of this feature.

Here's the main page.
http://almende.github.io/chap-links-library/timeline.html

When using verticalScroll: true it shows the scroll bar at the left side of the timeline.

I would like to request a feature to show the scroll bar on the right side:

Or is it already possible?

In my angular component i have working timeline with the old [email protected] library with the options below which works as expected, but when i change to the vis-timeline 5.0.0 library it totaly ignores those settings and always zooms instead of scrolls when using the mouse wheel.
const options = { width: '100%', zoomable: false, zoomKey: 'ctrlKey', horizontalScroll: true };

Is this a bug in the new library or am i missing something the disable zoom and enable horizontal scroll?

I updated VIS this morning to get the translations working. This is working very well now, but the items are misplaced in the rows. I switched between the previous version and the latest update and it's indeed working correctly in the previous version. Please see pictures below. (they are placed correctly if it starts all folded out / showNested: true; But not when collapsed and open them one by one)

Previous Version:

Current Version:

Is it possible to support typescript via types?

There's a type for vis, but since vis was separated in to multiple modules, the current @type is not fully compatible.

https://www.npmjs.com/package/@types/vis

Thanks for creating such a powerful timeline util!, but when I use it to change locale by setOptions() function, it seems not working. And then, I find your official example as the follow link:https://visjs.github.io/vis-timeline/examples/timeline/other/localization.html, it also has the same problem in chrome and safari browser.

I'am wondering how could I change locale correctly. Looking forward to your answers, thx.

Githup is all https causing mixed content from CDN's to fail loading with the below message. All CDN URL's used in examples should be changed to https.

Blocked loading mixed active content “http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”

Hey, i have encountered a problem with align property of an item not overriding the options align property of timeline.

I want some specific items on the timeline to be aligned on the left of the line and some on the right side.

Due to the documentation for Vis.js timeline, property align of item should override the global align property of options for timeline. But it does not.

item example:

    var items = [];

    var item = {
      align: "left"
      date: "20.09.2019"
      eventId: 440
      heading: "Event"
      id: "86ad4f21-6235-46e0-b5c9-29a6d2c16f50"
      nodeType: "single-node"
      start: "2019-09-20T04:00:00"
    }

    items.push(item);

    // create dataset
    var dataset = new vis.DataSet(items);

timeline options:

    var options = {
      orientation: 'top',
      min: "2019-09-20T04:00:00",
      max: "2019-09-25T04:00:00",
      start: "2019-09-20T04:00:00",
      end: "2019-09-25T04:00:00",
      align: 'left'
    }

here is how i update the item align property after calling the vis.Timeline constructor:

    var visualization = document.getElementById('visualization');

    var timeline = new vis.Timeline(visualization, dataset, options);

    timeline.itemsData.forEach(function(dataItem) {
      if (dataItem.eventId === 440) {
        dataItem.align = 'right';
        timeline.itemsData.update(dataItem, {
          fieldId: "eventId"
        })
      }
    })

If i just use it wrongly, then i am sorry for spamming here, but i spent lots of time trying to figure it out.

I'm on latest Firefox 68.0.1 and zoom using scroll wheel doesn't seem to work in online examples. Zoom works in Chromium though.

tl;dr: How do I properly build the timeline? It seems to be broken event with a fresh install.

I am experiencing issues trying to build the master branch.

This is from a fresh clone and after running npm install.

1. Running npm run build gives the error:

$ npm run build

> [email protected] build C:\Users\zacharjc\Desktop\Repos\vis-timeline
> rollup --config rollup.config.js


index.js → dist/vis-timeline-graph2d.esm.js...
created dist/vis-timeline-graph2d.esm.js in 8.8s

index.js → dist/vis-timeline-graph2d.min.js...
[!] (plugin babel-minify) Error: don't know how to turn this value into a node
Error: don't know how to turn this value into a node
    at Object.valueToNode (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\types\lib\converters\valueToNode.js:103:9)
    at PluginPass.Expression (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\babel-plugin-minify-constant-folding\lib\index.js:195:26)
    at PluginPass.newFn (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\visitors.js:230:17)
    at newFn (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\visitors.js:193:21)
    at NodePath._call (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\path\context.js:53:20)
    at NodePath.call (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\path\context.js:40:17)
    at NodePath.visit (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\path\context.js:88:12)
    at TraversalContext.visitQueue (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\context.js:118:16)
    at TraversalContext.visitSingle (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\context.js:90:19)
    at TraversalContext.visit (C:\Users\zacharjc\Desktop\Repos\vis-timeline\node_modules\@babel\traverse\lib\context.js:146:19)

The workaround is to just use the vis-timeline-graph2d.esm.js file

2. In my project, I have installed the local vis-timeline vis npm install -s ../vis-timeline which renders:

"dependencies": {
    ...
    "vis-timeline": "file:../vis-timeline"
    ...
}

in package.json.

When importing vis-timeline via import * as vis from 'vis-timeline'; in my typescript project using this code:

this.timeline = new vis.Timeline(
      document.getElementById('timeline-main'),
      [
        { 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' }
      ],
      { height: 'calc(100vh - 136px)' }
    );

I get the error:

"export 'Timeline' (imported as 'vis') was not found in 'vis-timeline'

But when importing vis const vis = require('vis-timeline');

I get the error:

ERROR TypeError: vis.Timeline is not a constructor
    at ActivitiesComponent.push../src/app/features/crew/component/activities/activities.component.ts.ActivitiesComponent.ngAfterContentInit (activities.component.ts:19)
    at callProviderLifecycles (core.js:21406)
    at callElementProvidersLifecycles (core.js:21387)
    at callLifecycleHooksChildrenFirst (core.js:21377)
    at checkAndUpdateView (core.js:29442)
    at callViewAction (core.js:29679)
    at execComponentViewsAction (core.js:29621)
    at checkAndUpdateView (core.js:29444)
    at callViewAction (core.js:29679)
    at execEmbeddedViewsAction (core.js:29642)

I want to build the timeline so I can contribute and test out the timeline-plus merges but I am blocked from doing so until I can do a successful build.

It is possible to set custom locales (docs, example).

Current behavior

If a custom local is given the embedded locales are overwritten and can not be used anymore.

Expected behavior

If custom locales are provided via the options the should extend the existing locals not replace them.

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.

When using the getCustomTime function with an id parameter, it always errors out.
I investigated a bit, and found that the library doesn't store the id in the options field in the members of the internally stored customTimes array.

There is a fork that implemented "clustering support": https://github.com/konsvarl/vis
We should check if it makes sense to cherry-pick these commits!

Two problems:

1. The example rollingMode shows broken icons (linux):
   

2. The button toggleRollingMode in the example navigationMenu does nothing.

When I npm install vis-timeline I get the following error:

npm ERR! Failed at the [email protected] postinstall script

Any help or advice appreciated :-)

we should install a greenkeeper bot that auto-updates dependencies. This is especially important for dependencies on vis-util or vis-data.

Hello!

I am developing with vis.js and I am loving it!

I was wondering if it would be a reasonable feature request to be able to have "unloaded" time ranges shaded or grayed out so when a user scrolls outside of the currently loaded time range they know that there might be data that needs to be loaded.

The same functionality said a different way:

Is it possible to have the default timeline background a selected color (user would most likely choose gray or black) and have the loaded regions appear a different selected color (user would likely choose white like in the default examples) so that if a user zooms out, they see that the unloaded regions are shaded so they need to stop scrolling to let them load? (I have all the loading functionality working, just need a way to determine if and where the background would have the shaded or un-shaded class)

Appreciate any help if this is possible with the current grid background styling.
I did check https://visjs.github.io/vis-timeline/docs/timeline/#Styles but it seems like it would take quite a bit of work in order to generate the corresponding css, if possible at all.

I'm getting the following error in IE11. I tried to convert it with babel but same error. Is this known and does someone have a fix? Cheers!

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?

Hello,

The npm package and the git have differents update dates but they have the same version :
npm package from : https://unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js
(Redirects to : https://unpkg.com/[email protected]/dist/vis-timeline-graph2d.min.js)

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

git repo from : https://github.com/visjs/vis-timeline/blob/master/dist/vis-timeline-graph2d.min.js

 * @version 5.1.0
 * @date    2019-08-13T18:10:02Z

The main problem is that in the npm package there is no such thing as clustering but in the git repo, the clustering is working correctly.

  	// Configuration for the Timeline
  	var defaultOptions = {
  		stack: false,
  		maxHeight: 800,
  		height: 150,
  		type: 'point',
  		groupOrder: 'content',
  		cluster: {
  			titleTemplate:
  				'This cluster contains {count} elements',
  			showStipes: false
  		},
  		template: (itemData, element, data) => {
  			if (data.isCluster) {
  				return `<div>${data.content}</div>`;
  			} else {
  				return `<div>${data.content}</div>`;
  			}
  		},
  		moment: function(date) {
  			return vis.moment(date).utc();
  		}
  	};

Unknown option detected: "cluster" in 

options = {
  cluster
}

Perhaps it was misplaced? Matching option found at: 
options = {
  configure: {
    filter
  }
}

Could you update the npm package along with the updates on the git repository or at least keep a version on npm that can run all the examples that can be found in : https://github.com/visjs/vis-timeline/tree/master/examples/

Thank you and keep going your library is very nice 🥇

When zoomKey: '' and verticalScroll: true, scrolling will zoom in/out vertically via rangechange and will also scroll up/down on the groups.

WORKAROUND: set preferZoom: true in the timeline config options.

A good solution for this would be to add preferZoom in documentation and default preferZoom to true on timeline init.

On a clean clone of the repo, running the default test script (npm run test) throws this error:

C:\dev\vis-timeline\lib\timeline\component\css\dataaxis.css:2
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
^

SyntaxError: Unexpected token .

We need to fix the importing of CSS files.

Thanks for this great component. I suggest localize the delete button title attribute, I see that is hard coded on the following line:

see visjs/vis-network#1

While @yotamberk is working on #5 i thought I could start adopting pull-requests from vis one by one:

...
yotamberk/timeline-plus#37
yotamberk/timeline-plus#36
yotamberk/timeline-plus#16
yotamberk/timeline-plus#15
yotamberk/timeline-plus#12
yotamberk/timeline-plus#3
yotamberk/timeline-plus#1

• almende/vis#4286
• almende/vis#4285
• almende/vis#4274
• almende/vis#4231
• almende/vis#4166
• almende/vis#4153
• almende/vis#4143
• almende/vis#4117
• almende/vis#4115
• almende/vis#4110
• almende/vis#4098
• almende/vis#4091
• almende/vis#4038
• almende/vis#3940
• almende/vis#3814
• almende/vis#2617

This issue happen on the hiding periods example. These are the steps to reproduce it:

1. Zoom in until periods of 4 hours are showed,

2. Position left border to the initial hour of a day (9:00 AM in the example). You must see like the following image:
   

3. Drag to left and you will see that 8:00 AM is showed, but the timeline was configured to hide periods from 00:00 AM to 09:00 AM .
   

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.

1. open https://visjs.github.io/vis-timeline/examples/graph2d/16_bothAxisTitles.html
2. press "Hide left title" or "Hide right title"
3. Error:

Invalid type received for "title". Expected: object. Received [undefined] "undefined"
Problem value found at: options = {  dataAxis: {    right: {      title    }  }}
22:45:12.941 Graph2d.js:177 Errors have been found in the supplied options object.

Following the issue of vis almende/vis#1699, and thanks to the comments of @frboyer and @JimmyCheng, I have created an Arrow Class to easily draw lines to connect items in the vis Timeline module.

• Repo & Instructions
• Examples

Maybe something like that could be implemented inside the module... however, I quite newbie programmer and I do not know how to implement it. I know that @yotamberk is quite busy nowadays... If someone in the community thinks that could do it, please feel free to use and adapt it.

For the moment, I have managed to create this Arrow Class that can be suitable for many situations.

Congrats for the creation of this community!!

I cannot run test after npm install completed successfully.

$> npm run test

> [email protected] test /home/vagrant/IdeaProjects/vis-timeline
> mocha --exit --require @babel/register

/home/vagrant/IdeaProjects/vis-timeline/node_modules/hammerjs/hammer.js:2643
})(window, document, 'Hammer');
   ^
ReferenceError: window is not defined

• npm version : 6.11.2
• nodejs version: 10.16.2

I can run npm run dist and it build successfully.

Related issue:

• hammerjs/hammer.js#930
• hammerjs/hammer.js#1060

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?

Setting stack: false for groups is not working anymore, is stacking the items anyway:

Working example using vis 4.21.0:
https://jsfiddle.net/justinbeatz/2L0o8dn4/5

Not working example using vis-timeline (master):
https://jsfiddle.net/justinbeatz/92emnv0a/3