Skip to content

Dess user guide review part2 #1768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 30, 2025
Merged

Dess user guide review part2 #1768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5000a3c
components, map, tables after review
dessyordanova Jul 24, 2025
af0f10c
charts after review
dessyordanova Jul 25, 2025
c38662a
fix renamed slugs
dessyordanova Jul 25, 2025
12d086e
Update tables.md
dessyordanova Jul 28, 2025
bc132cf
applied review part 3
dessyordanova Jul 29, 2025
b56ba2d
Update data-sources.md
dessyordanova Jul 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 44 additions & 65 deletions user-guide/components/charts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,69 +18,20 @@ img[alt$="><"] {

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:

<div style="display: flex; align-items: flex-start; gap: 24px;">
<img alt="><" title="Components tray" src="images/wrd-components-tray-charts.png" style="max-width:240px; height:auto; border:1px solid lightgrey;" />
<table style="width:100%; height:100%;">
<tr>
<th style="width:30%">Chart Type</th><th>Description</th>
</tr>
<tr>
<td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#bar-charts">Bar Chart</a></td>
<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>
</tr>
<tr>
<td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#line-charts">Line Chart</a></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>
</tr>
<tr>
<td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#area-charts">Area Chart</a></td>
<td>Displays a series as a set of points connected by a line with the whole area filled in under the line.</td>
</tr>
<tr>
<td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#column-charts">Column Chart</a></td>
<td>Displays data series as sets of vertical bars that are grouped by category.</td>
</tr>
<tr>
<td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#pie-charts">Pie Chart</a></td>
<td>Displays the contribution of fractional parts to a whole and is most commonly used to make comparisons between groups.</td>
</tr>
<tr>
<td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#pie-charts">Doughnut Chart</a></td>
<td>Similar to the Pie Chart which has an open space in the center.</td>
</tr>
</tr>
<tr><td colspan=2 align=center><img alt="><" title="Components tray" src="images/wrd-components-tray-charts-small.png" /></td>
</tr>
</table>
</div>

![Maps Group ><](images/wrd-components-tray-charts-design-mode.png)

The available Chart types are:
* [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.
* [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.
* [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.
* [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>
* [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.
* [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.
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.

## Bar Charts

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.):

>caption Configuration Settings

![Configure Bar Chart ><](images/wrd-components-tray-charts-configure-bar-chart.png)
## Adding DataSource

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

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**:

>caption Populating Bar Chart with Orders' Freight by ShipCountry

<iframe width="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>

### Combine Mode

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:

![Bar Chart Type ><](images/wrd-components-tray-charts-configure-bar-chart-type.png)

Let's have the following sample CSV data that will be used for the example:

>caption CSV Data Source
Let's have the following sample **CSV** data and create a CSVDataSource that will be used in this article:

```
Category, Year, Value
Expand All @@ -101,13 +52,41 @@ Components, 2004, 310

<iframe width="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>

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:
## Adding Charts

The Web Report Designer support two main chart groups:

* **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:

* **Cluster**: The data points will be in the same category huddled close together.
* **Stack**: Plots the points on top of each other.
* **Stack100**: Presents the values of one series as a percentage of the other series.

* **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.

The next few sections demonstrate how to add the different chart types and illustrate how the CSV data is presented in the respective chart.

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

### Adding a Bar Chart

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*.

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.):

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**:

>caption Populating Bar Chart with Orders' Freight by ShipCountry

<iframe width="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>

According to the selected Bar Chart Type, the following charts will be displayed:

|**Clustered Bar**|**Stacked Bar**|**100% Stacked Bar**|
|----|----|----|
|![Clustered Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png)|![Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png)|![100% Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png) |

## Column Charts
### Adding a Column Chart

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).

Expand All @@ -123,7 +102,7 @@ According to the selected Column Chart Type, the following charts will be displa
|----|----|----|
|![Clustered Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-clustered-type.png)|![Stacked Column Type ](images/wrd-components-tray-charts-configure-column-chart-stacked-type.png)| ![100% Stacked Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png) |

## Area Charts
### Adding an Area Chart

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*:

Expand All @@ -139,7 +118,7 @@ According to the selected **Area Chart Type**, the following charts will be disp
|----|----|----|
|![Area Chart Type ](images/wrd-components-tray-charts-configure-area-chart-type.png)|![Stacked Area Type ](images/wrd-components-tray-charts-configure-stacked-area-type.png)|![100% Stacked Area Type ](images/wrd-components-tray-charts-configure-area-100-stacked-type.png) |

## Line Charts
### Adding a Line Chart

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*:

Expand All @@ -161,7 +140,7 @@ The table illustrates how each of the chart types is expected to look:
|----|----|----|
|![Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png)|![Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png)|![100% Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png)|

## Pie Charts
### Adding a Pie Chart

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*:

Expand Down
56 changes: 19 additions & 37 deletions user-guide/components/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,49 +12,31 @@ position: 0
img[alt$="><"] {
border: 1px solid lightgrey;
}
table th:first-of-type {
width: 50%;
}
table th:nth-of-type(2) {
width:50%;
}
}
</style>

# Components - Overview

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

![Components tray in List Mode ><](images/wrd-components-tray-design-mode.png)

<div style="display: flex; align-items: flex-start; gap: 24px;">

<img alt="><" title="Components tray" src="images/wrd-components-tray.png" style="max-width:240px; height:auto; border:1px solid lightgrey;" />
<table style="width:100%; height:100%;">
<tr>
<th style="width:40%">Group</th><th>Report Items</th>
</tr>
<tr>
<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><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></td>
</tr>
<tr>
<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><ul><li>List</li><li>Table</li><li>Crosstab</li><li>Table Wizard</li><li>Crosstab Wizard</li></ul></td>
</tr>
<tr>
<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>
<td><ul><li>SubReport</li></ul></td>
</tr>
<tr>
<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>
<td><ul><li>Map types: Point, Pie, Column</li><li>Choropleth</li></ul></td>
</tr>
<tr>
<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><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></td>
</tr>
<tr>
<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>
<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>
</tr>
<tr>
<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>
<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>
</tr>
</table>
</div>
|Group|Report Items|
|----|----|
|[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>|
|[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>|
|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>|
|[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>|
|[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>|
|[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>|
|[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>|

## Next Steps

Expand Down
Loading