Introduction

Visualize.js is a JavaScript API framework used to embed JasperReport Server reports & visualizations inside web applications. It comes bundled with the commercial editions of TIBCO JasperReports® Server, specifically Jaspersoft AWS, Enterprise or Professional (and as an add-on with Jaspersoft Reporting).

In this guide you will find a full listing of Visualize.js API code samples.

For greater detail also view the full Visualize.js API reference guide.

Download Jaspersoft >

Installing Jaspersoft

Note: All fiddles in this guide are live (referring https://mobiledemo.jaspersoft.com/jasperserver-pro/ JasperReports Server instance) and available to view before install

• Download the commercial edition of JasperReport Server
• Use our quick start guide for installation and configuration

Getting Started

Live Fiddles

View and reuse the live Visualize.js API samples in this guide and(or) reference to your own installation

To use your own install change the following HTML in the fiddles...

 <script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

and reference the location of your JasperReport Server installation...

 <script src="[myserver]/jasperserver-pro/client/visualize.js"></script>

Video Tutorials

• Need a jump start? Watch our API video tutorials for more information on Visualize.js and embedding inside your application.

Via GitHub

• Fork this Visualize.js API sample set and guide for your own use
• Download our sample application on GitHub featuring Visualize.js

Ad Hoc View Samples

Basic Embed

Try it:

Render table, customize with CSS, crosstab with CSS, chart with selector

Initialization of the visualize.js library with simple rendering of ad hoc views using plain text authentication. See full authentication samples in this guide for securing data and views with the JasperReports Server and Visualize.js.

You can easily change the resource to embed a different view from the JasperReport Server.

For example:

        resource: "/public/viz/Adhoc/Change_Visualization2"

Try it:

Load multiple views

Use a common configuration to load multiple views.

Control Canvas

Try it:

Set canvas type, dynamically from a list

Control the ad hoc view visualization type (canvas) for users to access. The default visualization selector can be turned off with a line of CSS and only select visualizations used. See dynamic list example for all available visualizations and each name reference.

Input Controls

Try it:

Parameter passing, basic drop-down

Pass a simple set of hard-coded parameters to control ad hoc view output. This can be expanded with custom inputs controls such as a drop-down.

Try it:

Dynamic input control values

Build a custom input control dynamically using input control data from an ad hoc view.

Try: A hard coded or dynamic variable...

      inputSelection = "Non-Consumable"

for parameter control...

      "ProductFamily": ["Food", inputSelection]

Hyperlinks

Try it:

Pass values, fields and measures

On selection of a data point pass it's value or field and measure.

Try it:

Drill down on selection, in new view

Select an ad hoc view data point to drill down into data within the same view (container) based on the selected field and measure, updating the visualization type. Pass the same values to render a new ad hoc view on the page.

Try it:

Hyperlink changes beforeRender

Take action on hyperlinks before they render. Useful for changing the styles on hyperlinks.

Custom Visualization

Try it:

Data rendered on page, with D3 gauges

Render just the Ad Hoc View data on the page or pass to a custom visualization library such as D3.

Try it:

Loading of data, through return values

Navigate the internal data API and return values to update and return the number of columns and rows.

UI Controls

Try it:

Table row selection, column selection with highlight

Select all values on a table row/column using CSS styles to highlight.

Try it:

Resize Ad Hoc View

Ad hoc views are web responsive and the container size can be changed as needed.

Authentication

Try it:

Refresh, destroy session

Hooks for both refreshing and destroying the authentication for an ad hoc view.

Try it:

Secure token authentication

Token based authentication and initialization of the visualize.js library with a list of ad hoc views.

JRS - Authentication Cookbook >

Note: Proper authentication needs to be set up with the JasperReport Server and SSO before using token based authentication. View the Authentication Cookbook for details on configuring authentication correctly.

Report Samples

Basic Embed

Try it:

Simple report rendering, from a list

Initialization of the visualize.js library with simple rendering of an HTML report using plain text authentication. See full authentication samples in this guide for securing data and reports with the JasperReports Server and Visualize.js.

You can easily change the resource to embed a different report from the JasperReport Server.

For example:

        resource: "/public/Samples/Reports/SalesByMonthReport"

Try it:

Load multiple reports

Use a common configuration to load multiple reports.

Pagination

Try it:

Next/previous, enter range, pagination events

Provide control for report pagination with either individual selectors or a directly inputed range. Also, see pagination with events for full control of inputs.

Try it:

Anchors, range with anchor, anchor and page search

Provide the ability to move quickly through reports with direct page anchors. Also see an anchor with a range of rendered pages and an example of searching both an anchor and page/range with an event to callout the current selection.

Custom Input Controls

Try it:

Parameter passing, basic drop-down, render values

Pass a simple set of hard-coded parameters to control report output. This can be expanded with custom inputs controls such as a drop-down. In addition, input control values can be rendered directly from the JasperReport Server.

Try: A hard coded or dynamic variable...

      inputSelection = "Non-Consumable"

for parameter control...

      "ProductFamily": ["Food", inputSelection]

Try it:

Dynamic resource types

Discover reporting resources available and formats from the JasperReport Server for use with input controls.

Hyperlinks

Try it:

Basic drill-down, open report in new page

Select a report hyperlink to open a new "drill-down" report with selected parameter.

Try it:

Parameter passing on selection, parameter in a new page

Select from a chart series to pass a paramater into a secondary report. In addition pass this same paramater into a new page/tab.

Events

Try it:

Page totals, report status

Listen through events for a change in the page totals and report completed status.

UI Controls

Try it:

Table column sorting order, table column conditional formatting

Dynamically control UI elements for table columns.

Try it:

Crosstab column sorting order, crosstab row sorting order

Dynamically control UI elements for Crosstabs.

Export

Try it:

Export formats, auto export

Custom export options with various formats.

Try it:

Export CSV and render, export JSON and render

Export data from a report and render with a custom visualization.

Save

Try it:

Save/Save As UI

Custom UI with ability to overwrite reports with location, label and description.

Authentication

Try it:

Basic login/logout

Simple plain text authentication with demonstration of destroying session with reports.

Try it:

Secure token authentication

Token based authentication and initialization of the visualize.js library with a list of reports.

JRS - Authentication Cookbook >

Note: Proper authentication needs to be set up with the JasperReport Server and SSO before using token based authentication. View the Authentication Cookbook for details on configuring authentication correctly.

Try it:

Login/logout with hooks

Authenticate and destroy the session with the method of your choice through the hooks that are made available through Visualize.js.

Try it:

Login/logout UI

A sample UI providing users full authentication options to the JasperReport Server.

Dashboard Samples

Basic Embed

Try it:

Dashboard render with input control

Initialization of the visualize.js library with simple rendering of a dashboard (with an embedded input control and hyperlinks) using plain text authentication.

With this example you can easily change the resource to embed a different dashboard from the JasperReport Server.

For example:

        resource: "/public/Samples/Dashboards/4._New_Dashboard"

Authentication

Try it:

Dashboard login/logout

Simple authentication with demonstration of destroying session with dashboards.

JRS - Authentication Cookbook >

Note: Proper authentication needs to be set up with the JasperReport Server and SSO before using token based authentication. View the Authentication Cookbook for details on configuring authentication correctly.

Custom Input Controls

Try it:

Dashboard parameter passing

Various inputs for passing paramaters into a dashboard.

Try it:

Undo/redo parameter events

Control the dashboard navigation with undo/redo events.

Hyperlinks

Try it:

Dashboard hyperlink

Passing hyperlinks from one dashboard to open and control a secondary report.

Input Control Samples

Get Input Control Data

Try it:

Custom drop down, show inside table

These examples show accessing data directly from a JRS Input Control.

The following samples embed JRS Input Controls and/or their data. These first two are the exception in that they only pass data into the application.

Bind to Report

Try it:

Embed report and input control

Simple embedding of a report and it's associated input control.

View Control Types

Try it:

Render input controls (all types), default values, with cascade, cascade with multi and single selects

View all JRS input controls, with default values and cascades.

Reset

Try it:

Reset input controls

Change back to originally selected input control values.

Events

Try it:

Listen for changes, with cascade

Provide events to listen to input control changes, updating the application as needed.

Try it:

Bind cascade with report

Listen to changes with cascade input controls.

Try it:

Validation

Validation result in change event.

CSS Overrides

This is a sample set of JRS class names for CSS overrides. After embedding, additional class names can be discovered by inspecting the elements on a page. Try it:

Specific CSS overrides, all types

Example CSS overrides with JRS input controls.

Repository Samples

Get Repository List

Try it:

Repository list by resource type

This example shows List as per the resource type.

Sorting

Try it:

Sorting list

Sorting resource list by column name.

Limit and Offset

Try it:

List by limit and offset

View repository list as per limit and offset.

Repository Search

Try it:

Repository Search by Access Type

Filters the result as per the selected Access type.

License

Copyright © 2018 TIBCO Software Inc. All Rights Reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

3. Neither the name of TIBCO Software Inc. nor the names of any contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT OWNER AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

THIRD PARTY NOTICES

*jQuery 1.11.3

Copyright jQuery Foundation and other contributors, https://jquery.org/

This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history available at https://github.com/jquery/jquery

The following license applies to all parts of this software except as documented below:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses; we recommend you read them, as their terms may differ from the terms above.