Skip to content

Commit bd919ae

Browse files
Dess camtasia videos (#1777)
* Reuploaded videos * link to the demo https://demos.telerik.com/reporting/designer * Changes for the choropleth - no video will be provided due to a bug * charts reuploaded videos * map and bar chart reuploaded * Applied Dancho's suggestions * Remove the slugs from DataSources article * Update item style --------- Co-authored-by: Yordan <[email protected]>
1 parent b5a10b8 commit bd919ae

File tree

9 files changed

+35
-38
lines changed

9 files changed

+35
-38
lines changed

user-guide/components/charts.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ Components, 2003, 280
8181
Components, 2004, 310
8282
```
8383

84-
<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>
84+
<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>
8585

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

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

100100
>caption Adding a Bar Chart and populating it with data
101101
102-
<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>
102+
<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>
103103

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

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

122122
>caption Adding a Column Chart and populating it with data
123123
124-
<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>
124+
<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>
125125

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

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

144144
>caption Adding an Area Chart and populating it with data
145145
146-
<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>
146+
<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>
147147

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

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

166166
>caption Adding a Line Chart and populating it with data
167167
168-
<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>
168+
<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>
169169

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

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

192192
>caption Adding a Pie Chart and populating it with data
193193
194-
<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>
194+
<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>
195195

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

user-guide/components/components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ You can add components to your report in two ways:
4040
|----|----|
4141
|[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>|
4242
|[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>|
43-
|[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>|
43+
|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>|
4444
|[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>|
4545
|[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>|
4646
|[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>|

user-guide/components/data-sources.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ To add a new SQL Data Source:
5757

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

60-
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:
60+
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:
6161

6262
>caption Existing vs New SQL Connection
6363
@@ -86,7 +86,7 @@ To add a new CSV Data Source:
8686

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

89-
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:
89+
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:
9090

9191
>caption Upload a CSV Source vs Inline
9292
@@ -115,7 +115,7 @@ To add a Web Service Data Source:
115115

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

118-
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.
118+
1. The Web Service Data Source configuration wizard appears allowing you to create new or edit an existing WebServiceDataSource component.
119119

120120
>caption Setup Web Service Data Source
121121
@@ -145,7 +145,7 @@ To add a GraphQL Data Source:
145145

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

148-
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.
148+
1. The GraphQL Data Source configuration wizard appears allowing you to create new or edit an existing GraphQLDataSource component.
149149

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

@@ -194,7 +194,7 @@ The following configuration steps are available:
194194

195195
## JSON Data Source
196196

197-
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:
197+
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:
198198

199199
>caption Upload a new JSON file vs Inline JSON data
200200
@@ -212,9 +212,9 @@ By clicking the `JSON Data Source` item in the **Components** tab, the [JSON Dat
212212

213213
To add an `Object Data Source`:
214214

215-
1. Click the `Object Data Source` item in the **Components** tab.
215+
1. Click the **Object Data Source** item in the **Components** tab.
216216

217-
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:
217+
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:
218218

219219
* Select Business object
220220

user-guide/components/maps.md

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ The following tutorial demonstrates how to create a Map that presents sales dist
8888

8989
> 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).
9090
91-
<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>
91+
<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>
9292

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

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

165165
## Choropleth
166166

167-
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.
167+
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.
168168

169169
The Choropleth below shows the 100 most populated countries:
170170

171-
>caption World population density
172-
173171
![Choropleth map ><](images/wrd-components-tray-choropleth-map.png)
174172

175-
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.
173+
>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.
176174
177-
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.
175+
<!-- 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. -->
178176

179-
The essential steps in the setup are:
177+
<!-- The essential steps for setting up a Choropleth:
180178
181179
1. Set up the data binding:
182180
183-
* 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.
181+
* 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.
184182
185183
* Configure a color scale based on your data values.
186184
@@ -190,14 +188,13 @@ The essential steps in the setup are:
190188
191189
![Choropleth map step 1 ><](images/wrd-components-tray-choropleth-map-step-1.png)
192190
193-
![Choropleth map step 3 ><](images/wrd-components-tray-choropleth-map-step-3.png)
194-
195-
//TODO
191+
![Choropleth map step 3 ><](images/wrd-components-tray-choropleth-map-step-3.png) -->
196192

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

199194
## See Also
200195

201196
* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
202197
* [Map Overview]({%slug map_report_item_overview%})
203198
* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%})
199+
* [Adding Choropleth Maps to the Report]({%slug telerikreporting/designing-reports/report-structure/map/how-to/how-to-setup-a-choropleth-using-the-map-wizard%})
200+
* [Population Density Demo Report with Choropleth](https://demos.telerik.com/reporting/population-density)

user-guide/components/report-items.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ img[alt$="><"] {
1414
}
1515
</style>
1616

17-
# Report Items in the Web Report Designer
17+
# Report Items
1818

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

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

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

125-
<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>
125+
<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>
126126

127127
### Linear Gauge
128128

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

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

133-
<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>
133+
<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>
134134

135135
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 %}).

0 commit comments

Comments
 (0)