OBIEE Google Charts part 1

or how to get from:

to this:

in 5 minutes.

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

In the prefix part put:

<!--Get an empty map-->
<img src="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/

Till Next Time

This article is also published on http://knowledge.ciber.nl