diff --git a/user-guide/components/charts.md b/user-guide/components/charts.md index dac8207c1..3e1b6df32 100644 --- a/user-guide/components/charts.md +++ b/user-guide/components/charts.md @@ -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: -
- >< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Chart TypeDescription
Bar ChartDisplays 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 ChartDisplays 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 ChartDisplays a series as a set of points connected by a line with the whole area filled in under the line.
Column ChartDisplays data series as sets of vertical bars that are grouped by category.
Pie ChartDisplays the contribution of fractional parts to a whole and is most commonly used to make comparisons between groups.
Doughnut ChartSimilar to the Pie Chart which has an open space in the center.
><
-
- +![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. +* [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 - - - -### 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 @@ -101,13 +52,41 @@ Components, 2004, 310 -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 + + + +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). @@ -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*: @@ -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*: @@ -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*: diff --git a/user-guide/components/components.md b/user-guide/components/components.md index 27841d826..3fcf46df2 100644 --- a/user-guide/components/components.md +++ b/user-guide/components/components.md @@ -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%; +} +} # 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) -
- - >< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
GroupReport Items
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.
  • TextBox
  • HtmlTextBox
  • PictureBox
  • CheckBox
  • Barcode
  • Shape
  • Panel
  • Radial Gauge Wizard
  • Linear Gauge Wizard
Tables - The Table report item is a generalized layout report item that displays report data in cells that are organized into rows and columns.
  • List
  • Table
  • Crosstab
  • Table Wizard
  • Crosstab Wizard
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.
  • SubReport
Maps - The Map report item is a native Telerik Reporting item which enables you to visualize an aggregated business data in a geographical manner.
  • Map types: Point, Pie, Column
  • Choropleth
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.
  • Bar Chart
  • Line Chart
  • Area Chart
  • Column Chart
  • Pie Chart
  • Doughnut Chart
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.
  • Page Header
  • Page Footer
  • Report Header
  • Report Footer
  • Table of Contents
DataSources - Data Source components are used to connect data items to different types of data without writing any code.
  • SQL Data Source
  • CSV Data Source
  • Web Service Data Source
  • GraphQL Data Source
  • JSON Data Source
  • Object Data Source
-
+|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.|| +|[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.|| +|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.|| +|[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.|| +|[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.|| +|[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.|| +|[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.|| ## Next Steps diff --git a/user-guide/components/data-sources.md b/user-guide/components/data-sources.md index 448f78fc5..5ca3d693d 100644 --- a/user-guide/components/data-sources.md +++ b/user-guide/components/data-sources.md @@ -30,48 +30,35 @@ table th:nth-of-type(2) { The **Web Report Designer** offers a **Data Sources** section inside the **Components** tray allowing the end-user to fetch data from different storages: -
- >< - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Data SourceDescription
SQL Data SourceEnables data items to display data located in a relational database, including Microsoft SQL Server and Oracle databases, as well as OLE DB and ODBC data sources, using little or no code.
CSV Data SourceEnables data items to display data located in a CSV document, including files (*.csv, *.tsv, *.txt, and others), inline string or stream.
Web Service Data SourceEnables data items to display data located on a service in JSON format.
GraphQL Data SourceEnables data items to retrieve data in JSON format from a GraphQL service.
JSON Data SourceEnables data items to display JSON data located in a local file or saved directly into the report.
Object Data SourceProvides a way to bind the Data Report Items to a middle-tier business object.
-
+![Tables Group ><](images/wrd-components-tray-data-sources-design.png) + + * [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#sql-data-source) - Enables data items to display data located in a relational database, including Microsoft SQL Server and Oracle databases, as well as OLE DB and ODBC data sources, using little or no code. + + * [CSV Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#csv-data-source) - Enables data items to display data located in a CSV document, including files (*.csv, *.tsv, *.txt, and others), inline string or stream. + + * [Web Service Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#web-service-data-source) - Enables data items to display data located on a service in JSON format. + + * [GraphQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#graphql-data-source) - Enables data items to retrieve data in JSON format from a GraphQL service. + + * [JSON Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#json-data-source) - Enables data items to display JSON data located in a local file or saved directly into the report. + + * [Object Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#object-data-source) - Provides a way to bind the Data Report Items to a middle-tier business object. ## SQL Data Source -By clicking the `SQL Data Source` item in the **Components** tray, 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: +To add a new `SQL Data Source`: + +1. Click the `SQL Data Source` item in the **Components** tray. + +2. 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: >caption Existing vs New SQL Connection ![Existing vs New SQL Connection ><](images/wrd-components-tray-data-sources-sql-choose-data-connection.png) -If you want to skip any further fine-tuning, click the `Finish` button to confirm the configured connection and close the wizard. Otherwise, you can continue with the wizard steps and apply the desired settings: +If you want to skip any further fine-tuning, click the `Finish` button to confirm the configured connection and close the wizard. Otherwise, you can continue with the wizard steps and apply the desired settings. + +>note Depending on the user's configuration at a specific step, you may be navigated to one step or another according to the user journey. The following table lists all the steps that the wizard offers: |Wizard step|Description| |----|----| @@ -88,7 +75,11 @@ If you want to skip any further fine-tuning, click the `Finish` button to confir ## CSV Data Source -By clicking the `CSV Data Source` item in the **Components** tray, 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: +To add a new `CSV Data Source`: + +1. Click the `CSV Data Source` item in the **Components** tray. + +2. 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: >caption Upload a CSV Source vs Inline @@ -111,7 +102,11 @@ If you want to skip any further fine-tuning, click the `Finish` button to confir ## Web Service Data Source -By clicking the `Web Service Data Source` item in the **Components** tray, the [Web Service Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/csvdatasource-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. +To add a `Web Service Data Source`: + +1. Click the `Web Service Data Source` item in the **Components** tray. + +2. The [Web Service Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/csvdatasource-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. >caption Setup Web Service Data Source @@ -135,51 +130,55 @@ If you want to skip the further settings steps, click the `Finish` button to con ## GraphQL Data Source -By clicking the `GraphQL Data Source` item in the **Components** tray, 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. - -The wizard allows you to setup one of the options: -* Setup the properties of the HTTP request which will retrieve data from the GraphQL service. -* Reference an external data file. -* Use inline data string containing the data (required if Service URL or external data file is not set). - -You are expected to see the following steps: - -1. Setup the **GraphQL Service URL** (e.g. https://buybutton.store/graphql) - -1. Provide the **Query** for data retrieval: - - ```SQL - query paginateProducts($cursor: String) { - site { - products(first: 5, after: $cursor) { - pageInfo { - endCursor - hasNextPage - } - edges { - node { - entityId - name +To add a `GraphQL Data Source`: + +1. Click the `GraphQL Data Source` item in the **Components** tray. + +2. 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. + + The wizard allows you to setup one of the options: + * Setup the properties of the HTTP request which will retrieve data from the GraphQL service. + * Reference an external data file. + * Use inline data string containing the data (required if Service URL or external data file is not set). + + You are expected to see the following steps: + + 1. Setup the **GraphQL Service URL** (e.g. https://buybutton.store/graphql) + + 1. Provide the **Query** for data retrieval: + + ```SQL + query paginateProducts($cursor: String) { + site { + products(first: 5, after: $cursor) { + pageInfo { + endCursor + hasNextPage + } + edges { + node { + entityId + name + } + } } } } - } - } - ``` + ``` - >caption Setup GraphQL Service URL and Configure the Query + >caption Setup GraphQL Service URL and Configure the Query - ![GraphQL Data Source><](images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png) + ![GraphQL Data Source><](images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png) -1. Specify the parameter name, type, value and design time value for each data source parameter. The value can be a default value or an expression to evaluate. The design-time value should be a constant value. This is necessary for retrieving the data source schema correctly at design time: + 1. Specify the parameter name, type, value and design time value for each data source parameter. The value can be a default value or an expression to evaluate. The design-time value should be a constant value. This is necessary for retrieving the data source schema correctly at design time: - ![GraphQL Request Parameters><](images/wrd-components-tray-data-sources-graphql-request-parameters.png) + ![GraphQL Request Parameters><](images/wrd-components-tray-data-sources-graphql-request-parameters.png) -1. Configure Authentication settings (occurs only if an authentication method is selected in the first step): Transmits credentials as username/password pairs, encoded using base64. + 1. Configure Authentication settings (occurs only if an authentication method is selected in the first step): Transmits credentials as username/password pairs, encoded using base64. -1. As a final step, you can **Preview** the result: + 1. As a final step, you can **Preview** the result: - ![GraphQL Preview Data><](images/wrd-components-tray-data-sources-graphql-preview-data.png) + ![GraphQL Preview Data><](images/wrd-components-tray-data-sources-graphql-preview-data.png) ## JSON Data Source @@ -199,7 +198,11 @@ By clicking the `JSON Data Source` item in the **Components** tray, the [JSON Da ## Object Data Source -By clicking the `Object Data Source` item in the **Components** tray, 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: +To add an `Object Data Source`: + +1. Click the `Object Data Source` item in the **Components** tray. + +2. 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: * Select Business object @@ -209,6 +212,7 @@ By clicking the `Object Data Source` item in the **Components** tray, the [Objec ![Object Data Source ><](images/wrd-components-tray-data-sources-object-data-source-data-member.png) +The following table lists all the steps offered by the wizard for configuring the ObjectDataSource: |Wizard step|Description| |----|----| |1. Choose a business object|The selected business object type's assembly-qualified name will be stored in the data source component's DataSource property.| @@ -220,15 +224,10 @@ By clicking the `Object Data Source` item in the **Components** tray, the [Objec ![Preview Data from Object Data Source ><](images/wrd-components-tray-data-sources-object-data-source-preview.png) -## Data Source General Settings - -Once a DataSource component is configured, it can be modified later by selecting it in the **Explorer** tab: - -![GraphQL Data Source Settings><](images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer.png) - -On the right-hand side the **General** settings (dependent on the specific Data Source item) are loaded and the user can further modify them: +## Modifying Already Configured Data Sources -![GraphQL Data Source Settings><](images/wrd-components-tray-data-sources-graphql-data-source-settings.png) +Once a DataSource component is configured, it can be modified later by selecting it in the **Explorer** tab. On the right-hand side the **General** settings (dependent on the specific Data Source item) are loaded and the user can further modify them: +![GraphQL Data Source Settings><](images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png) ## See Also diff --git a/user-guide/components/images/wrd-components-tray-charts-design-mode.png b/user-guide/components/images/wrd-components-tray-charts-design-mode.png new file mode 100644 index 000000000..e28a74f47 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-design-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-design.png b/user-guide/components/images/wrd-components-tray-data-sources-design.png new file mode 100644 index 000000000..e011f2fd7 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-design.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png new file mode 100644 index 000000000..47ab6a893 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png differ diff --git a/user-guide/components/images/wrd-components-tray-design-mode.png b/user-guide/components/images/wrd-components-tray-design-mode.png new file mode 100644 index 000000000..c3d5db455 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-design-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-grid-mode.png b/user-guide/components/images/wrd-components-tray-grid-mode.png new file mode 100644 index 000000000..7c1d8a39a Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-grid-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-design-mode.png b/user-guide/components/images/wrd-components-tray-maps-design-mode.png new file mode 100644 index 000000000..661c60479 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-design-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables-design.png b/user-guide/components/images/wrd-components-tray-tables-design.png new file mode 100644 index 000000000..3e08c5ea8 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables-design.png differ diff --git a/user-guide/components/images/wrd-components-tray.png b/user-guide/components/images/wrd-components-tray.png index 2f1f6372b..00366c86a 100644 Binary files a/user-guide/components/images/wrd-components-tray.png and b/user-guide/components/images/wrd-components-tray.png differ diff --git a/user-guide/components/maps.md b/user-guide/components/maps.md index c9c063c52..d02b1010f 100644 --- a/user-guide/components/maps.md +++ b/user-guide/components/maps.md @@ -13,35 +13,24 @@ img[alt$="><"] { border: 1px solid lightgrey; } -table th:first-of-type { +/* table th:first-of-type { width: 20%; } table th:nth-of-type(2) { width: 80%; -} +} */ # Maps The **Web Report Designer** offers a **Maps** section inside the **Components** tray allowing the end-user to visualize aggregated business data in a geographical manner. -
- >< - - - - - - - - - - - - - -
Map TypeDescription
MapThe data may be presented in different formats that is determined by the chosen Map Type: Point, Pie, Column.
ChoroplethThe Choropleth map type is a thematic map that uses graded color differences to display a measure over predefined regions or areas, and is one of the most popular ways to visualize how a measure varies across a geographic area.
><
-
+![Maps Group ><](images/wrd-components-tray-maps-design-mode.png) + + +* [Map]({%slug web-report-designer-user-guide-components-maps%}#map) - The data may be presented in different formats that is determined by the chosen Map Type: Point, Pie, Column. +* [Choropleth]({%slug web-report-designer-user-guide-components-maps%}#choropleth) - The [Choropleth map](https://en.wikipedia.org/wiki/Choropleth_map) type is a thematic map that uses graded color differences to display a measure over predefined regions or areas, and is one of the most popular ways to visualize how a measure varies across a geographic area. + The **Map Report item** requires one source collection for loading the visual (e.g. geographical) map data (provided by a Location and Tile providers) and one separate Data Source for the data itself storing the values that correspond to the respective location (displayed as small charts on the map). @@ -56,9 +45,9 @@ The **Location Provider** matches the addresses or locations with geographical c |Location Provider|Description| |----|----| |Azure| The AzureLocationProvider uses the [Azure Maps Get Geocoding Request](https://learn.microsoft.com/en-us/rest/api/maps/search/get-geocoding) to get location information about the requested address. This provider was introduced in Q2 2025 as part of the transition from Bing Maps to Azure Maps.| -|Bing |The BingLocationProvider *(Deprecated)* uses the [Bing Maps Locations API](https://learn.microsoft.com/en-us/bingmaps/rest-services/locations/) to get location information about the requested address.| -|MapQuestOpenAPI|The MapQuestOpenAPILocationProvider (Obsolete) uses the [MapQuest Geocoding Open API]() geocoding service to provide a single-line address and receive potential geographical coordinates of the geocoded location.| -|MapQuest|The MapQuestLocationProvider (Obsolete) uses the [MapQuest Geocoding API](https://developer.mapquest.com/documentation/api/geocoding/) geocoding service to provide a single-line address and receive potential geographical coordinates of the geocoded location.| +|Bing *(Deprecated)*|The BingLocationProvider uses the [Bing Maps Locations API](https://learn.microsoft.com/en-us/bingmaps/rest-services/locations/) to get location information about the requested address.| +|MapQuestOpenAPI (Obsolete)|The MapQuestOpenAPILocationProvider uses the [MapQuest Geocoding Open API]() geocoding service to provide a single-line address and receive potential geographical coordinates of the geocoded location.| +|MapQuest (Obsolete) |The MapQuestLocationProvider uses the [MapQuest Geocoding API](https://developer.mapquest.com/documentation/api/geocoding/) geocoding service to provide a single-line address and receive potential geographical coordinates of the geocoded location.| >caution Microsoft has announced the deprecation of **Bing Maps for Enterprise**: > * `Free (Basic)` accounts can use Bing Maps services until June 30, 2025. @@ -71,13 +60,15 @@ The **Tile Provider** requests and downloads the imagery data for the specified |TileProvider|Description| |----|----| |AzureMapsTileProvider|Supports a variety of tile sets that let you customize the appearance and data shown on your map.| -|BingMapsTileProvider |*(Deprecated)* Uses the [Bing Maps REST Services](https://learn.microsoft.com/en-us/bingmaps/rest-services/) to request metadata information that is needed to resolve the tile requests URLs, zoom levels, tile sizes and attribution information such as the text or logo that will be displayed on the map.| -|MapQuestTileProvider| *(Obsolete)* Uses the [`MapQuest`](https://www.mapquest.com/) tile servers that provides the tiles in the **OpenStreetMap Tiles** and the **MapQuest Open Aerial Tiles** imagery sets.| +|BingMapsTileProvider *(Deprecated)*|Uses the [Bing Maps REST Services](https://learn.microsoft.com/en-us/bingmaps/rest-services/) to request metadata information that is needed to resolve the tile requests URLs, zoom levels, tile sizes and attribution information such as the text or logo that will be displayed on the map.| +|MapQuestTileProvider *(Obsolete)*|Uses the [`MapQuest`](https://www.mapquest.com/) tile servers that provides the tiles in the **OpenStreetMap Tiles** and the **MapQuest Open Aerial Tiles** imagery sets.| -## Map +## Creating a Report with the Map Report Item The following tutorial aims to list all the necessary steps for creating a Map which will present the sales distribution by products among several states using the Adventure Works sample database. + + Since it 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). ### Adding the Data Source @@ -150,10 +141,6 @@ Select the location provider (e.g. Azure) that will be used to geocode the **Sta ![Defining the Location and Tile Providers ><](images/wrd-components-tray-maps-location-tile-providers.png) -A detailed video is available covering the complete process: - - - ## 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 is a specific map item coloring the respective area according to the value it stores. diff --git a/user-guide/components/tables.md b/user-guide/components/tables.md index ab2a704b3..3c6a8ca04 100644 --- a/user-guide/components/tables.md +++ b/user-guide/components/tables.md @@ -7,7 +7,7 @@ tags: web, report, design, report, components, table, list, crosstab published: True position: 2 --- -List +