Google Visualization in OBIEE

I recently came across Google Visualization API. I read about it one of the blogs I follow and found it really interesting. I had a requirement around 2-3 years back from a client who wanted to see, in a map, all the locations from where the users are approving the transactions. To get this done, the client had to buy a mapping service and the report was not that important to spend money. If I had known about the Visualization API, this could have been possible then.

So, how do we build a report like the one following –

The report above shows the population of Australia city-wise. I am using Geo Charts (https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart) to show the data in a map.

Overview of GeoChart

A GeoChart is a map of a country or a state and has two modes, region and markers. In the report above, I am using ‘markers’ as region only works at country and state level.

The most common way to use Google Charts is with simple JavaScript that you embed in your web page. You load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a <div> with that id to display the Google Chart.

Charts are exposed as JavaScript classes, and Google Charts provides many chart types for you to use. We are using GeoChart in this example.

GeoChart in OBIEE

All chart types are populated with data using the DataTable class. So, we make a report with three columns, say, State, City and Population and we want to graph population based on the city. SO, we would create a DataTable instance and populate it with these two column data.

But first, we load the Google chart library, instantiate the DataTable class and add the two columns, in my case, ‘City’ and ‘Population’. This is what goes into the Prefix section of the Narrative view.

Now in the Narrative section, where we have access to the actual data, we build the data table by adding rows to it. And as we can see, we are adding Column 1 (City) and Column 3 (Population) from the report.

And finally in the Postfix section, we select the options to customize the chart, create the chart object and finally draw it in the <div> that we have added at the end.

And that’s it. We have now created a OBIEE report with a map showing off all the data as markers. Exciting.

References:

  1. https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart
  2. https://google-developers.appspot.com/chart/interactive/docs/reference