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.

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
)

Comment

bharathwajrk 6 months ago

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
)

Children

No Data