Your document is available



  • Bring your hierarchical data to life with drillthroughs, color coding, filters and much more!
  • Display a rich content in your nodes (small birt charts, images, hyperlinks,..)
  • Build any kind of tree from a very simple BIRT dataset: organizations, geographical breakdown, KPI structure, ...
  • Handles large trees with hundreds of nodes 
  • Fully customizable for each node (color, size, content, action, tooltip,...)
  • Circular reference handling
  • Tons of possible configuration settings
  • Very simple to use!


All modern major browsers support this widget: IE8+, Firefox, Chrome, Opera, Safari, etc.. It works perfectly with IPads.  The old default browser of Android is not very well supported, for a great render quality with Android we can use Chrome Android, Opera or Firefox.  

It is pluggable into any BIRT report server: Visioneo (obviously!), Eclipse WebViewer, iServer, Pentaho, etc, as long as we can include the framework in page headers (one javascript  and css file) . 

Levels depth

In the parameters dialog of this demo, it is possible to select an orientation and the levels depth our chart should try to display, when the area is large enough. With a "top" orientation, most of the time it won't be possible to display more than 2 sub-levels. To display more levels we need to switch to "Left" orientation, and increase the height of the portlet window. You can see an example here

It is very important to note the scale is taken into consideration to compute which levels can be expanded. In other words, when we zoom-out, the chart is able to display more levels. It might seem obvious, but  programmatically be sure it is not! 


Currently, this tree chart is integrated in a report  through BIRT scripting. By using default configuration settings, only 3 simple lines of script are necessary to build a tree chart from a birt dataset. And more important, we don't have to write any single line of client-side javascript!


Currently HTML and PNG formats are supported to export a tree. The PNG format has been especially implemented for this kind of interactive chart: it takes a snapshot of the current state of your portlet window, allowing to  easily include it in a mail or an office document.

Furthermore it is of course possible to design a different view for other formats, such in this example.


A facultative toolbar can be displayed within the chart area. It allows to apply some graph operations, such remove nodes, keep only, go to root etc. Furthermore, if necessary we can add custom commands directly from a BIRT report script! In report parameters of this example, a "Toolbar" group demonstrates how we can dynamically customize its layout. To avoid overcomplicating a portlet window, the native reportlet toolbar can be hidden or disabled through portlet preferences UI. In this example, just click at the top left corner to malke it visible.


This widget is available through Visioneo professional edition