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

  • We recently migrated our environment from the legacy EC2-based infrastructure to Kubernetes. Following the migration this plugin has stooped working, component is not loading it is just showing blank UI. Has anyone faced the same issue?

  • Hi Team,

    We are trying implementing timeline chart for one of the use case in which it should display 2 Bars in each row. One bar's color is fixed and another should be changing based on status. But when we try to implement logic then color is not coming properly using colors{} inside timeline chart. Output is not coming properly.

    Using two different loops for two bars in each row but it's not reflecting in the chart :

    googleTimelineChartField(
    chartColumnData: {
    {
    type: "string",
    id: "Name",
    rowDataKey: "name"
    },
    {
    type: "string",
    id: "Title",
    rowDataKey: "title"
    },
    {
    type: "date",
    id: "Start Time",
    rowDataKey: "start"
    },
    {
    type: "date",
    id: "End Time",
    rowDataKey: "end"
    }

    },
    chartRowData:{
    a!forEach(
    items:index(local!ccatAssesment,"data",{}),
    expression: {
    /*Bar title*/
    title:"Pre Assessment Engagement",
    /*Hover screen message*/
    name:if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{assessmentName}assessmentName']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{assessmentName}assessmentName'],
    {}
    ),
    /*start date*/
    start:if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{engagementStartDate}engagementStartDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{engagementStartDate}engagementStartDate'],
    {}
    ),
    /*end date*/
    end:if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{initialDocReviewDate}initialDocReviewDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{initialDocReviewDate}initialDocReviewDate'],
    {}
    ),

    }
    ),
    a!forEach(
    items:index(local!ccatAssesment,"data",{}),
    expression: {
    /*Bar title*/
    title: if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{assessmentName}assessmentName']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{assessmentName}assessmentName'],
    {}
    ),
    /*Hover screen message*/
    name: concat(
    "Pre Assessment Engagement ",
    " : ",
    if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{engagementStartDate}engagementStartDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{engagementStartDate}engagementStartDate'],
    {}
    ),
    " - ",
    if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{initialDocReviewDate}initialDocReviewDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{initialDocReviewDate}initialDocReviewDate'],
    {}
    ),
    char(10),
    " Asesssment Start - ",
    if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedStartDate}revisedStartDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedStartDate}revisedStartDate'],
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{plannedStartDate}plannedStartDate']
    ),
    " Assessment End - ",
    if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedCompletionDate}revisedCompletionDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedCompletionDate}revisedCompletionDate'],
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{plannedCompletionDate}plannedCompletionDate']
    )
    ),
    /*start date*/
    start: if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedStartDate}revisedStartDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedStartDate}revisedStartDate'],
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{plannedStartDate}plannedStartDate']
    ),
    /*end date*/
    end: if(
    a!isNotNullOrEmpty(
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedCompletionDate}revisedCompletionDate']
    ),
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{revisedCompletionDate}revisedCompletionDate'],
    fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{plannedCompletionDate}plannedCompletionDate']
    )

    }
    )
    },

    colors: {
    a!forEach(
    items: index(local!ccatAssesment,"data",{}),
    expression: cons!CCAT_TEXT_LIST_HEX_CODE_COLOR_PALETTE[15]
    ),
    a!forEach(
    items: index(local!ccatAssesment,"data",{}),
    expression:
    a!match(
    value: fv!item['recordType!{54f65c9b-a3ae-4e41-bb2e-dcd7134ebe1c}CCAT VW ASSESSMENT STATUS.fields.{status}status'],
    equals: "In Progress",
    then: cons!CCAT_TEXT_LIST_HEX_CODE_COLOR_PALETTE[17],
    equals: "Not Started",
    then: cons!CCAT_TEXT_LIST_HEX_CODE_COLOR_PALETTE[18],
    equals: "Overdue",
    then: cons!CCAT_TEXT_LIST_HEX_CODE_COLOR_PALETTE[19],
    equals: "Complete",
    then: cons!CCAT_TEXT_LIST_HEX_CODE_COLOR_PALETTE[16],
    default: cons!CCAT_TEXT_LIST_HEX_CODE_COLOR_PALETTE[18]
    )
    )
    },

    Any suggestions how we can fix this issue to implement multiple color dynamically based on status for multiple Bars and multiple rows.

  • Hi Team,

    We have installed 2 plug-ins .

    1. End-User Reporting Charts In End-User reporting plug-in

    we have timelineChartField component that is displayed .

    2. timelineChartField (community.appian.com/.../timeline-chart-component)

    In this , we are unable to find the 2nd plug-in parameter.

    There are 2 components (timelineChartField) with the same name timelineChartField .

    My assumption is because the timelineChartField already exists, the component with the same name from the 2nd plug-in would not have got registered.

    Note: Plug-in author might have to ensure that there is no conflict in the naming of the existing plug-ins.

    Can someone please help out here . How to use 2 plugins.

    Thanks,

    Sinu

  • 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

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