Automatic Sorting Refresh After Chart Data Update

Version

Problem

If you use the chart.sortChart(sortType) API to sort chart data, the chart will not automatically refresh the sorting when the data source updates, as shown in the following figure.

Solution

You can enable Background Detection in Special Effect and add a Loading Start event to the chart.

Designing the Report

1. Create a general report, and create a dataset with the SQL query statement: SELECT * FROM Sales_Volume_new limit ${int(rand()*5+4)}

Inserting a Chart

Merge the required cells, click the icon on the upper toolbar, select Column Chart, and click OK, as shown in the following figure.

Setting Chart Data

Select the column chart, choose Cell Element > Data, set Data Source to Dataset Data, Dataset to ds1, Category to Salesperson, Series Name to Field Name, Field Name and Series to Sales_Volume, and Summary to Sum, as shown in the following figure.

Setting the Chart Special Effect

Select the column chart, choose Cell Element > Special Effect, set Animation Effect and Background Detection to On, and set Time Interval to 2, as shown in the following figure.

Adding a Loading Start Event

Choose Template > Web Attribute > Data Entry Setting, select Set for This Template Separately in Following Settings, and add a Loading Start event in Event Setting, as shown in the following figure.

The JavaScript code is as follows:

Note: 

1. As charts refresh frequently in this solution, interaction anomalies may occur. For example, the time interval between each refresh varies slightly in the effect preview figure.

2. To achieve the same effect in an FRM report, you can add an After Initialization event in the report block using the same JavaScript code.

setTimeout(function() {
                        var chart = FR.Chart.WebUtils.getChart("A1").vanCharts.charts[0]; 
                        chart.sortChart();
                        function sortChartAfterRefresh(chart, sortType) {
                                    chart._update = chart._update || chart.update;
                                    chart.update = function() {
                                                chart._update.call(chart);
                                                chart.sortChart(sortType);
                                                chart.sortChart(sortType);
                                    }
                        }
                        sortChartAfterRefresh(chart, 1);

            },
            1000)

Effect Display

Save the report, and click Pagination Preview. The following figure shows the preview effect.

Note:

The function is not supported on mobile terminals.

For details, you can download the template: Automatic Sorting Refresh After Data Update.cpt