I. Overview
1. Version
| Report Designer Version | JAR package | Extended Charts Plugin Version |
|---|---|---|
| 10.0 | 2021-10-15 | V2.2 |
2. Application scenarios
When the large screen chart (extended chart plugin) is played or refreshed to a certain point, the loading animation or incremental refresh of the linked chart is triggered, and the large screen will have a more cool effect.
3. Function introduction
When the dynamic effect is played, the data of other components are automatically triggered to follow the linkage, and the components are analyzed more specifically through linkage.
As shown below:
II. Preparation
1. Data preparation
Prepare the required data table and import the data table into the built-in FRDemo database:
Note: For details, please refer to using third-party software to migrate the built-in FRDemo database to the specified database
2. Layout
According to actual needs, determine the main information of the carousel and the corresponding carousel form, as well as other required secondary information and display forms.
The example in this article is to use the carousel target gear to link the other eight components, so the layout design is as shown in the following figure:
3. Preparation of beautification materials
Prepare report block and large screen background image:
III. Operation steps
1. Plugin installation
Install the Extended Chart plugin.
Designer plugin installation method reference: Designer plugin management
Server installation plug-in method reference: Server plugin management
2. Create a new template
Create a new dashboard and store it as
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\Automatically linkage with other components during carousel.frm
Note: For details, please refer to the example of getting started with the dashboard
1)Set adaptive properties
Click the menuTemplate> PC Adaptive Attr, choose the Individually set for the templa, select font No Adaptive, form Bidirectional Adaptive, as shown in the following figure:
Note: For details, see Template Adaptive Attributes
2)Set layout mode
Select body, select attributes, set the layout type to Absolute Layout, and the zooming mode toArea fit. As shown below:
Note: For details, please refer to the layout of the dashboard
3. Create a new dataset
Create a new template dataset, as shown in the following table:
| Dataset | SQL statement |
|---|---|
| ds1 | SELECT * FROM Headquarter_pane |
| ds2 | SELECT * FROM Headquarter_pane WHERE Branch='${c}' |
| ds3 | SELECT * FROM Headquarter_brand WHERE Branch='${c}' |
| ds4 | SELECT * FROM Headquarter_car_series WHERE Company='${c}' ORDER BY Sales |
| ds5 | SELECT * FROM Heaadquarter_staff WHERE Branch='${c}' |
| ds6 | SELECT * FROM Headquarter_month WHERE Branch='${c}' |
| ds7 | SELECT * FROM Headquarter_influence_factors WHERE Branch='${c}' |
| ds8 | SELECT * FROM Headquarter_sales_analysis WHERE Branch='${c}' |
4. Design report
1)Drag and drop of components
In order to facilitate data setting, when dragging and dropping components, the components, drag-and-drop sequence, and dataset can be matched, as shown in the following table:
| Widget name | dataset | Widget Form |
|---|---|---|
| chart0 | ds1 | Extended Chart-Others |
| chart1 | ds2 | Extended Chart-KPI card |
| chart2 | ds2 | Extended Chart-Gauge |
| chart3 | ds3 | Pie Chart |
| chart4 | ds4 | Bar Chart |
| chart5 | ds5 | Word Cloud |
| chart6 | ds6 | Area Chart |
| chart7 | ds7 | Radar Chart |
| chart8 | ds8 | Column Chart |
| report00 | - | Report Block |
| report10 | - | Report Block |
According to the layout, drag and drop all the components to the corresponding positions in the order of the above table, as shown in the figure below:
2)Component settings
For the design of extended charts, please refer to [New] Extended Charts, for other chart designs, please refer to [New] Charts, and for report block design, please refer to Cell Styles.
5. Set up linkage
Take chart0 linkage chart1 as an example.
Edit chart0, select Special Effect>Carousel Linkage>Edit, set the form object, linkage animation, and parameters.
Form object: chart1
Linkage animation:
| Linkage Animation | Animation Effect |
|---|---|
| Reload | Reload all components as a whole |
| Incremental Refresh | The components are superimposed and updated on the existing basis |
parameter:
The parameter set in the document is branch='${c}', and the node name is set to branch in chart1, and the parameter c should select node name at this time.
As shown below:
6. Beautify
1)Set the big screen background
Select the body, click Attributes>Advanced, set the Main Fillingimage, open the Background picture.png, and set the image format to Extended Image, as shown in the following figure:
2)Set title background
Select the report block report10, click Attributes>Body Content, set the Main Fillingimage, open the title background.png, and set the image format to Extended Image, as shown in the following figure:
3)Set the chart block border
Set borders for chart blocks chart2~chart8, take chart4 as an example.
Select the chart block chart2, click Attributes>Body Content, set the Main Fillingimage, open the Border element.png, and set the image format to Extended Image, as shown in the following figure:
7. Preview effect
Save the template, select the Pagination Preview, the effect is as shown in I.3. Function Introduction.
Note 1: The extended chart does not support mobile preview.
Note 2: The extended chart only supports Chrome browser.
IV. Completed template
The template has been completed, please refer to:
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extended chart\Automatic linkage with other components during carousel.frm
Click to download the template: automatically link other components during carousel.frm
Click to download the data sheet:
Click to download the background frame picture:
