Skip to content
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
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
12 changes: 6 additions & 6 deletions user-guide/components/charts.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ Components, 2003, 280
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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/d34jlpfD94Q?si=jCgcgEMH9y2AQGOU" 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>

After adding the data source to you report, continue by adding the desired chart type.

Expand All @@ -99,7 +99,7 @@ To create a Bar Chart, follow the steps below. See the video after the steps for

>caption Adding a Bar Chart and populating it with data

<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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/-bCYlj5Qtwg?si=VgbqrDrNDA3zDvA_" 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>

Based on the Bar Chart type that you select during the configuration, one of the following charts will be displayed:

Expand All @@ -121,7 +121,7 @@ To create a Column Chart, follow the steps below. See the video after the steps

>caption Adding a Column Chart and populating it with data

<iframe width="560" height="315" src="https://www.youtube.com/embed/ePCehcujGnU?si=iQ5SDFrLaJeatsgl" 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/RGJa5FLZ5A8?si=vxsKE8GwK2jFFnIv" 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>

Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed:

Expand All @@ -143,7 +143,7 @@ To create an Area Chart, follow the steps below. See the video after the steps f

>caption Adding an Area Chart and populating it with data

<iframe width="560" height="315" src="https://www.youtube.com/embed/1F4df2B3TTw?si=SskFAdk4lDTmijfr" 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Eygyvp6y1zk?si=ObaAThjMoEajmB6H" 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>

Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed:

Expand All @@ -165,7 +165,7 @@ To create a Line Chart, follow the steps below. See the video after the steps fo

>caption Adding a Line Chart and populating it with data

<iframe width="560" height="315" src="https://www.youtube.com/embed/FVBqHGrqYvQ?si=MBSYV08JWm7KEhUJ" 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jEP0YrFUG68?si=N5VuLs9tUHQ0I4CW" 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>

Based on the Line Chart type that you select during the configuration, one of the following charts will be displayed:

Expand All @@ -191,7 +191,7 @@ To create a Pie Chart, follow the steps below. See the video after the steps for

>caption Adding a Pie Chart and populating it with data

<iframe width="560" height="315" src="https://www.youtube.com/embed/U9HMcfjAofc?si=3OCMV8NEyz8VwmaZ" 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/SPLPy_jAsJM?si=iYhK6Tm_W0DujcwD" 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>

Based on the Pie Chart type that you select during the configuration, one of the following charts will be displayed:

Expand Down
2 changes: 1 addition & 1 deletion user-guide/components/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ You can add components to your report in two ways:
|----|----|
|[Report Items]({%slug user-guide/components/report-items%}) - The main building blocks 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 a 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>|
|[Reports]({%slug telerikreporting/designing-reports/report-structure/subreport%}) - 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>|
|Reports - The [SubReport]({%slug web-report-designer-user-guide-components-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 aggregate 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>|
Expand Down
12 changes: 6 additions & 6 deletions user-guide/components/data-sources.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ To add a new SQL Data Source:

1. Click the **SQL Data Source** item in the **Components** tab.

1. The [SQL Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/sqldatasource-wizard%}) appears allowing you to use either an existing connection or build a new one by providing a `connection string` to connect to the database and define the SQL statement or the stored procedure to retrieve the data:
1. The SQL Data Source configuration wizard appears allowing you to use either an existing connection or build a new one by providing a `connection string` to connect to the database and define the SQL statement or the stored procedure to retrieve the data:

>caption Existing vs New SQL Connection

Expand Down Expand Up @@ -86,7 +86,7 @@ To add a new CSV Data Source:

1. Click the **CSV Data Source** item in the **Components** tab.

1. The [CSV Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/csvdatasource-wizard%}) appears allowing you to use either an existing or a new CSV file, or use inline CSV text with the data:
1. The CSV Data Source configuration wizard appears allowing you to use either an existing or a new CSV file, or use inline CSV text with the data:

>caption Upload a CSV Source vs Inline

Expand Down Expand Up @@ -115,7 +115,7 @@ To add a Web Service Data Source:

1. Click the **Web Service Data Source** item in the **Components** tab.

1. The [Web Service Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/webservicedatasource-wizard%}) appears allowing you to create new or edit an existing [WebServiceDataSource]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/webservicedatasource-component/overview%}) component.
1. The Web Service Data Source configuration wizard appears allowing you to create new or edit an existing WebServiceDataSource component.

>caption Setup Web Service Data Source

Expand Down Expand Up @@ -145,7 +145,7 @@ To add a GraphQL Data Source:

1. Click the **GraphQL Data Source** item in the **Components** tab.

1. The [GraphQL Data Source configuration wizard](https://docs.telerik.com/reporting/designing-reports/report-designer-tools/desktop-designers/tools/data-source-wizards/graphqldatasource-wizard) appears allowing you to create new or edit an existing [GraphQLDataSource](https://docs.telerik.com/reporting/designing-reports/connecting-to-data/data-source-components/graphqldatasource-component/overview) component.
1. The GraphQL Data Source configuration wizard appears allowing you to create new or edit an existing GraphQLDataSource component.

The wizard allows you to set up one of the following options:

Expand Down Expand Up @@ -194,7 +194,7 @@ The following configuration steps are available:

## JSON Data Source

By clicking the `JSON Data Source` item in the **Components** tab, the [JSON Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/jsondatasource-wizard%}) appears allowing you to use a new or an existing JSON file, or directly enter inline JSON content:
By clicking the `JSON Data Source` item in the **Components** tab, the JSON Data Source configuration wizard appears allowing you to use a new or an existing JSON file, or directly enter inline JSON content:

>caption Upload a new JSON file vs Inline JSON data

Expand All @@ -214,7 +214,7 @@ To add an `Object Data Source`:

1. Click the `Object Data Source` item in the **Components** tab.

1. The [Object Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/objectdatasource-wizard%}) appears allowing you to use a business object or any other class (that was already defined) for data retrieval in the report:
1. The Object Data Source configuration wizard appears allowing you to use a business object or any other class (that was already defined) for data retrieval in the report:

* Select Business object

Expand Down
21 changes: 9 additions & 12 deletions user-guide/components/maps.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ The following tutorial demonstrates how to create a Map that presents sales dist

> To follow along with the steps below, you need access to an instance of the [Adventure Works](https://github.com/microsoft/sql-server-samples/tree/master/samples/databases/adventure-works) database for [Microsoft SQL Server](https://learn.microsoft.com/en-us/sql/database-engine/install-windows/install-sql-server?view=sql-server-ver17).

<iframe width="560" height="315" src="https://www.youtube.com/embed/VGeM_g7Ieqg?si=6mGUiz4yEIV3Opnu" 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/u-9dplAXbZk?si=RWeHmLWZRkse8TOL" 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>

Since this tutorial uses the **AzureLocationProvider**, an Azure Maps subscription key is required. You can obtain a key by [creating an Azure Maps account through the Azure Portal](https://learn.microsoft.com/en-us/azure/azure-maps/quick-demo-map-app#create-an-azure-maps-account). For more information on how to access the key, refer to [Get the subscription key for your account](https://learn.microsoft.com/en-us/azure/azure-maps/quick-demo-map-app#get-the-subscription-key-for-your-account).

Expand Down Expand Up @@ -164,23 +164,21 @@ Select the location provider (for example, Azure) that will be used to geocode t

## Choropleth

A Choropleth map is a thematic map where areas are shaded or colored in proportion to a statistical variable (like population density, income levels, or voting results). This specialized map component colors geographical areas according to the data values they represent.
A **Choropleth** map is a thematic map where areas are shaded or colored in proportion to a statistical variable (like population density, income levels, or voting results). This specialized map component colors geographical areas according to the data values they represent.

The Choropleth below shows the 100 most populated countries:

>caption World population density

![Choropleth map ><](images/wrd-components-tray-choropleth-map.png)

The video demonstrates how to create and set up a Choropleth map that shows the world population for each country and colors its area depending on the population density value.
>important Currently, the Web Report Designer allows only **displaying an already created** report (for example, using the Standalone Report Designer) that contains a Choropleth report item and simple fine-tuning. It is not possible to build a Choropleth from scratch in the Web Report Designer.

Download the [`PopulationData.zip`](https://github.com/telerik/reporting-docs/raw/master/knowledge-base/resources/PopulationDensity.zip) file, save it locally, and extract its contents in a folder.
<!-- If you need to create a report with a Choropleth, download the [`PopulationData.zip`](https://github.com/telerik/reporting-docs/raw/master/knowledge-base/resources/PopulationDensity.zip) file, save it locally, and extract its contents in a folder. You can use it as a starting point for your own report. -->

The essential steps in the setup are:
<!-- The essential steps for setting up a Choropleth:

1. Set up the data binding:

* Bind your map to a data source containing values for each region, for example, [CSV Data Source]({%slug web-report-designer-user-guide-components-data-sources%}). Use the sample [CSV data population](https://github.com/telerik/reporting-docs/raw/master/knowledge-base/resources/PopulationDensity.zip) file, save it locally, and extract its content to a folder.
* Bind your map to a data source containing values for each region, for example, [CSV Data Source]({%slug web-report-designer-user-guide-components-data-sources%}). Use the sample [PopulationData.csv](https://github.com/telerik/reporting-docs/raw/master/knowledge-base/resources/PopulationDensity.zip) file, save it locally, and extract its content to a folder.

* Configure a color scale based on your data values.

Expand All @@ -190,14 +188,13 @@ The essential steps in the setup are:

![Choropleth map step 1 ><](images/wrd-components-tray-choropleth-map-step-1.png)

![Choropleth map step 3 ><](images/wrd-components-tray-choropleth-map-step-3.png)

//TODO
![Choropleth map step 3 ><](images/wrd-components-tray-choropleth-map-step-3.png) -->

Source Type [bug](https://github.com/telerik/reporting/issues/5129)

## See Also

* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
* [Map Overview]({%slug map_report_item_overview%})
* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%})
* [Adding Choropleth Maps to the Report]({%slug telerikreporting/designing-reports/report-structure/map/how-to/how-to-setup-a-choropleth-using-the-map-wizard%})
* [Population Density Demo Report with Choropleth](https://demos.telerik.com/reporting/population-density)
6 changes: 3 additions & 3 deletions user-guide/components/report-items.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ img[alt$="><"] {
}
</style>

# Report Items in the Web Report Designer
# Report Items

The Report Items are visual elements used to display and organize content within a report.

Expand Down Expand Up @@ -122,14 +122,14 @@ A radial gauge is a circular visual element that looks similar to a speedometer

Radial gauges are especially useful when you want to show data that feels like speed or progress, such as how fast something is going or how much of a goal has been reached.

<iframe width="560" height="315" src="https://www.youtube.com/embed/Pi4ikiZi4bE?si=WzPcyATa1SGD_qwT" 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/QrUAtdgFsM0?si=AJrUJEfiMAGbEbw9" 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>

### Linear Gauge

The Linear Gauge is represented by a horizontal or vertical scale and displays its value as a percentage of the total scale's length. To add a Linear Gauge, click the **Linear Gauge Wizard** in the **Components** tab, and then use the **Configure Linear Gauge** pane to adjust the settings.

Depending on the gauge's orientation and range, you can create horizontal, vertical, single-range, and multi-range linear gauges.

<iframe width="560" height="315" src="https://www.youtube.com/embed/cV10F3Hiky8?si=paPYNuf8TVI7WQwx" 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/9Aw-w0yn4Pw?si=M_8bMIEVOFEv12Z1" 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>

To learn more about working with the Gauge item, see the [Gauge article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/gauge/overview %}).
2 changes: 1 addition & 1 deletion user-guide/components/report-sections.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ img[alt$="><"] {

</style>

# Report Sections in the Web Report Designer
# Report Sections

Report sections divide the report vertically and define specific areas on the report page where content is rendered. Each section represents a distinct area with its own rendering behavior and determines how the report items within it are processed and displayed. The Web Report Designer provides five key sections that control the structure and layout of your reports.

Expand Down
Loading