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

:loudspeaker: UPDATE 2.19.0

  • NEW! Added nested Items to Groups to show/hide Items from a Group individually. (collapse)

plugin-new-collapse-groups2


:loudspeaker: UPDATE 2.20.0

  • Fix: Minor Adjustment CSS. Added a class for image content of groups.

:loudspeaker: UPDATE 2.21.0

  • Add New language ES :es:

:loudspeaker: UPDATE 2.22.0

  • Added list of nested subgroup items to left side menu
  • Added selected event + Single vertical line items.

:loudspeaker: UPDATE 2.22.1

  • BUG FIX: Items do not apply the defined order.

:loudspeaker: UPDATE 2.23.0

  • Added memory for current state visibility of subgroups
  • Optimization and responsiveness performance improvements.

:loudspeaker: UPDATE 2.24.0

  • IMPORTANT! Correction from previous version 2.23.0

:loudspeaker: UPDATE 2.25.0

  • :sparkles: IMPORTANT! Correction from previous version 2.24.0

plugin-nestedgroups-demo

1 Like

Hi,

I’m making scheduling app for booking items. Is there an option to show all booking under 1 item without making rows for each booking.

I was thinking of using groups for that matter.

2 Likes

Hello @glib,
Thanks for your question.

Let me know if this is what you are looking for:

I hope I have understood your question correctly.
Is this something you need? :slight_smile:

:fire: UPCOMING RELEASE

:pushpin: Related Fields

Just a few days away from launching the related fields feature. You’ll be able to display the values ​​of related fields in item content. This is the most requested feature and will be available next week.

For example: If you are displaying Tasks in the chart and want to display the project title[table: Project], the task status[Option sets: Status], or the assignee name[table: User], you can.

1 Like

Yes exactly that thing :wink:

1 Like

Great @glib :slight_smile:

I sent you a message now.

:fire: UPDATE 2.26.0

NEW: Related Fields and Option Sets.
First impressions of a very important and highly requested feature. Related field and option sets tags are now supported for customizing item content using Content Template. Constant improvements will be made to make this even better.


First version and still in development phase, mapping new fields and data types and improving documentation.


Added a new related field for item content and a default field. If the item value is empty, it uses the value of the Default Item Content.


Tooltip tags for custom template.
You can now use date tags separately for Item Custom Template. Additionally, they inherit the same format defined for tooltips.

2 Likes

:loudspeaker: UPDATE 2.26.1

  • Patch: Just removed 1 line of unnecessary logging code.

El plugin es espectacular, pero tengo una pregunta puedo modificar el campo de color de las tareas para que se muestre respecto a un avance o progreso?

1 Like

Hola @tonopena378
Si entiendo, ¿quieres aplicar el color de la tarea dinámicamente?
Sí, puedes definirlo a través del campo dinámico:
item-bg-color-plugin

¿Era realmente esa tu pregunta?
Si confundí algo y no entendí lo que querías decir, dímelo aquí. :slight_smile:

¡Gracias, muchas gracias por esto! :pray: :sparkles:

1 Like

Me refiero a lo siguiente , yo tengo asignado el color para cada tarea ,pero cada tarea tiene un progreso en avance, hay alguna forma de mostrar el color conforme al avance,si mi tarea tiene un avance del 50% puedo mostrar el color en la barra en un 50% y el restante en otro color ?

1 Like

@tonopena378
Hice ahora un ejemplo para mostrárselo.

Por favor, ¿es esto lo que quieres decir?

@tulioportela Claro a eso me refiero

1 Like

Entiendo…
Gracias por tu paciencia @tonopena378 :slight_smile:

Esta característica no está completamente terminada, pero como puedes ver en la imagen, está en desarrollo y es posible que pueda incluirla en la próxima actualización. Predigo que la próxima actualización será este fin de semana.

1 Like

:loudspeaker: UPDATE 2.27.0

NEW: Added Progress Bar for Template with Auto Calculation via State.
This feature visually displays a progress bar on the item when the content is defined in the Custom Template.

demo-plugin-gantt-timeline-progress
Even if enabled, the progress bar will only be displayed when using Custom Template. Otherwise, this feature will have no effect. The defined field must be of type number.


The plugin provides the result of the calculation via State New Progress:



Progress calculated logic:

  • 0 if the item has not yet started;
  • 100 if the item has passed its due date;
  • Percentage proportional to the time elapsed between start and end.

When?

  • An item is moved/dragged or the start or end date is changed.

If you were to reproduce the calculation expression made by the plugin to obtain the result, it would be similar to:

(Current date/time - This Gantt/Timeline Moved Item's Start Date) / (This Gantt/Timeline Moved Item's End Date - This Gantt/Timeline Moved Item's Start Date) * 100

However, this expression is in Days and will need to be adapted to your use case and unit (day, hour,…). The updated calculation value available via State is just to simplify your work by avoiding configuring advanced expressions in the Workflow. It is optional, use it if you want. You can simply build your expression however you want.

3 Likes

:loudspeaker: UPDATE 2.28.0

Performance: Optimized code to improve performance and user experience.

Item Positioning: Fixed repositioning issues when moving items in the chart, enable the Full Height option.

Visual Fix: Fixed the bug where, when hiding groups in the chart, the last item (closest to the footer) would be 1px below the border and would be cut off.

NEW: Full Height Responsiveness Option
New option to automatically adjust the chart height, taking up all available space on the page.

plugin-demo-gantt-timeline-full-height

ADD Subgroup Item Style Customization: Customization options for the style of subgroup items.

ADD Minor Axis Label “Today” Style: Option to set the text color and background of “Today” in the Axis Label Minor.

NEW: Group Divider Background: New option to apply a default background to the line that divides each group, allowing you to visually highlight the separation between groups in the chart.

plugin-demo-gantt-timeline-bg-divider

1 Like