Third in a series.
Font symbols (like those above) are a great way to embed graphics into BIRT reports and dashboards. We like them because they are vector rather than raster graphics, meaning they look great no matter how much you scale them, and are small in size. Since BIRT reports are HTML5, you can do almost anything with font symbols in your reports.
There are numerous font symbol families like WingDings (used in the print world, these may already be on your computer) and Font Awesome (available at http://fortawesome.github.io/Font-Awesome/). Font Awesome, which is licensed with BIRT iHub, was used to build the examples here. You can find a font symbol of almost anything with a quick internet search; just make sure to respect copyrighted material when you use a symbol.
There’s one more reason to use font symbols instead of raster graphics (such as JPEG, PNG or GIF files): the font itself does not need to be installed on the client machine, as long as you include the font in the report. To include Font Awesome symbols in a report, enter the below line in clientScripts/clientInitialize:
head.js ("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css",null);
We can suggest four great ways that you can use font symbols:
- Icon buttons. The obvious use case is arrows (like on old-time cassette recorders) for next page, previous page, and end of report, but the variety of available symbol suggest many new uses.
- Icon KPIs. You can create simple KPIs (Key Performance Indicators) with BIRT table aggregators and a font symbol. These KPIs are ideal for viewing on mobile devices.
- Icon columns in a table. With a smidgen of JavaScript, you can add any font symbol to any column in a table. The symbol provides a quick-to-read representation of data.
- Icons in bar charts. By adding a beforeDrawDataPoint function in the edit chart wizard, you can add font symbols to bar charts.
We created one report that uses font symbols in all four ways. Download it here. Following are some specific step-by-step instructions for each suggested font symbol use.
Icon Buttons
Clicking on an icon-based button instead of (or along with) a word makes a report more visually interesting. The basic steps are:
- Drag an HTML Button onto the layout. You may want to create a grid and add a text label.
- In the General Properties tab, change the font to the symbol font that you are using (such as Font-Awesome). In this tab, you can also set font properties like size and color (like the red, grey and blue above).
- In the cell that the icon button is in, set the vertical alignment to “Middle.” (This is optional, but we find it helps control the button’s position.)
- In the script pane, enter the JavaScript that you want executed when the button is clicked.
Icon KPIs
A recognizable font symbol can make your KPIs easier to understand and move visible. To add them:
- Create a table with an aggregation
- Delete the detail and excess header/footer rows. You should only have the aggregation(s) that are part of the KPI
- Drag the labels to the table with the aggregation. You may want to use a grid or use other formatting techniques
- Cut and paste a font symbol into the label. In the label properties, select the symbol font, font color, size, etc., as you see in the image above.
Icon Columns in a Table
If a column of a table contains data that can be easily represented by a font symbol, do the following:
- Create a table with all the columns from the data set that you want
- Create a new column for the font symbol
- Drag a Data item from the palette to the new column; add a label to the column header if needed
- In the data item properties tab, change the font to the symbol font family. Set the font size, color, etc. (We’ve set Male to red and Female to blue in our example table.)
- In the JavaScript expression pane of the data item, cut and paste the JavaScript logic including the font graphic in quotes. For example:
if (dataSetRow["gender"] == ‘M’) { '•'; // Male graphic } else { '•'; // Female graphic }
Icons in Bar Charts
A font symbol can emphasize the meaning of a bar in a chart. To add them:
- Create a bar chart with BIRT’s charting wizard
- Click on the fx Script pane in the Edit Chart dialog
- Add a “beforeDrawDataPoint” script function
- Add the JavaScript that includes the font symbol. For example:
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex) { pointOptions.dataLabels = { enabled: true, useHTML: true, formatter: function() { returnStr = '<div style="text-align:center">'; switch(this.x) { case 'Cancelled': returnStr = returnStr + '<i class="fa fa-ban"></i>'; break; case 'Disputed': returnStr = returnStr + '<i class="fa fa-folder-open"></i>'; break; case 'In Process': returnStr = returnStr + '<i class="fa fa-car"></i>'; break; case 'On Hold': returnStr = returnStr + '<i class="fa fa-wrench""></i>'; break; default: returnStr = returnStr + '<i class="fa fa-star""></i>'; } returnStr = returnStr + '<br>' + this.y + ' %</div>'; return returnStr; } } },
This series of free BIRT Interactive Viewer Extensions is being created by BIRT engineers Clement Wong and Bill Clark. BIRT Interactive Viewer is ideal for putting personalized BIRT content in all users’ hands, and their goal with these extensions make it even better.
The next blog entry in this series will show how to add external web services to BIRT Dashboards. Specifically, we will create a BIRT gadget with the Disqus community discussion board. Using a Disqus BIRT gadget allows your users to add comments and annotations to the dashboard without any coding on your part.
Please Subscribe (at left) to be notified of new entries. And let us know in the comments what other additions you’d like to see in BIRT Interactive Viewer.
Past BIRT Interactive Viewer Extensions
Extend BIRT Interactive Viewer with a Pop-up Dialog Box
Extend BIRT Interactive Viewer with Row Highlighting