OBIEE Google Charts

Tuesday, June 7, 2011

How to integrate Google Charts/Maps in your OBIEE report in only a few minutes!

Or how to get from:

to this:

in 5 minutes.

It uses the same technique as with the googlemaps. Create a new narrative view.

In the prefix part put:

<!--Get an empty map--> 
<img src="https://www.juvo.be/%3Ca%20href%3D"http://chart.apis.google.com/chart?cht=t&chm=europe&chs=440x220">http://chart.apis.google.com/chart?cht=t&chm=europe&chs=440x220" id="GD_mapImg"/> 
<!--chm ==> geographical area (africa, asia, europe, middle_east, south_america, usa, world)--> 
<!--chs ==> canvas size max 440X220--> 
<!--more info http://code.google.com/intl/nl/apis/chart/ --> 
<script type="text/javascript"> 
  // setting up parameters 
  var chartURL = "http://chart.apis.google.com/chart?cht=t&chtm=europe&chs=440x220&chds=1,6"; 
  var chartBGColor = "&chf=bg,s,EAEAEA"; 
  //specify the gradient: <default color>, <start of gradient>,.., <end of gradient> 
  var chartPalette = "&chco=AEF5EB,EFE6CE,DFAE6B,1F6913,D94801,A63603,7F2704"; 
  var chartDataLabels = new Array(); 
  var chartData = new Array();

In the Narrative part put:

// Use the push command to fill the array: 
chartDataLabels.push('@1'); 
chartData.push(@3);

In the postfix part put:

 // putting it all together 
  chartURL = chartURL + chartBGColor + chartPalette + "&chld=" + chartDataLabels.toString().replace(/,/g,'') + "&chd=t:" + chartData.toString();; 
  // now get the image from Google Chart 
  document.getElementById('GD_mapImg').src = chartURL; 
</script>

Remember to check the HTML box:

There are maps for africa, asia, europe, middle_east, south_america, usa and the world.
For more info see: http://code.google.com/intl/nl/apis/chart/