What's New in ActiveReportsJS 4.1

We are happy to announce the release of ActiveReportsJS v4.1. In this update, we are excited to introduce several features and enhancements to continue to improve your reporting experience, from pageless layouts and custom code functions to new chart types and improved data processing.

Pageless Layout

ActiveReportsJS now supports the creation of Pageless Reports. This new layout type provides an alternative to the traditional page-by-page reports by preventing data across separate tabs. The pageless layout also enables the use of scrollable containers from a streamlined user interaction. This enhances the flexibility of report designs with ActiveReportsJS, offering user-friendly approaches to structuring and navigating your reports.

For a step-by-step tutorial on creating your first pageless report, please refer to the Getting Started with Pageless Reports walkthrough.

Ready to Check Out What's New? Download ActiveReportsJS Today!

Custom Code Functions

We’re also excited to announce that ActiveReportsJS now supports using custom code functions within your report expressions. This feature enhances flexibility in your report design, offering an efficient way to manage complex calculations, reuse code, and facilitate advanced conditional formatting.

Here are some ways that you can benefit from this feature:

• Complex Calculations: While ActiveReportsJS expressions can handle simple to moderately complex calculations, you may have business requirements requiring more advanced calculations. Custom code simplifies these scenarios, providing an elegant solution that goes beyond the capabilities of standard expressions.
• Code Reusability: If you find yourself using similar code snippets across multiple expressions, custom code can provide a more efficient approach; by defining the function once, you can then call it throughout your report. This practice not only enhances code maintainability, but also contributes to cleaner report designs.
• Advanced Conditional Formatting: Although basic conditional formatting can be managed with expressions, custom code takes it a step further, accommodating more intricate scenarios that demand dynamic styling based on specific conditions.

For instance, in our Runtime Filtering demo, we leverage a custom function to format currency values in relation to their magnitude. This function is defined as follows:

function formatCurrencyValue(value) {
  let currencySymbol = "$";
  if(value >= 1000000000) {
    return currencySymbol + (value / 1000000000).toFixed(1) + "B";
  } else if(value >= 1000000) {
    return currencySymbol + (value / 1000000).toFixed(1) + "M";
  } else if(value >= 1000) {
    return currencySymbol + (value / 1000).toFixed(1) + "K";
  } else {
    return currencySymbol + value.toFixed(1);
  }
}

Then, in the report, textboxes that display numeric values call this function through expressions like so:

{Code.formatCurrencyValue(Sum(SalesAmount))}

This elegant approach allows for dynamic formatting of currency values based on size, improving the readability and interpretation of your data.

To learn more about incorperating custom code into your ActiveReportsJS projects, refer to our in-depth guide. You’ll find detailed information and practical examples to help you make the most of this powerful feature.

Parameters View

We have now integrated a new feature to create a custom parameters view using advanced editors. This enhancement accommodates various parameters such as Date Range, Slider, ListBox, and more, allowing for more versatile control over your data.

Additionally, we’ve updated the Parameters Documentation to include a comprehensive guide. It provides detailed instructions on how to effectively design and utilize parameters in your reports and also outlines the steps to build a custom view.

You see a sample of the custom parameters view on our demo site.

Chart Report Items

New Plot Types

We’ve added four new chart plot types to our data visualization toolbox: Range Column, Range Bar, Range Area, and Gauge plots.

Range Column and Bar Plots

Range Column and Bar plots are ideal for displaying the difference between the minimum and maximum values for each category, represented by vertical or horizontal bars. This chart type is useful for visualizing data such as temperature ranges, price fluctuations, or other scenarios focusing on the range between two values.

Range Area Plot

Range Area plots are designed to display the range or difference between two sets of values across a continuous variable, such as time. This chart type consists of two lines representing the upper and lower bounds, with the area between the lines filled in to emphasize the range. Range Area plots are often used to display data such as sales forecasts with confidence intervals, temperature ranges over time, or stock price fluctuations.

Gauge Plot

Gauge plots, also known as speedometer or dial plots, are suitable for visualizing a single data point within a specified range, often about a target or goal. These plots are particularly useful when you want to communicate progress or performance in a visually appealing manner.

Enhanced Plot Tooltip and Label Customization

The recently added Text Encoding feature allows you to implement advanced configurations for your plot’s labels and tooltips. For further information, please refer to the Customizing Tooltips and Labels subsection under the specific plot type. As an example, you can look at Column and Bar plots.

Configurable Bar Lines for Column and Bar Plots

You can now customize the color, width, and style of the lines connecting bars or columns in your plots.

Interactive Legend

A color, shape, or size legend of a chart can now be interactive, providing a report reader the ability to click on a legend item to jump to another report, open a dynamic URL or apply parameters.

Miscellaneous

Data Processing Improvements

We’ve improved data processing in ActiveReportsJS to primarily use the asynchronous fetch API for obtaining report data. This enhancement not only improves user experience, but also allows developers to employ service workers to intercept data requests. As a result, developers can manage these requests directly in the application’s code, giving them full control over data handling.

While the synchronous XHR API is still employed in some scenarios, these instances are now quite rare.

GroupIndex Function

You can now leverage the GroupIndex function to retrieve the index of a grouping instance. This functionality is particularly beneficial when customizing the style of grouping items at runtime. In particular, it can be employed to set alternating background colors for a more visually organized and appealing display.

For instance, in the Simple Table demo, the background color of the textboxes in the detail rows is determined by the expression {IIF(GroupIndex() Mod 2 = 0, “White”, “#f8f8f8”)}. This expression uses the GroupIndex function, which retrieves the index of the Details group, to alternate the background color between white and light grey (#f8f8f8).

The Details group of the table is set to the value of a unique field in the dataset, which in this case is StartTime. As StartTime is unique for each taxi trip, it effectively groups each trip as a distinct entity. As a result, when previewing the report, the detail rows display alternating background colors for enhanced readability, with each taxi trip visually separated by color.

Customizing Date Parameters Format

You can now set the Format for the Date and DateTime parameters to customize the appearance of the parameter’s value in the data input box of the parameters panel.

Ready to Check Out What's New? Download ActiveReportsJS Today!