Custom Visualization Component
The custom visualization component lets you leverage JavaScript in Jaspersoft Studio and JasperReports Server. You can create JavaScript modules and use them in your reports to extend their functionality. The main purpose of the custom visualization component is to render SVG (Scalable Vector Graphics) images. Your modules can leverage third-party JavaScript libraries, such as JQuery. For example, perhaps you want to create reports with dynamic behaviors for interaction and animation; you could leverage D3 (d3js.org) to bind data to the Document Object Model (DOM) and manipulate the SVG. Such a report is shown in D3-enabled report.
|
|
Please note that this component is only supported by the Jaspersoft Community (community.jaspersoft.com). TIBCO Jaspersoft Technical Support and Engineering do not support it.
|
The custom visualization component is a powerful and flexible feature, suitable for advanced users of JasperReports Library. Using the component requires advanced coding skills in the following technologies:
|
•
|
Optionally, any third-party library you want to expose in Jaspersoft Studio and JasperReports Server. |
Before creating reports that use your third-party library, you must configure various applications to work together; you must:
|
1.
|
Install Chrome or Chromium, which renders your JavaScript module's visual component. |
|
2.
|
Configure Jaspersoft Studio and JasperReports Server to use Chrome/Chromium. |
|
3.
|
Create a JavaScript module that renders an SVG. This main module, as well as any JavaScript it relies on, are optimized and combined into a single JavaScript file (using a RequireJS build file (build.js). Jaspersoft Studio simplifies the optimization process to generate the JavaScript implementation of the component. Place your JavaScript files somewhere that Jaspersoft Studio can find it, such as attaching it to the report unit or placing it on the classpath. |
Next, create and deploy reports that rely on your custom visualization component to render SVG images. Drag the Custom Visualization component from the Elements palette into the Design tab, and create a report-level property of type com.jaspersoft.jasperreports.components.customvisualization.require.js; it must specify the main JavaScript file for your custom visualization. The custom visualization component appears as a rectangular area of your report. A single custom visualization component can be used by any number of reports that require the same JavaScript functionality. When exported to HTML format, these reports can be interactive (assuming that your module attaches events to the DOM).
You can also create a custom component descriptor in JSON, which lets you add the following to your component:
|
•
|
A component UI – You can specify the property names and types and the data items used by the component. |
|
•
|
A thumbnail image – Used when the component is presented in the component choose, which appears when a component is dragged into the design view. |
|
•
|
Location of implementation files – You can specify the location of the JavaScript file and CSS file which implement the component. |
This component can help you leverage any number of JavaScript libraries, such as:
For more in-depth information, please see the articles on our Community wiki that describe the custom visualization component.
Recommended Comments
There are no comments to display.