Information
  • Author: Xebia
  • Type: Plug-in (Component)
  • Support: This plug-in or utility is not supported by the author. The content is free to use with a licensed product, but it is made available as-is and Community supported.
  • Industry: All Industries
  • Compatible Version(s): 20.2+
  • First Released:
  • Last Updated:
  • Cost: Free
Share
Home » AppMarket » Timeline Chart Component

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
  • in reply to davidh0020

    I don't believe you are able to double click and edit the item content itself, but you would be able to create a textField() outside of the timeline that would update the content field of the selected item. So you would select the item in the timeline to update, the type in the text field whatever you want them name to be, and have that component save back into the items and update the value. 

    Hope this helps!

  • in reply to Farnaz

    When there is no data, there shouldn't be any items showing in the timeline. Can you share your query and item mapping here? 

  • in reply to bharathwajrk

    Hey , I ran into this same issue and then discovered the start and end date defaults will work when you format them the same way that the chart exports them, which is isoDateString. I found this through saving into a variable from the parameter timelineItemsJson and then creating a new item and looking at the start/end. The start/end parameters work if you match the format 2024-04-08T04:00:00.000Z for datetime or 2024-03-24Z for date. You should be able to use toIsoDateString() or concat the string needed such as date(2024,08,16)&"Z" and it works as expected.

    Hope this helps!

  • in reply to davel001150

    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!

  • Hi Team,

    The timeline chart disappears on below scenario.
    1. On load set start and end date time under Options.
    2. Then change the data (contains data only within the datetime range), the chart field disappears and page becomes blank.

    Please find the below code which I used, it is blank for the below code as well.

    Please help on this.

    timelineChartField(
  labelPosition: "ABOVE",
  validations: {},
  height: "AUTO",
  items: {
    {
      "id": 1,
      "group": 1,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Poly_500</span>",
      "start": datetime(
        2020,
        08,
        1,
        0,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        3,
        0,
        0
      ),
      titles: "asfdasdasf",
      title: "ppoipoippopo<br/>osidofoidsufoidsf",
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 1.1,
      "group": 1,
      "content": "<b>21 000</b> <br> <span style= 'color: white'>B14HG . Exported</span>",
      "start": datetime(
        2020,
        08,
        1,
        4,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        8,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 1.2,
      "group": 1,
      "content": "<b>21 000</b> <br> <span style= 'color: white'>AH1 . 1 issue</span>",
      "start": datetime(
        2020,
        08,
        1,
        9,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        12,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 1.3,
      "group": 1,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Poly_500</span>",
      "start": datetime(
        2020,
        08,
        1,
        13,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 2,
      "group": 2,
      "content": "<b>28 000</b> <br> <span style= 'color: white'>Plastex - 6</span>",
      "start": datetime(
        2020,
        08,
        1,
        1,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        3,
        30,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 2.1,
      "group": 2,
      "content": "<b>158 100</b> <br> <span style= 'color: white'>Plastex - 8</span>",
      "start": datetime(
        2020,
        08,
        1,
        3,
        50,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        10,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 2.2,
      "group": 2,
      "content": "<b>90 230</b> <br> <span style= 'color: white'>Plastex - 12</span>",
      "start": datetime(
        2020,
        08,
        1,
        11,
        30,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        17,
        0,
        0
      ),
      style: "background-color:#E289F2;border-color:#E289F2;"
    },
    {
      "id": 3,
      "group": 3,
      "content": "<b>500</b> <br> <span style= 'color: white'>Poly...</span>",
      "start": datetime(
        2020,
        08,
        1,
        0,
        40,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        2,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 3.1,
      "group": 3,
      "content": "<b>7 Hours Delay</b> <br> <span style= 'color: white'>No task assigned</span>",
      "start": datetime(
        2020,
        08,
        1,
        2,
        10,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        8,
        10,
        0
      ),
      style: "background-color:#F5C324;border-color:#F5C324;"
    },
    {
      "id": 3.2,
      "group": 3,
      "content": "<b>310 000</b> <br> <span style= 'color: white'>Polymerium 5000 - Check for the report</span>",
      "start": datetime(
        2020,
        08,
        1,
        8,
        30,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 4,
      "group": 4,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Whatever_500</span>",
      "start": datetime(
        2020,
        08,
        1,
        2,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        5,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 4.1,
      "group": 4,
      "content": "<b>21 000</b> <br> <span style= 'color: white'>Wha... - 3 issues</span>",
      "start": datetime(
        2020,
        08,
        1,
        6,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        9,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 4.2,
      "group": 4,
      "content": "<b>21 000</b> <br> <span style= 'color: white'>Whatever_B1 - Exported</span>",
      "start": datetime(
        2020,
        08,
        1,
        9,
        10,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        13,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 4.3,
      "group": 4,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Whatever_600</span>",
      "start": datetime(
        2020,
        08,
        1,
        16,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 5,
      "group": 5,
      "content": "<b>11 HOURS SETTING UP</b> <br> <span style= 'color: white'>Changing slicing blades for cutter B14</span>",
      "start": datetime(
        2020,
        08,
        1,
        1,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        15,
        0,
        0
      ),
      style: "background-color:#39A8DC;border-color:#39A8DC;"
    },
    {
      "id": 6,
      "group": 6,
      "content": "<b>9 HOURS SETTING UP</b> <br> <span style= 'color: white'>Changing slicing blades for Cutter B16</span>",
      "start": datetime(
        2020,
        08,
        1,
        10,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#2DB6F5;border-color:#2DB6F5;"
    },
    {
      "id": 7,
      "group": 7,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Poly_500</span>",
      "start": datetime(
        2020,
        08,
        1,
        0,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        7,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 7.1,
      "group": 7,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Slicing nice</span>",
      "start": datetime(
        2020,
        08,
        1,
        7,
        10,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        11,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 7.2,
      "group": 7,
      "content": "<b>21 000</b> <br> <span style= 'color: white'>Like in paradise</span>",
      "start": datetime(
        2020,
        08,
        1,
        12,
        30,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#E289F2;border-color:#E289F2;"
    },
    {
      "id": 8,
      "group": 8,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Whatever_600</span>",
      "start": datetime(
        2020,
        08,
        1,
        2,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        7,
        0,
        0
      ),
      style: "background-color:#E289F2;border-color:#E289F2;"
    },
    {
      "id": 8.1,
      "group": 8,
      "content": "<b>132 000</b> <br> <span style= 'color: white'>Whatever_500</span>",
      "start": datetime(
        2020,
        08,
        1,
        7,
        30,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        11,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 8.2,
      "group": 8,
      "content": "<b>21 000</b> <br> <span style= 'color: white'>WhateverName . 3 issues</span>",
      "start": datetime(
        2020,
        08,
        1,
        11,
        30,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        14,
        40,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 8.3,
      "group": 8,
      "content": "<b>21 000</b> <br> <span style= 'color: white'>Whatever_B1 . Exported</span>",
      "start": datetime(
        2020,
        08,
        1,
        15,
        00,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 9,
      "group": 9,
      "content": "<b>LIFETIME DELAY</b> <br> <span style= 'color: white'>This packagin machine needs to get pumped up!</span>",
      "start": datetime(
        2020,
        08,
        1,
        0,
        00,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#F5C324;border-color:#F5C324;"
    },
    {
      "id": 10,
      "group": 10,
      "content": "<b>600</b> <br> <span style= 'color: white'>Rotopaper-5</span>",
      "start": datetime(
        2020,
        08,
        1,
        1,
        00,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        4,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 10.1,
      "group": 10,
      "content": "<b>7 HOURS DAMAGED</b> <br> <span style= 'color: white'>Please fix me up!</span>",
      "start": datetime(
        2020,
        08,
        1,
        4,
        10,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        10,
        0,
        0
      ),
      style: "background-color:#FF8A65;border-color:#FF8A65;"
    },
    {
      "id": 10.2,
      "group": 10,
      "content": "<b>320 000</b> <br> <span style= 'color: white'>Polymerium 5000 - Check for the report</span>",
      "start": datetime(
        2020,
        08,
        1,
        12,
        00,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 11,
      "group": 11,
      "content": "<b>5 HOURS SETTING UP</b> <br> <span style= 'color: white'>This machine starting soon</span>",
      "start": datetime(
        2020,
        08,
        1,
        0,
        00,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        5,
        0,
        0
      ),
      style: "background-color:#2DB6F5;border-color:#2DB6F5;"
    },
    {
      "id": 11.1,
      "group": 11,
      "content": "<b>600</b> <br> <span style= 'color: white'>Poly...</span>",
      "start": datetime(
        2020,
        08,
        1,
        6,
        00,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        7,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 11.2,
      "group": 11,
      "content": "<b>1 200</b> <br> <span style= 'color: white'>Polymolly...</span>",
      "start": datetime(
        2020,
        08,
        1,
        7,
        10,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        9,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 11.3,
      "group": 11,
      "content": "<b>600</b> <br> <span style= 'color: white'>Poly....</span>",
      "start": datetime(
        2020,
        08,
        1,
        11,
        0,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        12,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 11.4,
      "group": 11,
      "content": "<b>1 200</b> <br> <span style= 'color: white'>Polymolly....</span>",
      "start": datetime(
        2020,
        08,
        1,
        12,
        10,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        14,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    },
    {
      "id": 11.5,
      "group": 11,
      "content": "<b>600</b> <br> <span style= 'color: white'>Poly...</span>",
      "start": datetime(
        2020,
        08,
        1,
        15,
        00,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        16,
        0,
        0
      ),
      style: "background-color:#E289F2;border-color:#E289F2;"
    },
    {
      "id": 11.6,
      "group": 11,
      "content": "<b>1 200</b> <br> <span style= 'color: white'>Polymollyx 800</span>",
      "start": datetime(
        2020,
        08,
        1,
        16,
        30,
        0
      ),
      "end": datetime(
        2020,
        08,
        1,
        18,
        0,
        0
      ),
      style: "background-color:#39C86A;border-color:#39C86A;"
    }
  },
  groups: {
    {
      "id": 1,
      "content": "Polyester Line";"style": "background-color: #B2DFDB;"
    },
    {
      "id": 2,
      "content": "Plastic Line",
      "style": "background-color: #B2DFDB;"
    },
    {
      "id": 3,
      "content": "Polymer Line",
      "style": "background-color: #B2DFDB;"
    },
    {
      "id": 4,
      "content": "Whatever Line",
      "style": "background-color: #B2DFDB;"
    },
    {
      "id": 5,
      "content": "Cutter B14",
      "style": "background-color: #FFECB3;"
    },
    {
      "id": 6,
      "content": "Cutter B16",
      "style": "background-color: #FFECB3;"
    },
    {
      "id": 7,
      "content": "Slicetek 500",
      "style": "background-color: #FFECB3;"
    },
    {
      "id": 8,
      "content": "Slicetek 800A",
      "style": "background-color: #FFECB3;"
    },
    {
      "id": 9,
      "content": "CBoard",
      "style": "background-color: #D7CCC8;"
    },
    {
      "id": 10,
      "content": "Rotopaper",
      "style": "background-color: #D7CCC8;"
    },
    {
      "id": 11,
      "content": "Packer_X",
      "style": "background-color: #D7CCC8;"
    }
  },
  options: {
    editable: true,
    /*groupHeightMode: "",*/
    stack: false,
    showMajorLabels: false,
    showTooltips: true,
    groupOrder: "id",
    zoomable: false,
    start: datetime(
      2020,
      08,
      1,
      0,
      0,
      0
    ),
    end: datetime(
      2020,
      08,
      1,
      23,
      0,
      0
    ),
    timeAxis: {scale: "hour", step: 1},
    orientation: {
      axis: "top"
    }
  },
  onSelection: null
)

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

  • Hello,

    I like this component, but i have one query. When there is no data, there are lines shown for the dates, Is there any configuration to hide these lines?. Any pointers would help.

    Thanks,

    Farnaz

  • Love this component! Quick question about the editability of new tasks.

    Does this component allow for a user to double click (or similar) an existing task and edit the task name (content)? I see that I can double click and add a new task, and I can define a default name, but is it possible to allow a dynamic name for the added task when the user double clicks?

© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.