You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: user-guide/components/charts.md
+44-65Lines changed: 44 additions & 65 deletions
Original file line number
Diff line number
Diff line change
@@ -18,69 +18,20 @@ img[alt$="><"] {
18
18
19
19
The **Web Report Designer** offers a **Charts** section inside the **Components** tray allowing the end-user to visualize the data records from different [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) storages:
<td>Displays data series as sets of horizontal bars, graphically summarizes and renders data categories, and enables users to easily compare amounts or values between different categories.</td>
<td>Displays series as sets of points connected by a single line and represents large amounts of data that occur over a continuous period of time.</td>
22
+
23
+
The available Chart types are:
24
+
*[Bar Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-bar-chart) - Displays data series as sets of horizontal bars, graphically summarizes and renders data categories, and enables users to easily compare amounts or values between different categories.
25
+
*[Line Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-line-chart) - Displays series as sets of points connected by a single line and represents large amounts of data that occur over a continuous period of time.
26
+
*[Area Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-column-chart) - Displays a series as a set of points connected by a line with the whole area filled in under the line.
27
+
*[Column Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-an-area-chart) - Displays data series as sets of vertical bars that are grouped by category.</td>
28
+
*[Pie Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-pie-chart) - Displays the contribution of fractional parts to a whole and is most commonly used to make comparisons between groups.
29
+
*[Doughnut Chart]({%slug web-report-designer-user-guide-components-charts%}#pie-charts) - Similar to the Pie Chart which has an open space in the center.
57
30
Before adding a Chart report item, first, you need to select the **Details** section of the report. Then, you can select the desired chart type from the **Components** tray and configure it with the desired data source.
58
31
59
-
## Bar Charts
60
-
61
-
By clicking the `Bar` item from the **Components** tray (step 1.), a new tab will appear on the right-hand side of the **Web Report Designer** (step 2.):
62
-
63
-
>caption Configuration Settings
64
-
65
-
32
+
## Adding DataSource
66
33
67
-
>note The *Configuration pane* is identical for all chart types, allowing the end-user to specify the Data Source and configure the Categories, Series and Values groups.
68
-
69
-
Build the desired chart and use an already defined [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}). According to the data that should be displayed, it is possible to configure **Categories**, **Series** and **Values** groups. The following short video shows how to feed the chart with data from the already existing SQL Data Source that displays the total **Freight** for each **Country**:
70
-
71
-
>caption Populating Bar Chart with Orders' Freight by ShipCountry
72
-
73
-
<iframewidth="560"height="315"src="https://www.youtube.com/embed/PD8RnyexfvQ?si=-sUhyCqDy0FC54O0"title="YouTube video player"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"referrerpolicy="strict-origin-when-cross-origin"allowfullscreen></iframe>
74
-
75
-
### Combine Mode
76
-
77
-
In case of having multiple series per category in the chart, it is possible to fine-tune the *combine mode* for the bar series for better illustration of the data. Telerik Reporting supports the following Bar chart types:
78
-
79
-
80
-
81
-
Let's have the following sample CSV data that will be used for the example:
82
-
83
-
>caption CSV Data Source
34
+
Let's have the following sample **CSV** data and create a CSVDataSource that will be used in this article:
84
35
85
36
```
86
37
Category, Year, Value
@@ -101,13 +52,41 @@ Components, 2004, 310
101
52
102
53
<iframewidth="560"height="315"src="https://www.youtube.com/embed/ypQHSpXnJkw?si=_pjCxfXAIfKoWBa_"title="YouTube video player"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"referrerpolicy="strict-origin-when-cross-origin"allowfullscreen></iframe>
103
54
104
-
Create a Bar Chart that uses the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*. According to the selected Bar Chart Type, the following charts will be displayed:
55
+
## Adding Charts
56
+
57
+
The Web Report Designer support two main chart groups:
58
+
59
+
***Cartesian Charts** (Bar, Line, Column, Area) - use the Cartesian coordinate system to plot the data points in its chart series. The X and Y axes define how each point's coordinates in the plot area are calculated. Cartesian charts provides a mechanism for combining data points that reside in different series but have the same category. The combine mode can be:
60
+
61
+
***Cluster**: The data points will be in the same category huddled close together.
62
+
***Stack**: Plots the points on top of each other.
63
+
***Stack100**: Presents the values of one series as a percentage of the other series.
64
+
65
+
***Pie Charts** (Pie, Doughnut) - use the Radial coordinate system to plot each point as an arc segment where the arc's length is actually the percentage this point's value is from the total sum.
66
+
67
+
The next few sections demonstrate how to add the different chart types and illustrate how the CSV data is presented in the respective chart.
68
+
69
+
>note The *Configuration pane* on the right-hand side is identical for all chart types, allowing the end-user to specify the Data Source and configure the Categories, Series and Values groups.
70
+
71
+
### Adding a Bar Chart
72
+
73
+
This section shows how to create a Bar Chart that uses the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*.
74
+
75
+
1. Click the `Bar` item from the **Components** tray (step 1.), and configure the chart with the Configuration pane on the right-hand side of the **Web Report Designer** (step 2.):
76
+
77
+
2. Build the desired chart and use an already defined [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}). According to the data that should be displayed, it is possible to configure **Categories**, **Series** and **Values** groups. The following short video shows how to feed the chart with data from the already existing SQL Data Source that displays the total **Freight** for each **Country**:
78
+
79
+
>caption Populating Bar Chart with Orders' Freight by ShipCountry
80
+
81
+
<iframewidth="560"height="315"src="https://www.youtube.com/embed/PD8RnyexfvQ?si=-sUhyCqDy0FC54O0"title="YouTube video player"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"referrerpolicy="strict-origin-when-cross-origin"allowfullscreen></iframe>
82
+
83
+
According to the selected Bar Chart Type, the following charts will be displayed:
||||
109
88
110
-
##Column Charts
89
+
### Adding a Column Chart
111
90
112
91
By clicking the `Column` item from the **Components** tray, a similar tab (like the one shown in the *Configuration Settings* above) will appear on the right-hand side of the **Web Report Designer**. The **Column** chart type is very similar to the **Bar** chart (which displays series as sets of horizontal bars) and to the **Range** Column chart (which displays series as sets of vertical bars with varying beginning and end points).
113
92
@@ -123,7 +102,7 @@ According to the selected Column Chart Type, the following charts will be displa
123
102
|----|----|----|
124
103
||||
125
104
126
-
##Area Charts
105
+
### Adding an Area Chart
127
106
128
107
By clicking the `Area` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*:
129
108
@@ -139,7 +118,7 @@ According to the selected **Area Chart Type**, the following charts will be disp
139
118
|----|----|----|
140
119
||||
141
120
142
-
##Line Charts
121
+
### Adding a Line Chart
143
122
144
123
By clicking the `Line` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*:
145
124
@@ -161,7 +140,7 @@ The table illustrates how each of the chart types is expected to look:
161
140
|----|----|----|
162
141
||||
163
142
164
-
##Pie Charts
143
+
### Adding a Pie Chart
165
144
166
145
By clicking the `Pie` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*:
Copy file name to clipboardExpand all lines: user-guide/components/components.md
+19-37Lines changed: 19 additions & 37 deletions
Original file line number
Diff line number
Diff line change
@@ -12,49 +12,31 @@ position: 0
12
12
img[alt$="><"] {
13
13
border: 1pxsolidlightgrey;
14
14
}
15
+
tableth:first-of-type {
16
+
width: 50%;
17
+
}
18
+
tableth:nth-of-type(2) {
19
+
width:50%;
20
+
}
21
+
}
15
22
</style>
16
23
17
24
# Components - Overview
18
25
19
26
Each report is constructed by [report items]({%slug user-guide/components/report-items%}) organized in different groups in the **Components** tab based on their purpose.
27
+
The Components Tray lists the available report components that can be added to the web design report. The items are organized in groups based on their type. The area supports two kinds of layout - grid and list. The list is the default view.
28
+
29
+
<td><a href="https://testdocs.telerik.com/reporting/user-guide/components/report-items">Report Items</a> - The main building parts used in the report depending on the data that will be displayed, e.g. a TextBox item for static or data-bound text, a PictureBox for displaying images, a Barcode for showing barcode in a label report, etc.</td>
<td><a href="https://testdocs.telerik.com/reporting/user-guide/components/tables">Tables</a> - The Table report item is a generalized layout report item that displays report data in cells that are organized into rows and columns.</td>
<td><a href="https://testdocs.telerik.com/reporting/user-guide/components/subreport">Report</a> - The SubReport item enables you to display reports within reports and serves as a container, similar to the report sections, growing in size depending on its children.</td>
38
-
<td><ul><li>SubReport</li></ul></td>
39
-
</tr>
40
-
<tr>
41
-
<td><a href="https://testdocs.telerik.com/reporting/user-guide/components/maps">Maps</a> - The Map report item is a native Telerik Reporting item which enables you to visualize an aggregated business data in a geographical manner.</td>
42
-
<td><ul><li>Map types: Point, Pie, Column</li><li>Choropleth</li></ul></td>
43
-
</tr>
44
-
<tr>
45
-
<td><a href="https://testdocs.telerik.com/reporting/user-guide/components/charts">Charts</a> - The Graph report item is a native Telerik Reporting item that allows you to generate different Chart types (objects) and visually present large volumes of aggregated information.</td>
<td><a href="https://testdocs.telerik.com/reporting/user-guide/components/report-sections">Report Sections</a> - A Telerik report consists of different sections that may contain report items. Each report section represents a specific area on the report page and defines the rendering of its report items.</td>
50
-
<td><ul><li>Page Header</li><li>Page Footer</li><li>Report Header</li><li>Report Footer</li><li>Table of Contents</li></ul></td>
51
-
</tr>
52
-
<tr>
53
-
<td><a href="https://testdocs.telerik.com/reporting/user-guide/components/data-sources">DataSources</a> - Data Source components are used to connect data items to different types of data without writing any code.</td>
54
-
<td><ul><li>SQL Data Source</li><li>CSV Data Source</li><li>Web Service Data Source</li><li>GraphQL Data Source</li><li>JSON Data Source</li><li>Object Data Source</li></ul></td>
55
-
</tr>
56
-
</table>
57
-
</div>
31
+
|Group|Report Items|
32
+
|----|----|
33
+
|[Report Items]({%slug user-guide/components/report-items%}) - The main building parts used in the report depending on the data that will be displayed, e.g. a TextBox item for static or data-bound text, a PictureBox for displaying images, a Barcode for showing barcode in a label report, etc.|<ul><li>TextBox</li><li>HtmlTextBox</li><li>PictureBox</li><li>CheckBox</li><li>Barcode</li><li>Shape</li><li>Panel</li><li>Radial Gauge Wizard</li><li>Linear Gauge Wizard</li></ul>|
34
+
|[Tables]({%slug web-report-designer-user-guide-components-tables%}) - The Table report item is a generalized layout report item that displays report data in cells that are organized into rows and columns.|<ul><li>List</li><li>Table</li><li>Crosstab</li><li>Table Wizard</li><li>Crosstab Wizard</li></ul>|
35
+
|Report - The SubReport item enables you to display reports within reports and serves as a container, similar to the report sections, growing in size depending on its children.|<ul><li>SubReport</li></ul>|
36
+
|[Maps]({%slug web-report-designer-user-guide-components-maps%}) - The Map report item is a native Telerik Reporting item which enables you to visualize an aggregated business data in a geographical manner.|<ul><li>Map types: Point, Pie, Column</li><li>Choropleth</li></ul>|
37
+
|[Charts]({%slug web-report-designer-user-guide-components-charts%}) - The Graph report item is a native Telerik Reporting item that allows you to generate different Chart types (objects) and visually present large volumes of aggregated information.|<ul><li>Bar Chart</li><li>Line Chart</li><li>Area Chart</li><li>Column Chart</li><li>Pie Chart</li><li>Doughnut Chart</li></ul>|
38
+
|[Report Sections]({%slug user-guide/components/report-sections%}) - A Telerik report consists of different sections that may contain report items. Each report section represents a specific area on the report page and defines the rendering of its report items.|<ul><li>Page Header</li><li>Page Footer</li><li>Report Header</li><li>Report Footer</li><li>Table of Contents</li></ul>|
39
+
|[DataSources]({%slug web-report-designer-user-guide-components-data-sources%}) - Data Source components are used to connect data items to different types of data without writing any code.|<ul><li>SQL Data Source</li><li>CSV Data Source</li><li>Web Service Data Source</li><li>GraphQL Data Source</li><li>JSON Data Source</li><li>Object Data Source</li></ul>|
0 commit comments