SVG Diagrams

How to embed exciting SVG diagrams in your BIRT reports!

 

General steps

  • Release your creativity skills to design an SVG image meeting your needs. For this sample i used Inkscape but any software producing a standard SVG 1.1 output is fine. 
  • Set specific identifiers to image elements which have to be dynamic. In the sample all text items representing a measure value have an identifier, as well as a couple of shapes such the boat, the sun and dolphins. With inkscape we can do this through "Object properties":

  • Copy your SVG image into a BIRT resource folder
  • In BIRT designer, add an image element URI based on this SVG

 

  • Bind the image element to a BIRT dataset containing all data we need to update dynamic elements/

 

  • In onRender script of the image, use Batik API to change image elements. Batik is already embedded to the BIRT runtime, however on this occasion i upgraded it to version 1.8 in order to take advantage of the most recent SVG features.

In my case i implemented a small framework above Batik to keep scripts as simple as possible. Here is the resulting onRender event of the image:

    importPackage(org.visioneo.svg);

    var uri = reportContext.getResource(this.URI).toString();
    var doc = new SVGDocument(uri);
    setDynamicElements(doc, row);      
    this.URI=doc.renderSVG();

It simply loads a SVG document from the image template, sets all dynamic content  and then it updates URI property accordingly. setDynamicElements is a function declared in "beforeRender" script of the report. Here is how it works:

setDynamicElements=function(doc,row){
    doc.getElementById("bioenergy").setTextContent(row["bioenergy"])
                                   .setStyle("fill",row["bioenergyColor"])
                                   .onClick(getDrill("bioenergy"));
   //same for all measures: greenspace, production, oceanfreight etc
}

In this function, notice measure colors are already evaluated in computed columns of the dataset ("bioenergyColor" in this case).  This allows to keep script simple and easy to maintain. In the dataset sample, here is what color column expressions look like:

    var val=dataSetRow["bioenergy"];
    val<-0.1?"red":val<0?"orange":val<0.1?"lightgreen":"green";

This syntax is a ternary operator: if value is lesser than -10% it returns "red", else if it is lesser than 0 it returns orange, etc.

Notice also this getDrill function used to manage drillthrough actions for onclick event. That is the only tricky part, if you need interactivity in such diagrams. Since it is not a native BIRT chart we need to build drillthrough actions "manually" by concatenating drill parameters to an URL. This function is declared in beforeRender event of the report. 

getDrill=function(measure){
    importPackage(org.visioneo.script);
    var parameters="measure="+measure+"&"+"year="+params["Year"].value
    return DrillHelper.getDrillSVG(reportContext,"ecosystem-detail",parameters);
}

Show / hide image elements

BIRT parameter displayDolphins" returns "block" if set to Yes, and "none" if set to No.  

doc.getElementById("dolphins").setStyle("display",params["displayDolphins"].value);    

Color items

Most of the time we want to set color based on dataset values, but for a demo purpose sun's color is based on a parameter:

doc.getElementById("sun").setStyle("fill",params["sunColor"].value);

By contrast the boat element is colored by a dataset value:

doc.getElementById("boat").setStyle("fill",row["oceanfreightColor"]);

And much more!

This is of course not exhaustive, you can take advantage of all the powerfulness of Batik API to add awesome effects, animations, create new shapes on the fly etc.

Smartphone devices

Here is a quick presentation of visioneo 4.0 abilities with smartphone devices. Just a few of the countless improvements this new major version will offer!
  • The native toolbar is collapsed in portrait orientation:

 

           

 

  • A portlet preference allows to embed toolbar actions directly in the default dockbar of the portal! Currently only a few demo pages have this feature enabled: for example visit this one with a smartphone, the result is really stunning!  

  • Super-responsive report parameters layout
  • The floating jquery UI dialog has been removed: report parameters are directly included in portlet body
  • The jquery UI "accordion" widget is removed: BIRT parameter groups are now arranged in elegant & ergonomic alloyUI tabs!

 

          

Liferay 6.2

 

  • The application is automatically taking advantage of your portal theme

 

Liferay 7 (v. alpha 5)

 

  • Light-weight javascript headers: the "Time-To-First-Byte" is drastically reduced! 

jQuery core and headjs are the only modules loaded in page headers: this merely weights 38 Kb compressed. Then a loading animation is displayed pending other required javascript resources are ready. 

In version 4, many javascript modules have been removed from the critical path of reports rendering because they are loaded on-the-fly when requested. 

 

  • Fantastic responsive reports embedded!

          

 

Liferay Symposium 2015

I am delighted to participate to Liferay Symposium 2015 in France. On this occasion i shall have a booth space to exhibit the next major Visioneo version 3.0. Visit the roadmap of this version here, it will fully leverage Liferay abilities: the flexibility of reports management will be pushed to its paroxysm!

I have been playing with the main milestones for a few weeks and i can ensure the result is impressive. I hope lots of you will come to this Symposium and share experiences!