Timeline Chart

lowcodera Timeline chart

Purpose

A timeline chart makes it easier to conceptualize a process or a sequence of events. It can make it easier for you to understand the intricacies of a project or why something seems to take so long to accomplish.

Variations

There are several variations of Timeline charts which are supported through the configuration of data and component properties.

• Basic Timeline Chart

• Distributed Timeline Chart

• Advanced (Multiple Ranges Timeline Chart)

• Multiple Series - Group Rows Timeline chart

Working with Data

‌The data format for the basic timeline chart is the same as for other Lowcodera charts. You can bind your chart component's items property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint.

Static Collection example

In this example, a collection with static data called ColTimeLine is defined in the Power App. The items property of the timeline chart component is then bound to this collection.

ClearCollect(
    ColTimeLine,
    {
        name: "Planning",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-05T00:00:00"
            },
            {
                label: "Test",
                start: "2021-01-01T00:00:00",
                end: "2021-01-10T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-20T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-01T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    }
);

The above code snippet will generate the following timeline chart.

Dynamic Collection Example

The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

The below code snippet will generate dynamic collection to be consumed by component.

Clear(CategoryCol);
ForAll(
    Distinct(
        TimeLines,
        Category
    ),
    Collect(
        CategoryCol,
        {
            ProjectCategory:ThisRecord.Result
        }
    )
);

Clear(ColTimeLine);
ForAll(
    CategoryCol,
    Collect(
        ColTimeLine,
        {
            name:ThisRecord.ProjectCategory,
            data:ForAll(
                Filter(TimeLines,Category=ProjectCategory),
                {
                    Value:{
                        label: ThisRecord.Phase,
                        start: ThisRecord.'Start Date',
                        end: ThisRecord.'End Date'
                    }
                }
            )
        }
    )
);

Property Configuration

• XAxisDataType property is set to Datetime

• All other control properties can be left as default

Chart Properties

For a full listing of all chart properties see the chart components property reference

The properties below are the main ones which change this components appearance and behaviours.

Property	Description	Accepted Values	Required
ShowDistributed	Property to show the distribution of a categorical variable by displaying eas its own bar. Property to give each series a unique color.	Boolean	X
StackedType	Property to change sack type of a bar	None Stacked	X
DataLabelSymbol	Property to add any symbol (eg. currency or any appened words) along with data labels	Text	X
Show100HeightBar	Property to set 100% height of the bar	Boolean	X
ShowReversed	Property to represent the Y-Axis from the right side	Boolean	X
FillType	Property to choose fill type for bars.	Gradient Image Solid	X
BackgroundImage	Property to provide background image URL for bars	URL	X

Examples

Distributed Timeline Chart

Data Configuration

A single or multiple data series is defined in the collection. You can use the same collection used in the section.

Property Configuration

• XAxisDataType property is set to Datetime

• ShowDistributed property is set to true

• All other control properties can be left as default

Advanced (Multiple Ranges Timeline Chart)

Data Configuration

A single or multiple data series is defined in the collection.

ClearCollect(
    ColTimeLineMultiple,
    {
        name: "Bob",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-05T00:00:00"
            },
            {
                label: "Test",
                start: "2021-01-01T00:00:00",
                end: "2021-01-10T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-20T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-01T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    },
    {
        name: "Pam",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-07T00:00:00"
            },
            {
                label: "Test",
                start: "2021-08-01T00:00:00",
                end: "2021-01-12T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-21T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-03T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    }
);

Property Configuration

• XAxisDataType property is set to Datetime

• All other control properties can be left as default

Multiple Series - Group Rows Timeline chart

Data Configuration

A single or multiple data series is defined in the collection.

ClearCollect(
    ColpresidentTL,
    {
        name: "George Washington",
        data: [
            {
                label: "President",
                start: "1789-01-01T00:00:00",
                end: "1796-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1797-01-01T00:00:00",
                end: "1800-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1801-01-15T00:00:00",
                end: "1804-01-20T00:00:00"
            }
        ]
    },
    {
        name: "John Adams",
        data: [
            {
                label: "President",
                start: "1797-01-01T00:00:00",
                end: "1804-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1805-01-01T00:00:00",
                end: "1807-01-10T00:00:00"
            }
        ]
    },
    {
        name: "Thomas Jefferson",
        data: [
            {
                label: "President",
                start: "1801-01-01T00:00:00",
                end: "1809-01-05T00:00:00"
            }
        ]
    },
    {
        name: "Aaron Burr",
        data: [
            {
                label: "President",
                start: "1801-01-01T00:00:00",
                end: "1804-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1805-01-01T00:00:00",
                end: "1812-01-10T00:00:00"
            }
        ]
    },
    {
        name: "George Clinton",
        data: [
            {
                label: "President",
                start: "1805-01-01T00:00:00",
                end: "1812-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1813-01-01T00:00:00",
                end: "1817-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1818-01-15T00:00:00",
                end: "1820-01-20T00:00:00"
            }
        ]
    },
    {
        name: "John Jay",
        data: [
            {
                label: "President",
                start: "1789-01-01T00:00:00",
                end: "1793-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1794-01-01T00:00:00",
                end: "1796-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1798-01-15T00:00:00",
                end: "1800-01-20T00:00:00"
            }
        ]
    }
);

Property Configuration

• XAxisDataType property is set to Datetime

• StackedType property is set to Stacked

• All other control properties can be left as default