Timeline Chart Component

Overview

  • To visualize the progress of any task/delivery at any particular time.
  • Helps to visualize the timelines from the project management perspective.
  • Can be used to create the Gantt Chart view on Appian for any time-bound activities.
  • Can be used to represent the different events associated with a customer or any other entity for an organization to view in graphical view.

Key Features & Functionality

  • The data items can be represented on a single date, or have a start and end date (a range).
  • Move and zoom in on the timeline by dragging and scrolling in the Timeline.
  • Items can be created, edited, and deleted in the timeline.
  • The time scale on the axis is adjusted automatically and supports scales ranging from milliseconds to years.
  • It supports 2 types of data
    • Items - containing a set of items to be displayed in time.
    • Groups - containing a set of groups are used to group items together.
  • It has configuration options to provide which helps to customize the timeline as per need.
Anonymous
Parents
  • Does anyone know how to force items in a particular group to display in a particular order.  The 'order' parameter, 'subgroup' parameter, 'orderSubgroup' parameter and anything else I try all do nothing.

  • From what I have found, items in a group by default will display vertically in the order they are listed. This will only be if they overlap in time. Here is an example:

    If our items are:

    {

    {

    id: 1,

    start: date(2024, 01, 01),

    end: date(2024, 03, 01)

    },

    {

    id: 2,

    start: date(2024, 02, 01),

    end: date(2024, 04, 01)

    },

    {

    id: 3,

    start: date(2024, 05, 01),

    end: date(2024, 06, 01)

    }

    }

    Then, we would see Item 1 appear at the top of the group, then we would see Item 2 underneath it, and Item 3 would appear next to Item 1 on the timeline, as they do not overlap. Hope this helps!

Comment
  • From what I have found, items in a group by default will display vertically in the order they are listed. This will only be if they overlap in time. Here is an example:

    If our items are:

    {

    {

    id: 1,

    start: date(2024, 01, 01),

    end: date(2024, 03, 01)

    },

    {

    id: 2,

    start: date(2024, 02, 01),

    end: date(2024, 04, 01)

    },

    {

    id: 3,

    start: date(2024, 05, 01),

    end: date(2024, 06, 01)

    }

    }

    Then, we would see Item 1 appear at the top of the group, then we would see Item 2 underneath it, and Item 3 would appear next to Item 1 on the timeline, as they do not overlap. Hope this helps!

Children
No Data