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,

    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
)

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

Comment
  • 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!

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