venn diagrams in OBIEE using google api

Recently got a requirement to represent  the data in the form of ‘venn diagram’. Unfortunately BI doesn’t have that feature… so tried the alternate ways and found that its possible with using of google api.  Below given graph represents the customers count in each category which is being generated using google api.

Red color, Green color, Blue color circles indicates no.of customers under ‘bad sales’, ‘bad Service’, ‘bad Network’ categories respectively.
The common part of Red&Green circles indicates no.of customers under both ‘bad Sales’ & ‘bad Service’ categories.
The common part of Red&Blue circles indicates no.of customers under both ‘bad Sales’ & ‘bad Network’ categories.
The common part of Blue&Green circles indicates no.of customers under both ‘bad Network’ & ‘bad Service’ categories.
The common part of Red,Green&Blue circles indicates no.of customers under all ‘bad Sales’, ‘bad Service’ & ‘bad Network’ categories

venn1

Procedure to create venn diagram in OBI using google api:

1) Create the table in a report with the required columns.

Note: while dragging the columns in Criteria section, drag the columns in an order. (don’t do move operation between the columns  in Results view)

2) Create a narrative view.

venn2

3) Paste the following code in the Narrative input text box.

<img src=”” id=”venn_chart@9″/>  <!– creates an unique img tag –>
<script type=”text/javascript”>
var chartURL = “http://chart.apis.google.com/chart?cht=v&chs=350×230&chd=t:@1,@2,@3,@4,@5,@6,@7&chtt=@{cb96d660824a87f7a}&chdl=Sales (@1)|Service (@2)|Network (@3) &chdlp=b” ;
/* cht = chart type
   chs = chart size
  chd = chart data
  chtt = chart title
  chdl = chart legend
  chdlp= chart legend position
  more info http://code.google.com/intl/nl/apis/chart/ *//* get the chart */
document.getElementById(‘venn_chart@9’).src = chartURL;
</script>

 
venn3
 
 
-> The size of the graph, data & all the information required to generate the graph is given in the  ‘chartURL’ variable which is given as source to the image tag which will generate the required venn diagram.
 

URL explanation:

chs=350×230 -> represents width & height of the graph. (chart size)

chd=t:@1,@2,@3,@4,@5,@6,@7  -> represents, take the data from the table whose column ids are 1,2,3,4,5,6,7. The order is according to the view in Criteria Section. (here ‘@1’ contains the data present in column 1)
chdl=Sales (@1)|Service (@2)|Network (@3) &chdlp=b -> represents what legend to display for the three colors. Here in this example I’m giving the name to each color circle along with the data which it represents.
 

That’s it !! Now you’ll be able to see the the data in the form of Venn diagram.