Welcome to the Visualize.js Live Sample Guide

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 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

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

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

• 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

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

            

Set Canvas Type

Input Controls

      inputSelection = "Non-Consumable"

      "ProductFamily": ["Food", inputSelection]

Parameter Passing

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:

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.

Hyperlinks

Try it:

Pass Values

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

Try it:

Try it:

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:

Custom Visualization

Data Rendered On Page

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

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

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.

Try it:

Authentication

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

Try it:

Refresh

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

Report Samples

Basic Embed

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.

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

Try it:

Use a common configuration to load multiple reports.

Try it:

Pagination

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:

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:

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

Hyperlinks

Try it:

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

Try it:

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

Events

Try it:

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

UI Controls

Try it:

Dynamically control UI elements for table columns.

Try it:

Dynamically control UI elements for Crosstabs.

Export

Try it:

Custom export options with various formats.

Try it:

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

Save

Try it:

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

Authentication

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

Try it:

JRS - Authentication Cookbook >

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

Dashboard Samples

Basic Embed

Try it:

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

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

Authentication

Try it:

Simple authentication with demonstration of destroying session with dashboards.

JRS - Authentication Cookbook >

Custom Input Controls

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.

      inputSelection = "Non-Consumable"

      "ProductFamily": ["Food", inputSelection]

Try it:

Various inputs for passing parameters into a dashboard.

Try it:

Control the dashboard navigation with undo/redo events.

Hyperlinks

Try it:

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

Input Control Samples

Get Input Control Data

Try it:

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

Bind To Report

Try it:

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

View Control Types

Try it:

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

Reset

Try it:

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

Try it:

Specific CSS overrides, all types

Example CSS overrides with JRS input controls.

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.