# 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkun8nPB9G53KH5LoR9%2F-MkunJosLV7N1dwLZteO%2Fimage.png?alt=media\&token=446bfcd4-555a-478a-8db4-2f26c8e1f910)

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.  

{% tabs %}
{% tab title="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.

```markup
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.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkunfb0PH8EFhhms_jo%2F-MkunkBGfan8koU0WHaw%2Fimage.png?alt=media\&token=19c1f24b-64cd-4101-a668-0c988a55d2fd)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MlTRgCsbWJS8C9wWRkk%2F-MlTZ0ME-IDFVKO3pCAk%2Fimage.png?alt=media\&token=97dec306-ea3c-4862-be4e-58f5fbd7132e)

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'
                    }
                }
            )
        }
    )
);
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x]  All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](https://docs.lowcodera.com/component-properties/chart-components) 
{% endhint %}

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

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

## Examples

### Distributed Timeline Chart

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkunfb0PH8EFhhms_jo%2F-Mkuno3JTel_T-OhAbgQ%2Fimage.png?alt=media\&token=261a8175-6812-4a43-9aef-90054fe52917)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in the [section](#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;`XAxisDataType` property is set to **Datetime**
* [x] `ShowDistributed` property is set to **true**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Advanced (Multiple Ranges Timeline Chart)

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-Mkunfb0PH8EFhhms_jo%2F-MkunuKE7nqe1VpfL5YT%2Fimage.png?alt=media\&token=5c8ced7f-487f-444e-8263-19a403cd0634)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

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

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Multiple Series - Group Rows Timeline chart

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkupP8E3yqMkaLAYvlH%2F-MkurBiPpqLJXv1XTADo%2Fimage.png?alt=media\&token=51525920-ff92-4205-be28-24cfbaadf4cc)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

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

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x] `StackedType` property is set to **Stacked**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}