Back

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.

Next
Comments
Trackback URL:

No comments yet. Be the first.