NAV Navbar
  • Introduction
  • Report Samples
  • Dashboard Samples
  • Input Control Samples
  • License
  • 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).

    Fork me on GitHub

    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

    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="http://visualizejsdemo.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

    Via GitHub

    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:

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

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

    Various inputs for passing paramaters into a dashboard.

    Try it:

    Undo/redo parameter events

    Control the dashboard navigation with undo/redo events.

    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

    Try it:

    Specific CSS overrides, all types

    Example CSS overrides with JRS input controls.

    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.

    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.