Skip to content

Commit 6fe721b

Browse files
github-actions[bot]KB BottodorarabadzhievDimitarNikolovv06
authored
Added new kb article create-timeline-telerik-reporting (#1726)
* Added new kb article create-timeline-telerik-reporting * Update create-timeline-telerik-reporting.md * Add files via upload * Update create-timeline-telerik-reporting.md * Update create-timeline-telerik-reporting.md * Update create-timeline-telerik-reporting.md * fixed env table format --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: Todor Arabadzhiev <[email protected]> Co-authored-by: Todor Arabadzhiev <[email protected]> Co-authored-by: Dimitar Nikolov <[email protected]>
1 parent 14fed61 commit 6fe721b

File tree

2 files changed

+129
-0
lines changed

2 files changed

+129
-0
lines changed

‎knowledge-base/create-timeline-telerik-reporting.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
title: Creating a Timeline Chart
3+
description: Learn how to create a timeline graphic in Telerik Reporting Designer using PictureBox and List items.
4+
type: how-to
5+
page_title: How to Create Timeline Graphics in Telerik Reporting Designer
6+
slug: create-timeline-telerik-reporting
7+
tags: telerik, reporting, timeline, picturebox, list
8+
res_type: kb
9+
ticketid: 1691259
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td> Product </td>
18+
<td> Progress® Telerik® Reporting </td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
I need to create a timeline graphic with the Report Designer that displays time detail and attendance. The timeline should visually showcase mismatches between entered attendance and hours clocked by employees. It needs to include a scale from 12 am to 12 am and use visual elements to represent time, attendance, and mismatches with distinct colors.
26+
27+
This knowledge-base article also answers the following questions:
28+
- How to replicate a timeline design in Telerik Reporting?
29+
- How to use PictureBox and List items to build a timeline in Telerik Reporting?
30+
- How to visualize mismatches between time and attendance in Telerik Reporting?
31+
32+
## Solution
33+
34+
To create a timeline graphic, use a combination of [PictureBox]({%slug telerikreporting/designing-reports/report-structure/picturebox%}) and [List]({%slug table_template_items%}#list) items. Below are the steps to achieve the desired result:
35+
36+
1. **Create PictureBox for Scale**:
37+
38+
Add a PictureBox to the report to display the fixed time scale from 12 am to 12 am. Here is a sample one:
39+
40+
![A sample scale for the Timeline Chart.](images/scale.png)
41+
42+
1. **Prepare Data Source**:
43+
44+
Convert the existing data source to include numerical representation for the entered attendance ("Attendance" in the JSON below) and hours clocked by employees ("Details" in the JSON below). Both should include the following activities:
45+
46+
* actual attendance hours (colors Green for "Details" and Blue for "Attendance")
47+
* mismatches (Red color)
48+
* hours without attendance (White color)
49+
50+
Each array may contain multiple items for each activity type. Use a structure like this:
51+
52+
````JSON
53+
[{
54+
"Details":[
55+
{
56+
"Index": 0,
57+
"Color": "White",
58+
"Length": 6
59+
},
60+
{
61+
"Index": 1,
62+
"Color": "Green",
63+
"Length": 10
64+
},
65+
{
66+
"Index": 2,
67+
"Color": "Red",
68+
"Length": 2
69+
},
70+
{
71+
"Index": 3,
72+
"Color": "White",
73+
"Length": 6
74+
}
75+
],
76+
"Attendance":[
77+
{
78+
"Index": 0,
79+
"Color": "White",
80+
"Length": 8
81+
},
82+
{
83+
"Index": 1,
84+
"Color": "Blue",
85+
"Length": 8
86+
},
87+
{
88+
"Index": 2,
89+
"Color": "Red",
90+
"Length": 2
91+
},
92+
{
93+
"Index": 3,
94+
"Color": "White",
95+
"Length": 6
96+
}
97+
]
98+
}]
99+
````
100+
101+
* Ensure the `Index` field is unique for each array item. This is essential for the List column groups to be introduced later.
102+
* The total sum of all "Length" fields in each array should be 24.
103+
104+
1. **Configure Lists for the Timeline Bars**:
105+
106+
* Add two Lists—one for "Detail" and one for "Attendance".
107+
* Ensure the Lists have the smallest possible Width as they can only grow in runtime.
108+
* [Bind]({%slug telerikreporting/designing-reports/connecting-to-data/expressions/using-expressions/bindings%}) each List DataSource to its respective field (`Details` and `Attendance`) from the main data source.
109+
* Set the List's `RowGrouping` to a constant value (e.g., `1`) to ensure a single row.
110+
* Configure `ColumnGrouping` to the `Index` field for dynamic column generation based on the data. Since each Index is unique, there will be as many columns as records in the "Detail" and "Attendance".
111+
112+
1. **Style Panels in List**:
113+
114+
* Set the background color of each panel dynamically using binding: `= Fields.Color`.
115+
* Adjust the width of each panel dynamically using binding: `= Fields.Length * 0.25 + "in"`. Modify the multiplier `0.25` to match the scale length.
116+
117+
1. **Align Lists to Scale**:
118+
119+
Position the Lists below the PictureBox to ensure alignment with the time scale. The total "Length" is always 24, hence the multiplier `0.25` should be used with PictureBox/Scale that is `24*0.25 in = 6 in` long. For other sizes use the corresponding multiplier.
120+
121+
122+
## Download Sample
123+
124+
A sample report may be downloaded from our Reporting-Samples repo [TimeLineChart.trdx](https://github.com/telerik/reporting-samples/blob/master/Sample%20Reports/TimeLineChart.trdx)
125+
126+
## See Also
127+
128+
* [PictureBox Documentation]({%slug telerikreporting/designing-reports/report-structure/picturebox%})
129+
* [List Item Documentation]({%slug table_template_items%}#list)

‎knowledge-base/images/scale.png

3.82 KB
Loading

0 commit comments

Comments
 (0)