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

Clement WongClement Wong EM, Member mod
edited November 17, 2016 in DevShare Downloads
With the 3.1 release, BIRT Designer Professional provides a new Report Item on the Palette called “Custom Visualization”.



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.



Custom Visualizations are not just viewable with a web browser, but can also be exported out to PDF, Excel, Word, and other supported formats.



The attached ZIP is a project containing Custom Visualizations using the out of the box templates such as Google Maps, D3.js, and others.



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
http://www.actuate.com | http://www.opentext.com

Comments

  • 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:
    info:
    eclipse.buildId=M20130204-1200
    java.version=1.8.0_25
    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":"127.0.0.1","name":"JSESSIONID","value":"1lkwb5gm74svlatxb1ayjqypn"}],"height":480}
    exits with value: 0
    ReferenceError: Can't find variable: d3

    http://127.0.0.1:64449/iportal/appresource/js/d3-cloud-master/d3.layout.cloud.js:400

    http://127.0.0.1:64449/iportal/appresource/js/d3-cloud-master/d3.layout.cloud.js:401

    ReferenceError: Can't find variable: d3

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

    http://127.0.0.1:64449/iportal/appresource/js/spa/head.js:566 in one

    http://127.0.0.1:64449/iportal/appresource/js/spa/head.js:782

    http://127.0.0.1:64449/iportal/appresource/js/spa/head.js:818

    http://127.0.0.1:64449/iportal/appresource/js/spa/head.js:914 in process

    what could be wrong and how do we fix this?

  • Clement WongClement Wong EM, Member mod

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

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation
    http://www.actuate.com | http://www.opentext.com

  • 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, Member 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 @ http://d3js.org/d3.v3.min.js or http://d3js.org/d3.v4.min.js, or Google Maps @ https://maps.googleapis.com

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

    Workarounds:

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

    OR

    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 @ http://phantomjs.org/download.html
    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
    http://www.actuate.com | http://www.opentext.com

Sign In or Register to comment.