I. Overview
1) When we need to refresh the chart manually, including the whole chart component, we can add widgets and click js events, and use the refresh interface to refresh the chart component.
2) Different refresh interfaces are used in ordinary charts and extended charts, which will be introduced separately in this document.
3) The ordinary chart refresh interface supports the mobile terminal, but does not support the charts in dashboard block on the mobile terminal. The extended chart refresh interface does not support the mobile terminal.
4) Suggested reading: Secondary development using JavaScript
| You will learn |
|---|
|
II. Example of simulating change of data
In this example, we use the random function RAND to simulate the change of chart data in data query.
Create a new dataset query ds1, use the FRDemo dataset, and enter the following SQL:
SELECT * FROM Sales limit ${int (1+RAND()*4)}
/* Here limit the number of records displayed to simulate change of data.*/
III. Chart refresh
3.1 Chart design
Take the Floating Chart-Column Chart as an example.
1) Click [Insert] → [Floating Element] → [Insert Chart], and select Ordinary Column Chart.
2) Adjust the position of the floating chart, right-click the floating chart, click [Set Floating Element_name], and you can see that the name of the current floating element is “Float22”
3) Double-click the floating chart and click [Data] to perform data binding and make the following settings:
Dataset: ds1
Category: Region
For Series Name, select the Field Name
Series name: add two fields, namely Sales Volume and Selling Cost. The summary method is [None]
3.2 Refresh button design
1) Merge A1-G2 cells and add button widgets
2) Select the button type as [Custom] and the button name as Refresh
3) Select [Color] for the initial background and set it to light blue; Set the mouse hover background and click background to dark blue.
4) Enter the [Event] editing interface, add a click event, and enter the following js to refresh the chart after clicking the button:
var chartWrapper1 = FR.Chart.WebUtils.getChart(“Float22”);
chartWrapper1.dataRefresh();
The quotes in “FR.Chart.WebUtils.getChart (“”)” need to be filled with the name of the chart object. The name of the floating element in this example is Float22.
3.3 Preview
Save the chart and preview it in data entry or data analysis mode (the data entry widgets cannot be displayed in the pagination preview). You can see that the chart component will be refreshed after clicking the button.
IV. Extended chart refresh
4.1 Chart design
Take Floating Chart-Extended Chart[Arc Column Chart]as an example.
1) Click [Insert] → [Floating Element] → [Insert Chart], and select Extended Chart-Column Chart [Arc Column Chart]
2) Adjust the position of the floating chart, right-click the floating chart, click [Set Floating Element_name], and you can see that the name of the current floating element is “Float31”
3) Double-click the floating chart and click [Data] to perform data binding and make the following settings:
Dataset: ds1
Category: Region
Value: Sales Volume
4.2 Refresh button design
1) Please refer to 2. Refresh button design of III. Chart refresh - 2. Refresh button design
2) The extended chart does not support dataRefresh(), but the interface dealReloadChartAjax() can be used to refresh a single component. Enter the [Event] editing interface, add a click event, and enter the following js to refresh the chart after clicking the button:
var chartWrapper1 = FR.Chart.WebUtils.getChart(“Float31”);
chartWrapper1.dealReloadChartAjax();
The quotes in “FR.Chart.WebUtils.getChart (“”)” need to be filled with the name of the chart object. In this example, the name of the floating element is Float31.
4.3 Preview
Save the chart and preview it in data entry or data analysis mode (the data entry widgets cannot be displayed in the pagination preview). You can see that the chart component will be refreshed after clicking the button.
