Embedding Google Charts inside TIBCO Spotfire


In an earlier post, we discussed how to add Horizontal Bar Charts and other charts into TIBCO Spotfire using S+ or R.  In this related post, we will show you how to add Horizontal Bar Charts and other charts into TIBCO Spotfire using Google Charts.

Google Charts is a simple yet extensive way to create a Web based chart. Google creates a PNG image of the chart, typically from data and formatting parameters in an HTTP request, although it also supports making the request in a SRC attribute of an image tag.

Using a Text Area and Script Controls in TIBCO Spotfire, we can access the necessary data and send it to Google, to render one of the many chart types they have.

Assume we have a data set that contains sales data for each salesperson.  We can gather the sum of sales data for each salesperson , using a Script Control, and can send it into the SRC attribute for the Image, like so:
<IMG src="http://chart.apis.google.com/chart?cht=bhg&chs=550x400&chd=t:1431,1085,1393,345,2514,2128&chxt=x,y&chxl=1:|Alexander|Amy|Barry|Brenda|Collin|Dwayne|&chxr=0,2600,20&chds=0,2600&chco=4D89F9&chbh=35,0,15&chg=8.33,0,5,5">

In the same script , we can then launch a new TextArea and set the content to be the image referenced above:

from Spotfire.Dxp.Application.Visuals import HtmlTextArea
from Spotfire.Dxp.Application.Visuals import VisualTypeIdentifiers
from System.Text import StringBuilder

sb = StringBuilder()
sb.Append('<IMG src="
http://chart.apis.google.com/chart?cht=bhg&chs=550x400&chd=t:1431,1085,1393,345,2514,2128&chxt=x,y&chxl=1:|Alexander|Amy|Barry|Brenda|Collin|Dwayne|&chxr=0,2600,20&chds=0,2600&chco=4D89F9&chbh=35,0,15&chg=8.33,0,5,5">')

textArea = Document.ActivePageReference.Visuals.AddNew[HtmlTextArea]()
textArea.AutoConfigure()
textArea.HtmlContent = sb.ToString()

Google Charts have many chart types. You can even modify the horizontal bar chart to act as a Gantt Chart.


 
One limitation of this approach where we use the SRC attribute to specify the parameters is that there is a maximum length for the URL used.  This limitation is browser dependant but typically is around 2000 characters.


If you run into this, you will have to create the Google Chart using an HTTP Post instead of an HTTP GET (the URL method). This can be accomplished, but does require the SDK. Inside the SDK, there is a sample visualization called Web Details, which actually embeds a web page inside Spotfire. You can configure the Web Details to use HTTP POST to display the same images as shown above..