TechnologiesAIProductsAI & Analytics

Using External JavaScript Libraries with BIRT & jQuery & jVectorMaps

External JavaScript libraries have always been able to be used with BIRT. BIRT 4.3 has made including these types of libraries easier with head.js.

If you’re using a version prior to BIRT 4.3, I’ll also cover a way to be able to include head.js yourself. In this blog I’ll be showing the use of jQuery and jVectorMaps to show state GDP data in a map.

First, I’ll start with how this can be done in BIRT 4.3. A new script area has been added called “clientScripts”. This script area can be found by clicking in an empty spot on the report, going to the script tab, and then choosing “clientScripts” from the drop-down.

Posted Image

Here, you can use head.js to load the necessary JavaScript libraries with a call like:

head.js(jsFile1,jsFile2,...,callback function);

Because of the timing of when files are loaded and when the report body is available, the callback function is probably only going to be used for testing. For example, you could write an alert statement that is called after your JavaScript libraries are loaded. You must also make sure that none of the libraries you’re using conflict with any others. In our example, jQuery does conflict with other libraries used within the viewer, so we won’t use the “clientScripts” area to load our libraries because jQuery must be the first one loaded.
The next step that you’d normally take would be to use the head.ready() call in a HTML text control to execute the script that uses the JavaScript libraries you loaded in your head.js() call. That looks like this:

head.ready(function(){//your script using your JS library});

In our example, where we have a conflict with a library that’s used in building the viewer, we call head.js() from the text box. Of course, even if you don’t have conflicts, you can avoid the “clientScripts” script area and call your head.js() here, as well. Since we’re calling head.js() from the report body, we can use the callback part of the function to run the script we’re wanting to run. Here is what our head.js() call will look like in our text box:

head.js("http://jvectormap.com/js/jquery-1.8.2.min.js","http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js","http://jvectormap.com/js/jquery-jvectormap-us-aea-en.js",drawMyMap);

The last parameter of the head.js call is the callback function “drawMyMap”. This is the script we want to run after loading our JavaScript libraries. The script in this function can be seen below:

function drawMyMap(){var stateData ={<VALUE-OF>row["KeyList"]</VALUE-OF>};
    $(function(){$("#USAmap").vectorMap({map:"us_aea_en",
    series:{
     regions:[{
       values: stateData,
       scale:['#C8EEFF','#0071A4'],
       normalizeFunction:'linear'}]},
     onRegionLabelShow:function(event, label, code){
        label.html( label.html()+' GDP: $'+ stateData[code]);}});});}

This code takes the data from our dataSet and creates a map to shade each state based on the value. A style sheet is also added to the report to help with the look and feel of the map and labels. You can see how this is added in the styles section of your Outline view. Once we’ve done all of this, when we run the report, we get this as our final output:

Posted Image

If you’re using a BIRT version prior to 4.3, you can still do this by using the method in this devShare post. With this method, you can also skip the Variables and simply use the head.js() call in your HTML text box like we did above.

The example shown in this blog post can be found in the devShare. Feel free to comment here or there if you have questions or issues. 

Show More

OpenText

OpenText is the leader in Enterprise Information Management (EIM). Our EIM products enable businesses to grow faster, lower operational costs, and reduce information governance and security risks by improving business insight, impact and process speed.

Related Posts

Back to top button
Close