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
Parents

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

Comment

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

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