The report function runs reports on JasperReports Server and displays the result in a container that you provide. This chapter describes how to render a report in Visualize.js.

The report function also supports more advanced customizations of hyperlinks and interactivity that are described in subsequent chapters:

This chapter contains the following sections:

Report Properties

The properties structure passed to the report function is defined as follows:

Report Functions

The report function exposes the following functions:

Report Structure

The Report Data structure represents the rendered report object manipulated by the report function. Even though it is named "data," it does not contain report data, but rather the data about the report. For example, it contains information about the pages and bookmarks in the report.

The report structure also contains other components described elsewhere:

Rendering a Report

To run a report on the server and render it in Visualize.js, create a report object and set its properties. The server and resource properties determine which report to run, and the container property determines where it appears on your page.

The following code example shows how to display a report that the user selects from a list.

The HTML page that displays the report uses a static list of reports in a drop-down selector, but otherwise needs only a container element.

Setting Report Parameters

To set or change the parameter values, update the params object of the report properties and invoke the run function again.

The example above is trivial, but the power of Visualize.js comes from this simple code. You can create any number of user interfaces, database lookups, or your own calculations to provide the values of parameters. Your parameters could be based on 3rd party API calls that get triggered from other parts of the page or other pages in your app. When your reports can respond to dynamic events, they are seamlessly embedded and much more relevant to the user.

Here are further guidelines for setting parameters:

Saving a Report

Once you change the report parameters, you can save the new report in the repository. You can invoke the report.save function without parameters to overwrite the current report. You can also specify a new name or a new folder to save as a different report. The authenticated user must have write permission to the report or to the folder.

The following schema describes the parameters to the report.save function:

Rendering Multiple Reports

JavaScript Example:

Associated HTML:

Associated CSS:

Resizing a Report

When rendering a report, by default it is scaled to fit in the container you specify. When users resize their window, reports will change so that they fit to the new size of the container. This section explains several ways to change the size of a rendered report.

To set a different scaling factor when rendering a report, specify its scale property:

In every case, the entire report is scaled in both directions by the same amount, you cannot change the aspect ratio of tables and crosstab elements.

For example, to initialize the report to half-size (50%), specify the following scale:

You can also change the scale after rendering, in this case to more than double size (250%):

Alternatively, you can turn off the container resizing and modify the size of the container explicitly:

Setting Report Pagination

To set or change the pages displayed in the report, update the pages object of the report properties and invoke the run function again.

The pages object of the report properties also supports bookmarks by specifying the anchor property. You can also specify both pages and bookmarks as shown in the example below. For more information about bookmarks, see Providing Bookmarks in Reports.

Creating Pagination Controls (Next/Previous)

Again, the power of Visualize.js comes from these simple controls that you can access programmatically. You can create any sort of mechanism or user interface to select the page. In this example, the HTML has buttons that allow the user to choose the next or previous pages.

Associated HTML:

Creating Pagination Controls (Range)

JavaScript Example:

Associated HTML:

Exporting From a Report

To export a report, invoke its export function and specify the outputFormat property. You MUST wait until the run action has completed before starting the export. The following export formats are supported:

"pdf", "xlsx", "xls", "rtf", "csv", "xml", "odt", "ods", "docx", "json", "pptx"

For CSV and JSON output, see Exporting Data From a Report. Note that the HTML output of a report is not available through Visualize.js.

The following sample exports 10 pages of the report to a paginated Excel spreadsheet:

The following sample exports the part of report associated with a named anchor:

The following example creates a user interface for exporting a report:

Associated HTML:

Exporting Data From a Report

You can also request the raw data of the report in CSV or JSON format.

The following example shows how to export data in CSV format. CSV output is plain text that you must parse to extract the values that you need.:

The following example shows how to export data in JSON format. By its nature, JSON format can be used directly as data within your JavaScript.

Refreshing a Report

JavaScript Example:

Associated HTML:

Canceling Report Execution

To stop a running report, call its cancel function:

The following example is more complete and creates a UI for a spinner and cancel button for a long-running report.

Associated HTML:

Discovering Available Charts and Formats

You can write code to discover and display the types of charts and export formats that can be specified.