This chapter provides two extended code examples that you can use to test various parts of your own Visualize.js scripts.

This chapter contains the following sections:

Checking the Scope in Visualize.js

This example reads and displays the properties in the scope after visualize.report finishes rendering a report (success).

The ScopeChecker is another JavaScript used in this example. It can either be a separate .js file or included in your HTML file as shown in this example:

CSS Diagnostic Tool

The CSS diagnostic tool lets you load various CSS libraries and see how they interact or interfere with the CSS that Visualize.js uses to render reports. It lets you choose your JasperReports Server from a static list, so that you may try different themes on different servers. After you load a report using visualize.report, you can choose to load a variety of popular CSS libraries and see if they affect your report. The list of reports to choose from is also a static list, as shown in the HTML code below.

The key feature of this tool is the ability to set the isolateDOM property on the visualize.report function call. This property modifies the CSS of the report so it doesn't conflict with other CSS libraries. The downside is that you can't use the defaultJiveUi property in conjunction with isolateDOM, and the tool enforces this by clearing the former if you select the latter.

Save the Javascript, HTML, and CSS for the CSS Diagnostic Tool to your environment and edit the files to use your server instances, reports, and Visualize.js code.

The HTML for the CSS diagnostic tool contains a static list of reports to load. Add your own reports to this list.

Associated CSS: