The community of Analytics developers are invited to follow and participate in the developer network.
OpenText technical experts collaborate with supported customers and partners in the Magellan product area.

Examples for iHub 3.1 using Custom Visualizations (D3.js, Google Maps, Leaflet, and more)

Clement WongClement Wong EM mod
edited November 17, 2016 in DevShare
With the 3.1 release, BIRT Designer Professional provides a new Report Item on the Palette called “Custom Visualization”.<br />
<br />
The graphical builder for Custom Visualization provides the same interface used by other BIRT Report Items to select, group, sort and filter the data before binding it to the custom visualization properties. The user can build and test the external JavaScript visualization using the built-in IDE or by using JSFiddle, a popular online JavaScript IDE.<br />
<br />
Custom Visualizations are not just viewable with a web browser, but can also be exported out to PDF, Excel, Word, and other supported formats.<br />
<br />
The attached ZIP is a project containing Custom Visualizations using the out of the box templates such as Google Maps, D3.js, and others.<br />
<br />
Additional designs include visualizations using Leaflet JS, NVD3.js, Google Maps with bubbles, Zoomable Circle Packing chart with D3.js, and more!

Clement Wong
Principal Analytics Architect

OpenText Corporation |


  • Hi, I when I run "iHub31 Custom Viz Zoomable Circle Packing using D3.js__cwong.rptdesign" via "view report in web viewer" it looks as expected. I am using a mac running high sierra and tried it in different browsers.
    HOWEVER: when I try to print it as a pdf (from the hamburger menu in the web viewer) I get an error:
    "The resource of this report is not reachable".
    The same error occurs when I run the other examples containing custom visualizations.

    My colleague is on a windows machine and has the same problem, however a different error is reported:
    java.vendor=Oracle Corporation
    BootLoader constants: OS=win32, ARCH=x86_64, WS=win32, NL=nl_NL
    Command-line arguments: -os win32 -ws win32 -arch x86_64

    the error:

    run phantomjs with errors

    /C:/Actuate3/BDPro/eclipse/plugins/com.actuate.phantomjs.win32_1.0.0.v20150710/libs/phantomjs-1.9.7-windows/phantomjs.exe C:\Actuate3\BDPro\eclipse\plugins\com.actuate.webdriver_1.0.0.v20150710\js\rasterize.js file:/C:/Users/MVANDE~1/AppData/Local/Temp/birtViewer/temp/BirtEngineTmp/spa_2519845603722018111.html C:\Users\MVANDE~1\AppData\Local\Temp\birtViewer\temp\BirtEngineTmp\spa_326029634172165752.png {"bookmark":"_bt_bk_1519834385319","width":816,"timeout":1000,"cookies":[{"domain":"","name":"JSESSIONID","value":"1lkwb5gm74svlatxb1ayjqypn"}],"height":480}
    exits with value: 0
    ReferenceError: Can't find variable: d3

    ReferenceError: Can't find variable: d3

    file:///C:/Users/MVANDE~1/AppData/Local/Temp/birtViewer/temp/BirtEngineTmp/spa_2519845603722018111.html:79 in one in process

    what could be wrong and how do we fix this?

  • What version of the Designer are you using so that I can attempt to replicate the issue?

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation |

  • Hi Clement,
    OSX: Birt Designer Professional Version: 4.4.0 Build id: v20150206
    WIN: Actuate BIRT Designer Professional Version: 4.4.0 Build id: v20150710

    Hope this helps

  • Clement WongClement Wong EM mod
    edited March 5, 2018

    There is a defect with the version of PhantomJS that is included in those versions, when using an external .JS delivered via CDN.

    An example of this is using an external D3.js @ or, or Google Maps @

    That older version of PhantomJS is not handling 301 redirects correctly but can handle the same .JS hosted locally.


    1. Host the external .JS files locally or not via CDN.


    1. Update PhantomJS to the latest version -- NOT RECOMMENDED, but an option

    A. Close out of the Designer
    B. Download the latest PhantomJS where redirects are handled @
    C. For Windows based Designer and iHub, navigate to ...plugins\com.actuate.phantomjs.win32_1.9.7\libs\phantomjs-1.9.7-windows
    D. Rename phantomjs.exe to phantomjs.exe.bak
    E. Copy phantomjs.exe from the ZIP in Step 1 (under phantomjs-2.1.1-windows\bin) to the directory in Step 2
    F. Restart the Designer

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation |

Sign In or Register to comment.