[New Plugin] Gantt / Timeline Chart - vis.js

Hello everyone!

At the beginning of last year I used a similar plugin. But unfortunately, it was soon removed from the marketplace. So, I tried to study it, learn a little bit to try to develop it and I was very happy with the result. Why not make it available to other people who also need to solve problems similar to mine? I hope this plugin can be useful and help them, just as it has been for me.

  • Chart are made up of items, which represent tasks and/or events. Each item has properties such as start date, end date, label and other relevant information.

  • View your tasks/events independently or grouped, according to your needs. The plugin is designed to work perfectly without the need to configure groups.

  • Configure the display on different time scales, such as days, weeks, months or years, allowing viewing at different levels of granularity.

  • Create custom templates to display the content of the items, including additional information/data, allowing for more complete formatting.

  • and more…

:sparkles: EVENTS

A Item Is Selected
Occurs when an item is selected by the user, allowing the user to highlight or manipulate the selected item.

A Item Is Moved
Fired when an item is moved to a new position or date, allowing the user to update the item’s position or date.

A Item Is Removed
Occurs when an item is removed, allowing the user to perform actions such as updating the database or interface.

A Gantt/Timeline Viewable Range Changed
Fired when the visible range changes, such as when zooming or scrolling, allowing dynamic adjustments to the view.

A Item Is Double Clicked
Occurs when an item is clicked twice quickly, allowing the user to open details or edit the item.

A Milestone Is Selected
Occurs when an item Milestone is selected by the user, allowing the user to highlight or manipulate the selected item.

A Milestone Is Double Clicked
Occurs when an Milestone is clicked twice quickly, allowing the user to open details or edit the item.

A Milestone Is Moved
Fired when an Milestone is moved to a new position or date.

:sparkles: ACTIONS

Fit All Items Into View
Automatically adjusts the zoom and position to ensure that all items are visible.

Reset Visible Range To Initial Dates
Resets the visible range to the configured initial dates, ideal for resetting the view.

Scroll To Item
Scrolls to a position where a specific item.

Scroll To Milestone
Scrolls to a position where a specific item Milestone.

Scroll To Date
Scrolls to a specific date, centering it in the view.

Set Gantt/Timeline Viewable Range
Sets a specific date range that should be visible, adjusting the zoom and position as needed.

Zoom In and Zoom Out
Increases or decreases the zoom level, allowing you to see more details or a wider view of items.

Move Left and Move Right
Moves the view left or right, allowing horizontal navigation.

:sparkles: STATES

Selected Item, Moved Item, Moved Item Start Date, Moved Item End Date, Moved Item Group, Double Clicked Item, Viewable Range Start, Viewable Range End, Removed Item.


:link: Demo
:link: Plugin


:loudspeaker: UPDATE 2.3.0

  • Add image type field in the Template for Custom Content
  • CSS for better content customization.

gantt-timeline-230


:loudspeaker: UPDATE 2.4.0

  • Add New language PT-BR :brazil:
  • Add Custom Axis Date Labels
Custom Formats
Token Output
Month M 1 2 … 11 12
Mo 1st 2nd … 11th 12th
MM 01 02 … 11 12
MMM Jan Feb … Nov Dec
MMMM January February … November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 … 30 31
Do 1st 2nd … 30th 31st
DD 01 02 … 30 31
Day of Year DDD 1 2 … 364 365
DDDo 1st 2nd … 364th 365th
DDDD 001 002 … 364 365
Day of Week d 0 1 … 5 6
do 0th 1st … 5th 6th
dd Su Mo … Fr Sa
ddd Sun Mon … Fri Sat
dddd Sunday Monday … Friday Saturday
Day of Week (Locale) e 0 1 … 5 6
Day of Week (ISO) E 1 2 … 6 7
Week of Year w 1 2 … 52 53
wo 1st 2nd … 52nd 53rd
ww 01 02 … 52 53
Week of Year (ISO) W 1 2 … 52 53
Wo 1st 2nd … 52nd 53rd
WW 01 02 … 52 53
Year YY 70 71 … 29 30
YYYY 1970 1971 … 2029 2030
YYYYYY -001970 -001971 … +001907 +001971
Note: Expanded Years (Covering the full time value range of approximately 273,790 years forward or backward from 01 January, 1970)
Y 1970 1971 … 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Era Year y 1 2 … 2020 …
Era N, NN, NNN BC AD
Note: Abbr era name
NNNN Before Christ, Anno Domini
Note: Full era name
NNNNN BC AD
Note: Narrow era name
Week Year gg 70 71 … 29 30
gggg 1970 1971 … 2029 2030
Week Year (ISO) GG 70 71 … 29 30
GGGG 1970 1971 … 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 … 22 23
HH 00 01 … 22 23
h 1 2 … 11 12
hh 01 02 … 11 12
k 1 2 … 23 24
kk 01 02 … 23 24
Minute m 0 1 … 58 59
mm 00 01 … 58 59
Second s 0 1 … 58 59
ss 00 01 … 58 59
Fractional Second S 0 1 … 8 9
SS 00 01 … 98 99
SSS 000 001 … 998 999
SSSS … SSSSSSSSS 000[0…] 001[0…] … 998[0…] 999[0…]
Time Zone z or zz EST CST … MST PST
Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they do work if you are using a specific time zone with the moment-timezone addon.
Z -07:00 -06:00 … +06:00 +07:00
ZZ -0700 -0600 … +0600 +0700
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1,36001E+12

Any questions?
Count on me for whatever you need. I'm here! :)
3 Likes

:loudspeaker: NEW UPDATE: Milestones.

Milestones are significant moments in a project. This new content type add represents the Milestones, you can use any data type you want. This Item Milestone is displayed in a diamond shape and does not have an end date.

plugin-gantt-timeline-milestone

A Milestone Is Selected
Occurs when an item Milestone is selected by the user, allowing the user to highlight or manipulate the selected item.

A Milestone Is Double Clicked
Occurs when an Milestone is clicked twice quickly, allowing the user to open details or edit the item.

A Milestone Is Moved
Fired when an Milestone is moved to a new position or date.

Scroll To Milestone
Scrolls to a position where a specific item Milestone.

:loudspeaker: NEW UPDATE 2.2.0

  • Fixed the conflict of the Double Clicked Event when recognizing the item type.
  • Added the option to show or hide the Milestone title on the graph. Good option to make the visual cleaner by displaying only the diamond shape.
    milestone-title-plugin-gantt-timelie

:loudspeaker: NEW UPDATE 2.3.0

  • Add image type field in the Template for Custom Content
  • CSS for better content customization.

gantt-timeline-230

1 Like

:loudspeaker: UPDATE 2.4.0

  • Add New language PT-BR :brazil:
  • Add Custom Axis Date Labels

:loudspeaker: UPDATE 2.5.0

  • Fix “Allow Zoom” option.

:loudspeaker: UPDATE 2.6.0

  • Add New language FR :fr:
  • Min/max Height and Width for Items
  • Align Vertical Item
  • New Feature “Always Draggable Item” - Drag/move Items directly, without having to select them.

:loudspeaker: UPDATE 2.7.0

  • Ability to set up to 2 values ​​for contents displayed in the Tooltip.
  • Formatting options, in case any of the values ​​are of the “date” type.

screen-tooltip-startdate-enddate

screen-tooltip-options

:loudspeaker: UPDATE 2.8.0

  • Add Event/State for Button in Template - Custom Content Item.

You can include a button in the item content using the Custom Template. To do this, you need to apply the “gtp-custom-btn-item” class to the element so that the Workflow Event takes effect.

demo-plugin-btn

:loudspeaker: UPDATE 2.8.2

  • Bug Fix - Adjustment of Items on page load + Adjustment of Items when dragging/moving.

See BEFORE and AFTER:

:loudspeaker: UPDATE 2.9.0

  • Custom Style Button Remove
    demo-btn-style

  • Add Show/Hide Groups
    demo-showgroups

:loudspeaker: UPDATE 2.10.0

Bug Fix - Order of Items.


:loudspeaker: UPDATE 2.11.0

Add New Option: Order + Fix order.


:loudspeaker: UPDATE 2.12.0

IMPORTANT UPDATE - Fixed property name in options chart.


:loudspeaker: UPDATE 2.13.0

Bug Fixed - Initial Axis start/end date on page load.

:loudspeaker: UPDATE 2.14.0

Added options for Events (scale and date formatting or hours, minutes,…)


:loudspeaker: UPDATE 2.15.0

Improved snap, scale and step options.

This post is just to show you a little more about the showcase plugin Gantt / Timeline Chart - vis.js and how it can help you in practice.


:arrow_forward: Best Bubble.io Plugin for Gantt Charts and Timelines!

It’s great to know that people like you have a positive opinion about the plugin and even better to know that it has been useful.

I’m very happy with this, Matt.
Much appreciate! Thanks, @mattblake :raised_hands:


:link: Demo
:link: Plugin Page

1 Like

Great product.

Can you provide a tutorial in order to help plan the tables and use with the template?

I have the data in a normatized structure (task table, task type table and user table). How could I represent a task with the type icon, user name and user picture?

1 Like

Hey @gilberto.mendes

Thanks for the comment! :smiley:
I’m glad you liked it and that it might be useful to you. Thank you!

For now, the plugin doesn’t support fields from related tables, unfortunately.
But it will be available very soon. It will be a great improvement to be able to work smoothly with data from fields from tables related to the main Type of Content.

With Bubble’s flexibility, there are several ways and approaches to achieve the same goal. To get around this, a suggested alternative is to create a field in the table used in the Type of Content, which is of the same type [text, number, date or image] as the related field to store the value of the field from the related table.

A simple example applied to your scenario.

Your current structure:

New structure:


To keep the values ​​up to date, you can configure backend workflow or triggers.

When a User’s name or picture changes, update all tasks assigned to that user
When a Task Type’s name or icon changes, update all tasks of that type
When the field assign to user change, update the field assign to user picture or assign to user name
When the field task type change, update the field task type name or task type icon


Please tell me if I understood your situation correctly and was able to clarify your doubts.

We can dive deeper into this, analyze your application better, and define an approach that makes sense. I can contact you via DM so we can talk further. :facepunch:

Thanks for your answer. It’s clear now. This plugin will be a huge success.

I will go on using the user name on a redundant field, making sure the changes on on user field reflect the user name field.

Regarding the images, i think that this approach can use a lot of resources/bandwidth, so i will not use them right now.

Thanks again for the time you put in the answer. I will DM you in the future in case of any further question.

1 Like

Hey @gilberto.mendes

I’m glad I was able to help you and clarify this, my friend.
That’s great! :wink:

Let’s talk!
Feel free to call me whenever you need!!!

Thank you very much for the positive words.
Thank you! :facepunch:

:loudspeaker: UPDATE 2.17.0

  • FIX: First load page

plugin-demo-load

  • NEW: Scroll to Group Button icon

plugin-demo-scroll-to-group-button

  • NEW: Tooltip on Update Item Time (Real time)

plugin-demo-tooltip-on-update


  • NEW: Add New Group Content (Image)

:loudspeaker: UPDATE 2.18.0

  • BUG FIX: Editable Time Increment and Snap + Other minor adjustments.