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

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