Customizing bullet graph in Ctools on Pentaho BI Server Community Edition - Part II - Conditional Formatting

In my previous post, we had seen how to customize some aspects of the bullet graph including the colours of the range values and the bar (measure value) and the target value (marker). In this post, we will carry on from there and add conditional formatting based on the data (red or blue).

One of the principles of Information Design is to use colour to attract attention to something that needs attention. All the other colours need to be blended so as to not attract attention. I would like to add the capability that the colour of the bar (measure value) changes based on which range the value falls in.

Conditional Formatting of a Bullet Graph

Lets start, from the place we left off. Since we have already customized our chart quite a bit, let us duplicate that and start from there.
To duplicate, navigate to the component you are interested in, highlight it and click on the icon to duplicate component as shown below.

I have modified the following values.

Parameter	Value	Description
Name	chtInnovation	Name of the component instance
Bullet Measures	69	The observed measure for this performance indicator
Title	Innovation/ Technology Investment	A title for all the graphs. In case, the graph is created for multiple categories, one bullet title appears for all the bullet graphs. Usually appears on top of the graph.
HtmlObject	Panel_3	Name of the placeholder for the graph. Clicking on backspace in the text input box, displays the list of available html containers.

These changes are shown below.

Clicking on preview, we can see the following dashboard.

To apply conditional formatting, we need to change in Advanced Properties. Make the following changes in Advanced Properties. Click on values for Extension points

Add the following entry as an additional argument

Argument	Value	Description
bulletMeasure_fillStyle	function(v,d){var accVar=50;if(d.ranges && d.ranges.length>2){accVar=d.ranges[d.ranges.length-2];} if(v>accVar){return "#43578A";}else{return "#CE2B0F";}}	Adds conditional formatting to the measure bar, that if there are ranges defined in the bullet graph and there are atleast 2 of them, then highlight the fill colour if the measure is less than second last range.

In the code above, since our measure value is 69, and the top but one range starts from 75, our graph should appear in a shade of red rather than the default colour, which is a shade of blue.

Upon adding, the new argument will look as following on the Extension points form.

Now saving the graph and previewing it, we can see the bullet graph colour change when value is less than second range (75), which means it is a cause for concern, as shown in the screen below.

In this post, we saw how to add conditional formatting to bullet graphs so that is there is something that needs to be brought to the attention of a busy executive, it can be highlighted appropriately based on relative value of the measure to the ranges.

Install Community Dashboard Tools on Pentaho BI Server 4.5 Community Edition

Soon after installing and setting up Pentaho Community Edition on my box, I realized that it does not ship with a dashboard tool. That has to be installed from another project called CTools.

Downloading CTools

CTools is available at http://www.webdetails.pt/index.html#ctools. Once you access this URL, you will access the following page.

The page contains a link to download Ctools bundle. Accessing that link shows the following page on the Github site.

We can download the shell script and the README.txt file to our local folder. I must warn that saving the ctools-installer directly from the browser and right clicking, actually gave me the html of the current page, rather than the file. For downloading the file, I had to click the file, go into edit mode and copy-paste the contents to a local shell script file.

Anyways, I downloaded it to a folder called ctools under my Pentaho folder. The first thing is to make ctools executable. This is done by entering the following command on the command line in a terminal window.

> chmod a+x *.sh

The next thing we need to do is to run the installer with the correct parameters. This is done, as shown below.

> ./ctools-installer.sh -s pentahoServer/biserver-ce/pentaho-solutions -w pentahoServer/biserver-ce/tomcat/webapps/pentaho

On my machine, the above works out to the following.

> ./ctools-installer.sh -s ~/Work/Servers/Pentaho/biserver-ce/pentaho-solutions -w ~/Work/Servers/Pentaho/biserver-ce/tomcat/webapps/pentaho

Executing the above script, we can see that the script downloads the necessary files needed for the installation. The script prompts to replace several of the existing scripts that I accepted, as show below.

Once the prompts are through, the installation starts and finally it is done!

Now we need to start the embedded tomcat instance contained within Pentaho dashboard, and we can see that upon logging in as a user, we can access additional links for Community Dashboards (called CDB, CDV, CDE and CDC).

Accessing link for CDE (Community Dashboard Editor), the user can now define their own dashboards as shown below.

That's it. We have successfully installed Community Dashboards on Pentaho Community Edition. In the next post, we will see how to configure a dashboard.