Charts in OBIEE using Google API

Here are the steps to create an donut chart using google API. This visualization is built using an API for pie chart which gives different look and feel.


Google gallery have different interactions which can be embedded into OBIEE.

https://developers.google.com/chart/interactive/docs/gallery

Here are the steps to create a donut chart in OBIEE.


1. Add a dimension and measure in the criteria, something like this:

2. Add Narrative view and add the following code, the columns need to be changed as per your criteria

In the Prefix add the following code: 

<script type="text/javascript"  src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

//if(document.URL.indexOf("saw.dll?Answers") == -1) {

     google.charts.load('current', {'packages':['corechart']});

      google.charts.setOnLoadCallback(drawChart);

//}

       

     function drawChart() {

if(document.URL.indexOf("saw.dll?Answers") == -1) {

          // Create and populate the data table.

         var data = new google.visualization.DataTable();

        data.addColumn('string', 'Status');

       data.addColumn('number', 'Count'); 

          var myArray=[];

In Narrative Section: 

myArray.push(["@1", @2]);

In Postfix add this code: 

data.addRows(myArray);

          // Create and draw the visualization.

         var chart = new google.visualization.PieChart(document.getElementById('donutchart'));;

          chart.draw(data, {width: 700, height:300, pieHole: 0.4, pieSliceText: 'value'});

      }

// colors can be customized with this:  colors:['#50F550','#FFA500', '#FF3C3C', '#FFFF78','#287AC3','#9123DA', '#00BFB5', '#C6687B', '#68C6C2' ]

   }

</script>

<div id="donutchart" style="width: 400px; height: 300px;"></div>

Note: The chart may not be visible in results view sometimes, it will work well when placed on the dashboard. Visit google gallery for any other parameters needed.