ka215/jquery.timeline

You can easily create the horizontal timeline with two types by using this jQuery plugin.

jquery.timeline's Issues

BCE/CE Date Ranges

Can you add the ability to use BCE dates?

eg. setting the startDatetime : '-3200' just results in the year 3200 CE and not -3200 BCE.

Also, options to set the height of the bars or an option to match the rowHeight value.

Full documentation

Please, update documentation for version 2.0.

How to use it?

Tnx

npm: npm i jquery-timeline

Hi dear @ka215, how are you?

I'm trying to use the plugin as a module in my project, but when I execute the command (npm i jquery-timeline), that operation download another plugin, not yours, do you knew about it?

This is the plugin that it command download
https://github.com/d-ashesss/jquery-timeline

Have a nice day,
Regards.

how i can create smaller time scale like (seconds)

i working on an app for tracking small time scales (seconds) and i found your plugin and it is really awesome ,but the problem is my event is overlapped on each others because ( as i imagine time deference between them is seconds)

Plugin breaks without dot in html even when others add via javascript

I have an issue where the plugin works fine whether I add data points via html or javascript, but even if I add datapoints via javascript unless my page includes at least one point in the html the plugin breaks and doesn't work correctly. Currently fixed by adding a datapoint outside the time range of the data points I wish to actually display.

zoom in and zoom out in v1

function to create zoom in and zoom out

HTML:
<button id="one" type="button" value="4">zoom in</button> <button id="two" type="button" value="4">zoom out</button>

Script:
$('#one').click(function() { ab+=4; $("#myTimeline").timeline('render', {minGridPer:ab}); }); $('#two').click(function() { ab-=4; $("#myTimeline").timeline('render', {minGridPer:ab}); });

Doesn't work (events are not clickable)

Hello,

I use:

1. Google Chrome
2. Default libraries from examples

But timeline work not correct.

In console have no errors.

Example: https://vvt.maxmg.com/assets/uploads/timeline

Events not shown when an inline javascript is disabled

When an inline javascript is disabled using the content security policy, events on the timeline are not shown.

In the console, an error message mentioning that the resource is blocked due to the page configuration. Seems that the code below in the plug-in is causing this issue.

jquery.timeline.min.js:10:13215: new Function("return ".concat(t))

My system is needed to be configured to block inline javascript using content security policy for security purpose.

The version I am using is 2.0.0.

Thanks.

addEvent ID generation

Thanks for the library!

I'm running into an issue using 'addEvent' with custom eventIds. It seems that the library generates its own IDs even if I do supply my own, which makes it difficult to use the relations to connect them.

The code in question

addEvent : function( events, callback ) {
      return this.each(function(){
        var $this       = $(this),
            data        = $this.data('timeline'),
            eventNodes  = ( new Function( 'return ' + data.timeline.text() ) )(),
            incrementId = 1,
            _ids        = [ incrementId ];
        // add events
        if ( events.length > 0 ) {
          $.each(eventNodes, function( i, evt ) {
            _ids.push( Number( evt.eventId ) );
          });
          incrementId = Math.max.apply( null, _ids ) + 1;
          $.each(events, function( i, evt ) {
            evt['eventId'] = incrementId;
            incrementId++;
            eventNodes.push(evt);
          });
          data.timeline.text( JSON.stringify( eventNodes ) );
        }

Note that it runs through all the event IDs, adding them to the _ids variable, and then it uses that list to generate an event ID that is one higher than the maximum.

So if I had two 'addEvents', with custom IDs 1 and 2 respectively, the system would really start the IDs at 3 and 4.

I think there should be some sort of check for a custom event ID before relying on system generation.

Thanks!

jQuery.Deferred exception: Property "rulers"

jQuery.Deferred exception: Property "rulers" cannot set because undefined or invalid variable. TypeError: Property "rulers" cannot set because undefined or invalid variable.

i18n not easy to use in multilanguage project

Hi
i tried and it's work fine

   $("#myTimeline").timeline({
    i18n : {
    month: { "Jan.": "Janvier", "Fév.": "Février", "Mars": "Mars", "Avr.": "Avril", "Mai": "Mai", "Juin": "Juin", "Juillet": "Juillet", "Août.": "Août", "Sept.": "Septembre", "Oct.": "Octobre", "Nov.": "Novembre", "Déc.": "Décembre" },
    day: { "Lu": "Lundi", "Ma": "Mardi", "Me": "Mercredi", "Jeudi": "Jeudi", "Ve": "Vendredi", "Sa": "Samedi", "Di": "Dimanche" },
    ma: [ "vorm.", "nachm." ]
  },

but why not extend the object and use lang files ... with something about like this
!function(a){a.fn. timeline.i18n.de={month:[ .......
or

(function($) {
      timeline.i18n = $.extend(true,  timeline.i18n, {
        'fr_FR': { ..................

this will be more convienient

Can't modify meta date format

I tried to use the datetimeFormat option to change how it appears but it would always default back to what was hardcoded into the en-US.json file, under format.meta. A hard change there finally allow modification of the format.

Scale Milliseconds

Hello,

when I set the scale to milliseconds, I get the following error:
TypeError: Property "grids" cannot set because undefined or invalid variable.

Is there any parameter I have to set in the settings?
I tried a few, but nothing worked.

Thank you!

Issues in Options: showHeadline & httpLnaguage

showHeadline is always showing the Headline, independently of the option passed.

There's a typo in the options that may create some confusion/issues, regarding language setup: httpLnaguage.

Wrong year displayed in header

When displaying the year on the top ruler the value is one year less then the data. The bottom ruler displays the correct year.
By using the browser debugger, you can see that the "year-2018" element has the value "2017".

Getting syntax error on line 1089

I'm likely doing something wrong but I keep getting a syntax error on line 1089 in timeline.js...

Any suggestions?

Automatically set rows

Hi,

Thanks for the great timeline! One Question: Is it possible that events which are generated from a database are automatically placed in separate rows if they have the same or overlapping dates?

Thanks a lot and regards,
Filburt

Set date-time range

Hi,

Is there a proper way of setting the start and end date-time range on the timeline?
Now I use the combinations of scale, startDatetime, range options but it would be awesome if the start and end dates could be set dynamically in the browser page, where the tool is included.
It's already a great tool and easy to use.

Thanks for your answer in advance,
Gab

Multiple relations between nodes

First, thank you for this great software and visualization for timelines. It works great and looks wonderful!

I'm however wondering (for a project) if it is possible to create multiple relations between the nodes. I can not explicitly find this option in the document. I've also tried just adding it in the config, and played around with various settings without success.

Would it be possible to create multiple connections, so I that you could essentially visualize 'joins' and 'splits' in the timeline? If this is not out of the box possible, I'll be happy to try to add it to your software, but for this it would help if you can point me to the relevant functions for determining and drawing the relations for the nodes (it would save a lot of searching and digging)

How to decrease width for weeks in ruler

I sometimes find that the width used for displaying weeks are much wider than necessary - causing the scrollbars and the whole view to be rather wide. Is there a way to limit the width for weeks and thereby make a less wide visualization/scrollbar? I know there is a minimum setting, but what about a maximum setting - or som rule for calculating the width?
The example below would display a lot better if the weeks where much smaller.

Available on npm?

I have seen the package.json but could not find it on npmjs.com
Is there any chance to make this downloadable through npm?

how to update startDatetime ?

<script> $(function () { $("#myTimeline").timeline({ type: 'point', scale: 'months', startDatetime: '2017-1-2', rows: 5, range:2, rowHeight:60, rangeAlign: 'center' }); $("#myTimeline").timeline({ startDatetime: '2017-2-2', }); //submit(); }); </script>

It's don't work .and give me an error .
jquery-3.2.1.min.js:2 Uncaught TypeError: Cannot read property 'forEach' of undefined
at r (timeline.min.js:219)
at HTMLDivElement. (timeline.min.js:760)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.init (timeline.min.js:737)
at r.fn.init.e.fn.timeline (timeline.min.js:1078)
at HTMLDocument. (index2.html:163)
at j (jquery-3.2.1.min.js:2)
at k (jquery-3.2.1.min.js:2)

addEvent causes entire timeline refresh

Hey - just a quick one

I've noticed when trying to add events using addEvent it causes the entire timeline to flash as the timeline is reloaded/refreshed

Is there a nicer or cleaner way to do this?

I'm currently pushing items onto an existing timeline instance like this (with items being an array of bar objects)

$('#timeline').Timeline('addEvent', items);

This causes the timeline to blink as the entire thing is reloaded - I'm looking to push items on as and when they become available so the blinking isn't great from a user perspective (as i may ad an item every few seconds or so)

Any ideas?

cannot change events' height

If options.rowHeight is changed compare to the default value, the height of the events remains unchanged.
It seems that the height of the events is based only on the "Default" options and not on the given options (it is not recalculated). It therefore remains equal to 44 = Default.rowHeight - Default.marginHeight * 2 = 48 - 2*2

jquery.timeline/src/timeline.js

Line 131 in 2e9de82

height : Default.rowHeight - Default.marginHeight * 2,

Timeline bars overlapping

Currently have the following 4 lines

<li data-timeline-node="{ start:'2018-8-30 03:04', end:'2018-8-31 03:04',content:'adada21123' }"></li>
<li data-timeline-node="{ start:'2018-8-30 03:04', end:'2018-9-2 03:04',content:'adadad' }"></li>
<li data-timeline-node="{ start:'2018-8-30 06:04', end:'2018-8-31 03:04',content:'ddd' }">Event Label</li>
<li data-timeline-node="{ start:'2018-8-30 03:04', end:'2018-9-2 03:04',content:'ddd' }">Something is happening</li>

They are all overlapping the same area, any value i need to set to indicate i want them too stack?

Running inside an ASP.net MVC app.
Thanks!

Click on space on timeline to add new event

Hi,

I want to use the timeline in order to manage a calendar of events. What I would like to do is to be able to click on the empty space on the timeline to add a new event (via a pop up)

Is there any way of hooking up a click (or select/drag) event on the empty timeline which would give the date(s) selected in order to create a new event?

Relation lines do not draw correctly if minGridSize is anything other than 30

Specifically, horizontal positioning is incorrect. Line is positioned too far left if minGridSize is less than 30, and too far right if minGridSize is greater than 30.

Relation line is not shown in Chrome

Hi, I found your timeline project today, thanks for sharing this and the easy-understanding document.
So here is my problem, I can display relation lines in IE (version: 11.0.9600.18738), but not in Chrome (version: 60.0.3112.78). Is there something wrong?

date range with same day not showing

thank you for the plugin firstly

im using your timeline plugins for leave system
https://prnt.sc/o7a6id

<li data-timeline-node='{"row":"1","start":"2019-02-01 00:00","end":"2019-02-01 00:00","bgColor":"#ffc107","color":"#FFFFFF","label":"Annual Leave"}'></li>

because some people only apply a day leave, start date and end date are the same, but it do not showing out, please help.

Issue with a particular day

With the grid set up with months and days the 27th October is taking 2 days of the grid and pushing a day all the events afterwards.

https://imgur.com/a/lcie3r6

Thanks

Hours off by one issue

Using Strings such as

"end" : "2017-06-08 15:30:00+00:00",
"start" : "2017-06-08 10:15:00+00:00"

is displaying events at

"end" : "2017-06-08 16:30:00+00:00",
"start" : "2017-06-08 11:15:00+00:00"

I think this might be a timezone issue?

Can't understand -1 in Line 1109 for calculating the end date of the timeline

In line 1103, you've told me that you want to count the end date of the timeline.

But on the month case(Line 1109), I can't understand that you want to subtract 1 after adding the range.

That cause me a bug as follow, you can see that the events will stop at the end of the September.

The top two events' end date is 2222-12-31(We wanted to make it looks like infinity, so we set that date).

The bottom four events' end date is 2017-10-01, so we expect that the bars will reach the first day of October.

When I delete that '-1' code, it will act what I need. So I'm a little curious about why you wanted to do that.

Sincerely,

OtomeSound

TypeError: t.resolve is not a function

I am having problems to incorporate your library into a project made with ionic 3.
I receive the following error: TypeError: t.resolve is not a function.

apparently the problem is with polyfills

r@http://localhost:8000/build/polyfills.js:3:7745 F</l</t.prototype.scheduleTask@http://localhost:8000/build/polyfills.js:3:15480 F</c</r.prototype.scheduleTask@http://localhost:8000/build/polyfills.js:3:11405 F</c</r.prototype.scheduleMicroTask@http://localhost:8000/build/polyfills.js:3:11657 f@http://localhost:8000/build/polyfills.js:3:20198 x</t.prototype.then@http://localhost:8000/build/polyfills.js:3:22554 setDriver@http://localhost:8000/build/vendor.js:239315:44 LocalForage@http://localhost:8000/build/vendor.js:239104:14 [4]<@http://localhost:8000/build/vendor.js:239377:22 s@http://localhost:8000/build/vendor.js:236592:584 e@http://localhost:8000/build/vendor.js:236592:755 @http://localhost:8000/build/vendor.js:236592:773 @http://localhost:8000/build/vendor.js:236592:38 @http://localhost:8000/build/vendor.js:236592:277 @http://localhost:8000/build/vendor.js:239384:30 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 @http://localhost:8000/build/vendor.js:236114:70 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 604@http://localhost:8000/build/main.js:4059:74 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 599@http://localhost:8000/build/main.js:4016:70 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 webpackJsonpCallback@http://localhost:8000/build/vendor.js:26:23 @http://localhost:8000/build/main.js:1:1

Multiple timelines on single page and rangeAlign to eventId

If we use two timelines on a single page the first one renders correctly but the second one renders with the following problems:

• The pointer doesn't show up;
• rangeAlign set to current doesn't work (the timeline defaults to left alignment);
• Previous and next arrows shows in the bottom of the timeline instead of the middle;
  When we try to use rangeAlign to eventId the timeline defaults to current, is there a way to align the timeline to an eventId or to the first timeline element by default?
  Thanks

Donating

Hi,
I cant to donate (from card and from PayPal wallet):
https://i.imgur.com/Z5nK9lR.png

Do you have another methods to pay?

Dynamically add to Sidebar/rows

Hi,

Is it possible to add & remove items to the sidebar on the fly (with a corresponding row), kind of like filtering the display based on the selection in the sidebar?

I'd like to be able to use jquery to pull new data from a sql db based on what is selected in the sidebar, maybe even only displaying 1 row but have 50 items in the sidebar to select from.

Example of a sidebar items,

Cars
Bikes
Trucks
Vans

Thanks!

render

render must be given with an object.

$("#myTimeline").timeline('render', {minGridPer:ab});

please add it to Documentation

Label for each point

Hello,

Is there any way to add labels for each point? Have added a screenshot to show what I am trying to achieve. Is this feasible and if so, what configurations do I need to choose to create it?

Thank you.

Zoom in ?

Hello,

I'm trying to implement the timeline to monitor events with small time differences.
For exemple, I may have such a sequence.

I tried to modify .css but it doesn't fit.

Thank you,

Vincent / From France

    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:00',end:'2018-01-24 09:00:00',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:02',end:'2018-01-24 09:00:02',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:46',end:'2018-01-24 09:00:46',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:55',end:'2018-01-24 09:00:55',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:04',end:'2018-01-24 09:01:04',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:23',end:'2018-01-24 09:01:23',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:39',end:'2018-01-24 09:01:39',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:48',end:'2018-01-24 09:01:48',content:'' }"></li>

event not show in safari

https://ka215.github.io/jquery.timeline/index.html
can not see the event in the timeline ?...
Safari Version 10.1.1 (12603.2.4)

Unable to see BS popover

I don't see the popover in the demo and can't get it to work on my local set up.

Row Labels

This is a great timeline project. Is there a way to add row labels to increase its functionality?

Highlight weekends on ruler

Hi, I have a timeline and have the scale set as 'day' - I was wondering how I could possibly highlight weekends (Saturday and Sunday) on the ruler? (bold / different background etc)

Or conversely, highlight workdays?

Is there any way to achieve this?

more than one event with the same date range (only showing one)

Hello, thank you for this amazing plugin firstly.

I have one case where I can have more than one event at the same time range,
Ex.

<li data-timeline-node="{'start':'2012-03-01 00:00','end':'2012-12-31 00:00','row':1,'label':'Element 2','content':'The content of Element 2'}"></li>
<li data-timeline-node="{'start':'2012-03-01 00:00','end':'2012-12-31 00:00','row':1,'label':'Element 3','content':'The content of Element 3'}"></li>
<li data-timeline-node="{'start':'2012-03-01 00:00','end':'2012-12-31 00:00','row':1,'label':'Element 4','content':'The content of Element 4'}"></li>

This way only shows the last element (Element 4), the others must be below of it. I need to know if there is any solution for this, do I have to configure something in the plugin?

My team and I through thinking about a solution, which is to count all the events with the same range time and then add other lines to the list (sidebar). And put these new events on those lines. These new lines will not have a category name.

But we think this is not the best solution.

Before...

After...

Thank you very much!
Have a nice day.

Tooltips are not visible for the first row

When playing with the demo of jQuery.Timeline at https://ka2.org/jqtl-v2/index.php when you toggle to display tooltips then tooltips for the first row are not displayed. Tooltips for any other rows are.

Default settings for presented timeline

Hello, first of all thank you for all the hard work on the project.

I read all the GH pages, jqueryscripts.net and your blog article on ka2.org but i did not found anything about default configuration and how to get the timeline on screenshot. So i wonder if you could help me out.

Here is what i am talking about:

My timeline looks like this:

Here is the configuration for the li element:

<li data-timeline-node="{ start:'2019-02-18 10:00',end:'2019-02-18 13:00', row:1, bgColor: '#0BB9C6', content:'Event Here' }"> </li>

And for the timeline options:

$("#myTimeline").Timeline({
     // options here
     rows: 6,
     startDatetime: 'currently',
     range: 12,
 });

So I am missing left content with row labels and header with months and years titles.

Thank you very much for the anwer! :)

decades centuries milleniums

Would like to set date range in decades centuries millenniums

Can't set "quarter-hours" as scale

Hi,

I'm trying to set the "scale" option to "quarter-hour" on the widget.
It seems impossible for the widget to handle it. It always writes the following error on the console: "Property "grids" cannot set because undefined or invalid variable."

here are the given parameters :

{"type":"bar","startDatetime":"2020-01-05T00:00:00.000Z","scale":"quarter-hour"}

I also tried to set the "scale" option to "minute", it works well, so I don't think it's a performance issue.
I thought it was because no "endDatetime" was provided, so I tried to set it at "2020-01-05T12:00:00.000Z" it doesn't work neither.

Does anyone have encountered and fixed this issue ?

Thank you very much for the time given to my issue,

Have a nice day,

Unable to add new event. Cannot read property 'push' of undefined.

Following the README, I am unable to add events via

`$("#myTimeline).timeline(

    "addEvent",

    [{startDate:..}],

    function(){}
);`

Could you at least show an example for the same?

Error when using array in arguments

Hi,

I try to update an event in this way:

$("#myTimeline").timeline({ startDatetime: '2017-05-28', rangeAlign: 'center' }).timeline('updateEvent', [ {eventId:1, row:4, label:'Updated Event', bgColor:'purple', color:'pink'} ]);

But then I get the following error message:

jQuery.Deferred exception: s is undefined updateEvent ...

I think it has to do with the array definition. Any idea?

Thanks for support,
Filburt