Skip to Content

Integrating Google Visualization API’s in BSP Apps…..


Yesterday, I noticed that Google had released a new Visualization API’s for charting. So I thought of building the same  in our favourite BSP application(htmlb & javascript) .

Let us convert our structured data into more meaning full figures like charts, maps etc using Google Visualization API.







What is the Google Visualization API?

The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Google Visualization API enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource. Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications. The Google Visualization API also provides a platform that can be used to create, share and reuse visualizations written by the developer community at large.

Visualizations are small embedded objects that take structured data from a variety of sources and present them in new and interesting ways. Visualizations can be embedded on any web page by adding some simple JavaScript and HTML. Much visualizations have also been wrapped as gadgets, for display on web pages or additional targets.

*Features * Visualizations can capture or fire events, such as mouse clicks, that your page can capture and process, and you can link them together to create rich, interactive pages–for example, combining a map and a table that stay in sync when clicked.[Read more |

We can also create our *own visualizations using * Javascript.And these visualizations can also be wrapped into a gadget.Read more Gadget Extensions .</p><p>*Code Snippet* : This code snippet contains HTMLB & JavaScript coding.It uses Google Visualization API’s to showcase visual elements like charts,maps,guages etc… The below code has to be added in the Layout section of a BSP page (Page with flow logic).</p><p>The data will be populated at the creation of the page .I have used a DIV tag to display the chart and all the chart functions are written in client-side scripting – JavaScript.(which avoid flickering effect on the page ).The below visualizations are interactive in nature.</p><p><textarea cols=”75″ rows=”25″><%@page language=”abap” %>
<%@extension name=”htmlb” prefix=”htmlb” %>
<script type=”text/javascript” src=”” mce_src=””>
<script type=”text/javascript”>

google.load(“visualization”, “1”, );

<%– table –%>

function drawTable() {


  data :lt_table type TPDA_SFLIGHT_TAB,

  ls_content like LINE OF lt_table.

  lt_table = pt_content.


var data = new google.visualization.DataTable();

data.addColumn(‘string’, ‘Airline Code’);

data.addColumn(‘number’, ‘Air fare’);

data.addColumn(‘string’, ‘Currency’);

data.addColumn(‘number’, ‘Maximum Seats ‘);

data.addColumn(‘number’, ‘Occupied Seats’);

data.addColumn(‘boolean’, ‘Seats Available’);


  Data : lv_col type i,

  lv_rows type i,

  lv_status type string.

  lv_col = 0.

  • just to reduce the large volume of data

  • please change the code according to your data available


  sort lt_table ASCENDING.


  DESCRIBE TABLE lt_table LINES lv_rows.


data.addRows(<%= lv_rows%>);


  loop at lt_table into ls_content.

  if ls_content-seatsocc = 0.

  lv_status = ‘false’.


  lv_status = ‘true’.



data.setCell(<%= lv_col%>,0,'<%= ls_content-carrid %>’);

data.setCell(<%= lv_col%>,1,<%= ls_content-price %>,'<%= ls_content-price %>’);

data.setCell(<%= lv_col%>,2,'<%= ls_content-currency %>’);

data.setCell(<%= lv_col%>,3,<%= ls_content-seatsmax %>,'<%= ls_content-seatsmax %>’);

data.setCell(<%= lv_col%>,4,<%= ls_content-seatsocc %>,'<%= ls_content-seatsocc %>’);

data.setCell(<%= lv_col%>,5,<%= lv_status%>);


  lv_col = lv_col + 1.



var table = new google.visualization.Table(document.getElementById(‘chart_div’));

var formatter = new google.visualization.TableBarFormat({width: 120});

formatter.format(data, 4);

table.draw(data, );, ‘select’, function() {

     var row = table.getSelection()[0].row;

     alert(‘You selected ‘ + data.getValue(row, 0));



For data source, i have used the Flight model(SFLIGHT) and the below code should be place   under the onCreate Event.

SELECT  * from SFLIGHT into TABLE pt_content .

 (Note : This example is just to show how the google visualization API works.)

 Create a Table type for SFLIGHT.

example : TT_SFLIGHT – type of table sflight. 

BSP PAGE Attributes 

pt_content – type – tt_sflight.

BSP Output :-

!|height=386|alt=BSP Output|align=middle|width=500|src=|border=1!

[ |]

<u>Reference Links</u>



[Using Visualizations |]

How to embed a non-gadget visualization in your page. Even if you want to use visualization gadgets, this is good background material.

[Sending Data Requests |]

How to send a data request to a site that returns data for your visualization.

[Handling Events |]

How to handle events (such as mouse clicks).

[Using Visualization Gadgets |]

How to embed a visualization gadget in your page.

[More Examples |]

More examples of Javascript visualizations.

I have tried only with few API’s whereas Google has released more.please go through the reference links .   

* Photos,Information are courtesy of Google.. </p>

You must be Logged on to comment or reply to a post.