5 Tips for Improving the Performance of ActiveReportsJS Report Rendering

April 15 2024

ActiveReportsJS is a 100% client-side reporting solution that renders, exports, and prints reports in the browser. The server side only retrieves the report data in JSON format. If the amount of data is within reasonable bounds, then the report rendering happens quickly.

However, suppose you want to bind a report to large volumes of data, for instance, to display summary reports in a dashboard-style manner. In that case, there are several tips and tricks that you could use to improve the performance of a report rendering.

Optimize Data Retrieval
Data Selection and Filtering
Data Handling in Data Sources
Runtime Data Binding
Simplify Expressions

Check the Dashboard Layout demo for a report that displays summary information built from 100,000 records.

Tip 1: Retrieve Compressed Data

When a server retrieves the data in JSON format, ensure the gzip compression is enabled. JSON data has a very high compression ratio. For instance, in the aforementioned Dashboard Layout sample, the size of the JSON data source is 13 MB, but only 720 KB are transferred via the network. You could consult the documentation for your web server on how to enable gzip compression:

Ready to test some of these tips out? Download ActiveReportsJS today!

Tip 2: Retrieve Only Required Information

Each object in a JSON data source typically has many fields. When the server-side retrieves the data, ensure that they contain only the fields that are actually used in a report. The exact way to achieve that depends on the details of the data API. For instance, OData APIs support the $select query that allows retrieving a limited set of fields for each object.

In addition, if the data API supports filtering data on the server side, it dramatically reduces the amount of information that needs to be processed on the client side and, thus, may improve the performance of rendering. You can find various suggestions for implementing server-side data filtering in the Dynamic Data Binding blog post.

Tip 3: Retrieve Date Parts Individually

The JSON format does not have the "Date" type, and dates are serialized to strings. If a report uses individual parts of a Date – Year, Month, or Day – then ActiveReportsJS needs to parse a date string and extract a required part. If there are a lot of Date values, then these operations can be expensive. To reduce the cost of parsing dates, the data API could retrieve the required date parts instead of the Date object serialized to strings.

For instance, in the aforementioned Dashboard Layout sample, each object in the data source contains the "Year" and the "Quarter" parts of the date. The "Year" field is used to group the column chart data, and the "Quarter" field – to group the trend lines in the table on the right side.

{
  "Amount": 1544.4,
  "Year": 2007,
  "Quarter": 20071,
  "Category": "Cameras and camcorders",
  "Region": "Europe"
}

Tip 4: Use Runtime Data Binding

A typical way to filter the report data is using report parameters, as described in the Dynamic Data Binding blog. However, if filters are set using a custom UI or application routes, you could use the Runtime Data Binding feature. A report definition is a JSON object. Hence, it could also contain data in JSON format. The code of your application, therefore, could pull the data and push them into a report.

The advantage of this approach is that your application’s code has complete control over the data fetching and can use libraries, such as SWR, to handle data caching, revalidation, focus tracking, refetching on intervals, and more.

Tip 5: Avoid Complex Expressions

ActiveReportsJS offers a rich expressions language that contains many functions and operations. It is certainly possible to use very complex expressions with the Switch operator containing nested expressions for its operands. However, in the case of large amounts of data, the evaluation of such expressions can be very costly. Therefore, if possible, calculate the result of these expressions on the server side (for instance, in the SQL query) and include them within the main data.

Which tip did you find most helpful? Let us know in the comments.

Ready to test some of these tips out? Download ActiveReportsJS today!