How to Add Custom Visualizations in BIRT iHub 3.1

blog-3-1-volcano-A

OpenText recently released BIRT iHub 3.1, the latest version of iHub. The release adds several features, including a REST API and support for Custom Visualizations. In this post, I will explain what custom visualizations are and show you how you can include third-party visualizations in BIRT content with essentially no coding.

Custom Visualization Basics

Data visualization helps you quickly identify valuable information in your data. iHub includes many data visualizations out of the box, including charts, maps and gadgets. Custom Visualization support extends iHub’s visualization capabilities by enabling developers to integrate third-party visualizations into BIRT content through the use of external JavaScript libraries. This is accomplished by marshalling BIRT Data Objects for consumption by the various third-party visualizations.

To invoke a third-party visualization, look for a report item called “Custom Visualization” in iHub 3.1. As you can see in the image below, the graphical builder for custom visualizations uses the same style of interface as other report items to select, group, sort, and filter data before binding it to a visualization.

 

Palette_item_option

Out of the box, iHub 3.1 includes 16 pre-built templates that leverage third party visualizations, including templates for Google Maps, Highcharts, Fusion Charts, and D3, that enable you to include those visualizations in your design with minimal coding. In fact, the majority of these templates only require you add the relevant column bindings into the script. However, the templates are  flexible and may be customized if you need to modify them.

Additionally, you are not limited to using only the 16 templates we provide; almost any external JavaScript visualization , including Google Charts, ChartJS, and many more, can be added to a report design. (A list of possibilities and sources can be found on this Wikipedia page.) You just need to perform more of the coding yourself to create a new template that leverages your desired visualization library.

Creating Your First Custom Visualization

To create a custom visualization, you need a BIRT Data Object to use as a data source. For this tutorial, I will use the Classic Models Data Object that comes with BIRT Designer Professional. As shown below, Classic Models.data can be found in the eclipsepluginscom.actuate.birt.report.viewer_23.1.0.v20150206iportalresources directory of your BIRT Designer Professional installation.

classic_models_option

 

Once you locate your Data Object, return to your report design and create a new Actuate Data Object Data Source that points to Classic Models.data. Then, add the Classic Models Data Model from the Classic Models Data Object, as shown below. You now have everything you need, data wise, to add a custom visualization to your project.

use_data_model_option

 

Locate the Custom Visualization Report Item in the Palette and drag it into your report design. The Custom Visualization Editor dialog (shown below) will launch automatically. Begin by selecting the Data Set that you want to use – for this tutorial, that’s the Classic Models Data Model that we added previously.

custom_viz_editor_option

 

Once you have selected the Data Set, the Data Binding dialogue will launch automatically. This is where you select the desired columns to bind to the custom visualization. As shown below, I have selected to use the Order Date and Quantity Ordered columns for this example. Make note of the exact names of the columns you choose.

data_model_binding_option

 

Next, select the Template tab within the Custom Visualization Editor, as shown below.

template_tab_option

 

Pull down the Choose a Template menu to select your desired template. As you see below, I have selected Calendar Chart from Google Charts. This visualization is used to show activity over the course of a long span of time in order to display quantity variances based on the day of the week. This allows you to quickly discern any patterns that may exist based on the day of the week.

Choose_template_option

Notice that there is a Config object within the template containing two values with <changeme> specified, numberColumn and dateColumn. (They’re in purple below.) These are the two columns from the Data Set that provide the data for the custom visualization. The JavaScript templates consistently use <changeme> to mark the column names you bind to the visualization.

changeme_option

 

For the numberColumn, replace <changeme> with Quantity Ordered. For the dateColumn, replace <changeme> with Order Date. (These are the column values we chose earlier.)

quantity-order_option

You have now added everything needed to display Google’s calendar chart within your report design. Select OK to close the Custom Visualization Editor dialog and add the custom visualization to your  report design. Save the report design, then run the report in the Web Viewer, as shown below.

 

run_in_web_option

With essentially no coding, we have added this custom visualization to the report design.

calendar chart preview

Some of the visualizations will have more than two values that need to be changed. However, the basic process for using any of the out of the box templates is essentially the same. Learn more about custom visualizations and other capabilities we’ve added in the BIRT iHub 3.1 Technical Summary of New Features.

Thank you for reading this post on custom visualizations in BIRT iHub 3.1. If you have any questions, post them in the comments below or in the BIRT forums.

-Jesse

About Jesse Freeman

Jesse is an evangelist for anything OpenText Analytics related.

Check Also

6 F-Type Examples in DevShare You Can Use Now

With the release of OpenText Information Hub, Free Edition (formerly BIRT iHub F-Type) we added …

How to Configure BIRT iHub F-Type to use Active Directory or LDAP

Developers often ask how they can use a single authentication source for multiple applications instead of managing …