Tip of the Week

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..

Comments

 

Donald Jackson said:

I tried using your example.  I created a new action control button for a script, clicked on 'new script', and paste in your example (the italicized text).   Then I mapped the button to the script.  When I try to leave edit mode in the text area that contains the button my client crashes.  I see this repeatedly and consistently.  I'm using Tibco Spotfire 3.1

Also, in a real-world example I would want to pass attributes from my data set as the arguments for the chart instead of hard-coding it into the URL.  How does one do that?

Thanks,

Don Jackson

June 30, 2010 12:16 PM
 

Kevin Hanegan said:

Hi Don,

There could be a couple things happening which cause your crash. Have you been able to create any scripts at all without it crashing, or is it specific to this example? If all scripts crash , it could be that your 3.1 server has not been updated with the latest patches. There was a bug where editing scripts offline caused a crash, but that was fixed in a patch. Let me know.

I agree with you on the real-world example, I did not want to over complicate the post  by picking a very specific use case, but you would have to use the Script Control to query the data set and retrieve values. Depending on the data type and aggregation you wish to use , the script would be a bit different.  I can post a sample of one scenario if you are interested, but I would also recommend training on the Script Controls if you are serious using it so you can update it with your specific use cases.

Thanks,

Kevin

June 30, 2010 9:13 PM
 

EranS said:

Hi Kevin,

In the example (amazing one) above the Property controls needs an action to activate. then each click will create a duplicate of the graph.

Is there a way to predefine just 1 text area were this will happen?

Is there a way to automate the action to react on other user actions like filtering?

Thanks,

Eran

July 1, 2010 3:03 AM
 

Kevin Hanegan said:

Hi Eran,

Great questions.

There are two options. One option is to have one button to create the text area and the other update the chart in the text area. In that second chart we would have to lookup the text area using the APIs, possibly by the title.  The second option could be to use one script and have the script check if the Text Area already exists (again it would have to be based off its title or GUID or similar, but title would be the easiest, assuming you have a unique title for the Text Area), then if it does exist, clear the text area completely and then resource the image and if it does not exist, create it and then source the image.

For the filtering (and marking) there is no direct way to have scripts automatically update without clicking a button, so we could do it, but it would have to include a button click.

Im glad people are enjoying this tip. If you would like, I can expand the tip in the next week or so to include the script code to pull data to push into the image URL, and also include code to update the chart based off a button click for filtering?

Also, any other ideas for tips (im always looking for cool things to show)

Thanks!

Kevin

July 1, 2010 6:47 AM
 

hvmarck said:

In my word cloud script ( spotfire.tibco.com/.../756.aspx ) I use an '<HR>' element to separate the button from the graph. The script looks for the '<HR>' element (if it is not there it inserts one at the start), removes everything before and replace it with the new HTM content.

Best regards,

Herwig

July 1, 2010 11:46 AM
 

Kevin Hanegan said:

Ah, very nice Herwig...that is a perfect way to have the button and the graph in the same text area. I was not even considering that, but after seeing your reply, I completely missed that in Eran's question (sorry Eran).

Kevin

July 3, 2010 7:34 AM
 

Jsykes said:

Kevin,

Re. "...I agree with you on the real-world example, I did not want to over complicate the post  by picking a very specific use case, but you would have to use the Script Control to query the data set and retrieve values. Depending on the data type and aggregation you wish to use , the script would be a bit different. "

I'm attempting to use the 'Google-O-Meter' to display aggregated values (or BLOCKED EXPRESSION at run time from my dataset. Do you have an example that you can share (or possibly email)?

Thanks,

Justin

January 26, 2011 1:23 PM
 

uggkensington said:

http://www.uggkensingtons.org/

http://www.uggkensingtons.org/ugg-fox-fur-short-boots-5531-c-54.html | UGG Fox Fur Short Boots 5531

http://www.uggkensingtons.org/ugg-kensington-boots-5678-c-2.html | UGG Kensington Boots 5678

http://www.uggkensingtons.org/ugg-rainier-eskimo-boots-5189-c-85.html | UGG Rainier Eskimo Boots 5189

http://www.uggkensingtons.org/ugg-retro-cargo-boots-1895-c-3.html | UGG Retro Cargo Boots 1895

December 27, 2011 8:13 PM
 

uggskensingtonsale said:

www.uggskensingtonsale.org

www.uggskensingtonsale.orgugg-adirondack-boots-ii-c-6.html | UGG Adirondack Boots II

www.uggskensingtonsale.orgugg-adirondack-tall-boots-c-11.html | UGG Adirondack Tall Boots

www.uggskensingtonsale.orgugg-amberlee-boots-c-34.html | UGG Amberlee Boots

www.uggskensingtonsale.orgugg-annabelle-boots-c-35.html |

December 28, 2011 4:16 AM
 

uggretrocargosale said:

January 4, 2012 8:48 PM
 

Adin said:

Hi Guys,

i love the posibilities that the use of google charts opens up in terms of adding greater value to the spotfire reports that we produce. just one question though?

whats the security around this method like, to be frank i dont like the idea that the information is sent to google then sent back rendered. is there a more secuire version??

cheers

April 30, 2012 2:12 PM

Leave a Comment

(required) 
(optional)
(required) 
Submit

Syndication

Other Spotfire Blogs

Spotfire's interactive information visualization and analytic solutions give users a remarkable experience for quickly and easily querying data and reporting results for superior business intelligence. From portfolio management and customer retention programs to key processes such as CRM, marketing, research, bioinformatics, yield and asset management and design for manufacturing, enterprises around the world rely on Spotfire's business analytics software to improve operational performance.

©Copyright 2000-2011 TIBCO Software Inc | Privacy Policy | Terms of Use I Blog I Contact Us I Content Center