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.

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.

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.

Examples

Distributed Timeline Chart

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

Advanced (Multiple Ranges Timeline Chart)

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"
            }
        ]
    }
);

Multiple Series - Group Rows Timeline chart

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"
            }
        ]
    }
);

Last updated