Carousel Highlighting of Map Data-FineReport Help Document

Last update： 2024-03-06

I. Overview

1. Expected result

In some cases, provinces need to be highlighted during the map data carousel, and other charts can be linked to expand the display dimensions of map data, as shown in the following figure:

2. Implementation ideas

The effect of highlighting the provinces on the map is achieved by setting Special Effects> Conditional Formatting Display.
The linkage between the map and other charts is realized through the parameter pane，The specific method is to put all the area names into a text widget in the parameter pane，The text widget uses the after initialization event to assign values to the drop-down box widget in turn, and then uses the drop-down box widget to filter and query.

Note: When the template is reloaded during parameter query, a short blank interface will appear. If you don't need to highlight, you can refer to the document: JS Synchronous Display of Map and Chart Tooltips.

II.Example

1. Data preparation

Create a new dashboard, create two new database queries, the SQL query statements are:

ds1: SELECT * FROM Map where Provinces like '%Province%'

ds2: SELECT * FROM Map where 1=1 ${if(len(Provinces)==0,"","and Provinces='"+Provinces+"'")} and Provinces like '%Province%'

The ds2 dataset defines a parameter, the parameter is named Provinces. As shown below:

2. Design chart

Drag the map and column chart into the body, and widen the size of the map component appropriately. As shown below:

1) Design map

Edit the map and bind the map data. As shown below:

Click Special Effects> Conditional Format to add conditional formatting to the map, so that the region name, that is, the province, will be displayed in red according to the parameterProvincesduring the carousel. The settings are shown in the figure below:

2) Design column chart

Edit the column chart and bind the data of the column chart. As shown below:

Click Style, uncheck the title to be showed and set the legend to the top position. As shown below:

3. Design parameter pane

1) Add parameters

Drag the parameter pane into the body, and automatically place it at the top of the body. Click theAdd Allbutton in the upper right corner, and the parameterProvinces will be added to the parameter pane. As shown below:

2) Set the drop-down box widget

SetProvincesas the drop-down box widget. Click on icon, select drop-down box widget, as shown in the figure below:

The widget value of the drop-down box widget is set to Anhui Province by default, the data dictionary is Data Query>ds1, the actual value, and the displayed value are bothProvinces. As shown below:

3) Set the text widget

Drag a text widget to the parameter pane, set its widget name to text0, and uncheck it to be visible.

Set the widget value to the formula: =sql("FRDemoEN","select Provinces from map where Provinces like'%Province'",1). That is, the widget value is the province obtained from the database table.

Add an after initialization event to the text widget, the JavaScript code is as follows:

var text0=this.getValue();
var arr=text0.split(",");
var i=1;
var a=this.options.form.getWidgetByName("Provinces");
setInterval(function(){
var value=arr[i];
if(i<=arr.length){
a.setValue(value);
_g().parameterCommit();
if(i==arr.length-1){
i=0;
}
else{i=i+1;}
}
},5000);

The steps are shown in the figure below:

4) Set parameter pane attributes

Select the parameter pane para, and uncheckDisplay Nothing Before Query and Use Parameter Combination. If check Display Nothing Before Query, the data of the first province will not be displayed when the report is previewed.