Saturday, January 16, 2010

OBIEE Google Charts part 1

or how to get from:

image

to this:

image

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:

image

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

4 comments:

Anonymous said...

Is it possible to show a map of a specific US State (say NY) and fill in the counties different colors...Eries county in Blue, Niagara county in green, etc?

I'd liek to use market share penetration data and color the counties based on the % market share we have...

John Minkjan said...

@Anonymous,

Check out the google charts docs. at the moment that's noet possible, try oracle mapviewer.

Regards

Anonymous said...

Hello

thanks for your post.

I try to manage to get the world map.

I replace http part: http://chart.apis.google.com/chart?cht=t&chtm=europe&chs=440x220&chds=1,6
by http://chart.apis.google.com/chart?cht=t&chtm=world&chs=440x220&chds=1,6

but I can find how to replace the first one:
img src="http:// chart.apis.google.com/chart?cht=t&chm=europe&chs=440x220" id="GD_mapImg"/

I try to change europe by world but I don't get any result.

Do you have an idea?

many thanks

John Minkjan said...

@Anonymous:
Try http://chart.apis.google.com/chart?cht=map:fixed=-60,0,80,-35&chs=440x220&chds=1,6

Check out http://code.google.com/apis/chart/docs/gallery/new_map_charts.html

regards

John