Linkage Between Drop-down Box And Chart

In some data entry scenarios, it is hoped that after a parameter is selected from the drop-down box, the chart can be linked with the parameter.

For example: after selecting different salespersons in the drop-down box, the chart will automatically link the data line chart of the salesperson. Results as shown below:

2. Implementation ideas

Based on the chart linkage in the hyperlink, the event controls the cell value after editing through the drop-down box. You can link the chart by setting a cell hyperlink, and then simulate clicking the hyperlink to achieve linkage.

You need to use the function contentPane.setValue(), the object click event in jQuery, and a small trick to dynamically set and get the value in the report.

1. Prepare data

1) Create a new general report, add dataset ds1, and the SQL statement is: select distinct Salesperson from Sales_Volume

2) Add the dataset ds2, the SQL statement is: SELECT * FROM Sales_Volume where Salesperson='${Salesperson}'

Note: The salesperson parameter should be set to a default value, otherwise, the effect preview icon will not be displayed when the report is previewed. In the example, the salesperson default value is Zhang Shan.

2. Design table

1) Cell B1 writes the text information Salesperson, cell C1 adds a Drop-down Box widget, merges a cell, and inserts a line chart, as shown in the following figure:

3. Setting up the reporting page

From the menu bar, select Template>Web Properties>Data Entry settings, and check Display Widgets Directly, so that the widget type will be displayed directly in the Data Entry Preview:

4. Set up the data dictionary

Select cell C1, select Widget Setting>Attribute in the property panel on the right, the Actual Value and Display value of the data dictionary in the drop-down box are bound to the Salesperson, as shown in the following figure:

5. Add post-editing event

Select cell C1, select Widget Setting>Event in the property panel on the right, and add an event after editing, as shown in the following figure:

JavaScript code show as below：

//Set the currently selected salesperson into cell D1
contentPane.setCellValue('D1',null,this.getValue());
//Click on the hyperlink in cell D1
$('td[id^=D1] .linkspan').click();

6. Design a line chart

1) Select cell B3 where the line chart is located, and bind the chart data as shown below:

2) Set the title of the line chart as: Sales Statistics.

7. Set up linkage

1) Select cell D1, add a hyperlink of the Link Cell type, set the linkage cell to cell B3 where the line chart is located, and add a parameter Salesperson whose value is cell D1, as shown in the following figure:

Note: The salesperson linked here must be the cell number, and the formula =$$$ cannot be used, otherwise the value dynamically set to this cell by JS will not be retrieved.

2) In order to hide the value of cell D1 when displaying on the front end, select cell D1, select Cell Attributes>Display in the property panel on the right, and set the formula form to formula”, as shown in the following figure:

8. Effect preview

Save the template, click Data Entry Preview, the effect is as follows:

Note: Mobile terminal is not supported.

See the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\SpecialSubject\HyplinkReport\Linkage Between Drop-down Box And Chart.cpt

Click to download the template: 

Linkage Between Drop-down Box And Chart.cpt