Linkage Between a Drop-down Box and a Chart

Expected Effect

You can use widgets on the parameter panel to query data in general reports, which makes it convenient for you to achieve the linkage between the widgets and charts based on parameters. However, in some cases, you may want the chart to be directly linked to the corresponding data after selecting the needed data, without the need to click the search button.

For example, after you select a different salesperson, the chart will be automatically linked to the data of the corresponding salesperson. The following figure shows the effect.

Implementation Method

You can add an After Editing event to the widget, use this.getValue to obtain the widget value, and use the API FR.Chart.WebUtils.changeParameter() to modify the chart parameter and request data again, thereby achieving the linkage between the chart and the widget after editing.

Note:

You can use widgets to realize automatic data queries in FVS visualization dashboards. For details, see FVS Dropdown Box Widget. You can use widgets to realize automatic data queries in bodies of FRM reports. For details, see Automatic Query of Dashboard.

Data Preparation

1. Choose File > New General Report in the upper left corner of the designer, and select Refresh Technology as the template theme.

2. Create a database query named ds1 with the SQL statement SELECT * FROM Sales_Volume where Salesperson='${Salesperson}'. Set the default value of the parameter to Jack, as shown in the following figure.

Chart Design

Chart Insertion

Select required cells, click the Merge Cells icon on the toolbar, click the Insert Chart icon, select Line Chart, and click OK, as shown in the following figure.

Data Binding

Select the chart, choose Cell Element > Data on the right attribute panel, and bind the data, as shown in the following figure.

Save the template and click Pagination Preview. The following figure shows the effect that only the product sales volume of the default value Jack is displayed.

Parameter Panel Setting

Parameter Adding

1. Click the icon above the chart to enter the parameter panel editing page, and click Add All in the upper right corner to add the Salesperson parameter to the parameter panel.

2. Deselect Display Nothing Before Query. Otherwise, when you click the query button, no chart will be displayed.

Drop-down Box Widget Setting

Select Drop-down Box Widget as the parameter widget and bind the Salesperson field from the Sales_Volume table in Data Dictionary, as shown in the following figure.

Save and preview the report again. The following figure shows the effect. After selecting a salesperson, you need to click the query button to change the chart.

After Editing Event Setting

Select Drop-down Box Widget, click Event on the right attribute panel, add an After Editing event, and enter the JavaScript code:

FR.Chart.WebUtils.changeParameter({
chartID:'A3',//The cell where the chart is located
para:{
Salesperson:.get.this.Value()
      }
})

The following figure shows the steps.

Finally, delete the query button.

Effect Display

Save the report and click Pagination Preview. The effect is the same as that shown in section "Expected Effect."

Note:

The effect cannot be previewed on mobile terminals.

Linkage Between a Chart and a Cell Widget

In some cases, you may want to add the widget to a cell instead of the parameter panel, as shown in the following figure.

The widget setting methods for Data Dictionary and Event are the same as those for the widget on the parameter panel. You only need to modify chartID based on the cell where the chart is located.

Finally, you need to select Data Entry Preview to use the widget in the cell. The following figure shows the effect.

Linkage Between a Chart and a Drop-down Checkbox Widget

The setting methods for Data Dictionary and the After Editing event are the same for both the drop-down checkbox widget and the drop-down box. You need to pay attention to two points:

1. You need to modify the SQL statement to SELECT * FROM Sales_Volume where Salesperson in ('${Salesperson}'). In this case, the corresponding data can be displayed in the chart.

2. You need to select String in Returned Value's Type for the drop-down checkbox widget and enter ',' in Separator, as shown in the following figure.

The following figure shows the expected effect.

For details, you can download the example templates:

Linkage Between a Drop-down Box on the Parameter Panel and a Chart.cpt

Linkage Between a Drop-down Box in a Cell and a Chart.cpt

Linkage Between a Drop-down Box on the Parameter Panel and a Chart.cpt