Giter Site home page Giter Site logo

ka215 / jquery.timeline Goto Github PK

View Code? Open in Web Editor NEW
236.0 17.0 43.0 11.83 MB

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

License: MIT License

JavaScript 97.03% Batchfile 0.09% HTML 0.32% SCSS 2.56%
timeline jquery horizontal plugin es6

jquery.timeline's Introduction

  jQuery.Timeline V2

Bar Type Point Type Mixed Type Switch Theme

You are able to easily create two types of horizontal timeline with this jQuery plugin.

Report bug · Request feature · Blog

Build Status GitHub release GitHub All Releases npm download Packagist


introduce-sunorhc-timeline

Table of Contents

Quick start

Several quick start options are available:

  • npm: npm i jq-timeline
  • bower: bower install jq-timeline
  • Download the latest release.
  • Clone the repository: git clone https://github.com/ka215/jquery.timeline.git
  • Load via CDN:
<link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing compiled and minified variations. You'll see something like this:

jquery.timeline/
└── dist/
    ├── jquery.timeline.min.css
    └── jquery.timeline.min.js

We provide compiled and minified CSS and JS (jquery.timeline.min.*). When deployed by using task for develop, generated source maps (jquery.timeline.*.map) are available for use with certain browsers' developer tools.

Usage

Include the installed files into your html:

<link rel="stylesheet" src="/path/to/jquery.timeline.min.css">

<script src="/path/to/jquery.timeline.min.js"></script>

Note: You should include the jquery core script before including this plugin javascript file. Also we recommend that would like to add defer attribute into script tag.

Bind this plugin in the scope had imported the jQuery:

$('#myTimeline').Timeline()

Supported browsers

jQuery.Timeline version 2.x supports the following browsers:

PC Mobile
Chrome Firefox Safari IE Edge Opera Android iOS Safari
Ok Ok Ok Non-compliant Ok Ok Ok Ok

Unfortunately as for the Internet Explorer etc., several methods of this plugin does not work because JavaScript implementation of browser is too immature. Please note that we are not go to support for these legacy browsers in the future.

Tutorials

The tutorial as a detailed usage of jQuery.Timeline is released here.

Documentation

jQuery.Timeline's documentation, included in this repository in the root directory, is built with ESDoc and publicly hosted on GitHub Pages at https://ka215.github.io/jquery.timeline/. The docs may also be run locally.

Documentation for previous releases

Example as demonstration

Contributions

Your donations for plugin development will help us.

Donate URL: https://ka215.github.io/jquery.timeline/donation.html

Creators

ka2 (Katsuhiko Maeno)

Contributors

Copyright and license

Code and documentation copyright 2011-2020 the ka2. Code released under the MIT License.

jquery.timeline's People

Contributors

jipexu avatar ka215 avatar vphantom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery.timeline's Issues

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.

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

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.

default

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

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)
screenshot

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.

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?

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?

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>

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?

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

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!

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.

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.
Timeline Week display

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?

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!

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.

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...
Captura de pantalla de 2019-07-01 12-46-04

After...
Captura de pantalla de 2019-07-01 12-46-14

Thank you very much!
Have a nice day.

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

Timeline Ruler wrong - Html

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.
2019-08-26 10_24_51-ProductCenter ODA

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?

image

Running inside an ASP.net MVC app.
Thanks!

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:

Timeline

My timeline looks like this:

My Timeline

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! :)

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)

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.

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!

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

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

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

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

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?

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.

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,

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?

Row Labels

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

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)

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}); });

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.