Integração do Google Charts com a Narrativa do OBIEE

Esta postagem tem o objetivo de integrar o OBIEE ao Google Charts, para a utilização de alguns tipos de gráficos que o BI 11g não contempla, por exemplo o gráfico da diferença:

Este gráfico tem a função de fazer comparações entre dois conjuntos de dados, por exemplo, ele é ideal para comparação entre períodos diferentes. Vale salientar que a biblioteca do google está no site do google, portanto a visualização só será possível com acesso a internet. Feitas as considerações vamos ao que interessa! A nossa integração será feita com o gráfico de diferença, já que este recurso não está disponível atualmente no BI. Para começar selecione os parâmetros desejados dentro do BI como na imagem a seguir:

Em seguida vamos para a tela de resultados para adicionar uma narrativa:

Vamos editar a narrativa para começar a brincadeira, a narrativa é composta de três campos de texto o prefixo, a narrativa e o sufixo. Entendam que a parte que inserimos as referências dos dados vindos do BI sempre estarão no campo de texto central, a narrativa, pois a mesma é responsável pelo loop dos dados. No campo prefixo devemos adicionar o seguinte texto; observe os comentários feitos!!!:

<!-- Insere a biblioteca do google charts na nossa narrativa -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

<!-- Chama o load do google através da função "drawChart" -->
google.load("visualization", "1.1", {packages:["corechart"],callback:drawChart});

<!-- A função "drawChart" por sua vez tem o objetivo de além de preencher duas lista que serão comparadas (listNew e listOld, nesse caso), também carrega o gráfico desejado num componente HTML-->
function drawChart() {

var listNew = [];
var listOld = [];

<!-- Após o carregamento da lista precisamos passar as mesmas para o google charts atrevés do objeto DataTable, observe a quantidade de colunas de cada lista e o tipo de cada coluna, pois se algo estiver errado a nossa integração não irá dar certo! -->
 var dataNew = new google.visualization.DataTable();
  dataNew.addColumn({ type: 'string', label: 'ANO' });
  dataNew.addColumn({ type: 'number', label: 'QTD NOVO' });

 var dataOld = new google.visualization.DataTable();
  dataOld.addColumn({ type: 'string', label: 'ANO' });
  dataOld.addColumn({ type: 'number', label: 'QTD ANTIGO' });

Agora iremos para o campo Narrativa, para preencher as nossas listas; observe os comentários feitos!!!:

<!-- Nesta etapa vamos preencher as listas. Se algum campo for string adicionar o apostrofo antes e depois do parâmetro como no exemplo do campo @1. Para campos numéricos temos que tomar cuidado com o padrão regional do BI, pois o google charts por default está configurado para o padrão americano, caso o servidor de BI esteja configurado com a pt-BR (Brasileiro), alterar a formatação das colunas numéricas para retirar as casas decimais -->
listNew.push(['@1',@2]);
listOld.push(['@1',@3]);

Por último preenchemos o campo sufixo com o seguinte conteúdo; mais uma vez, observe com atenção os comentários feitos!!!:

<!-- Adiciona as listas nos dataTables dataNew e dataOld-->
dataNew.addRows(listNew);
dataOld.addRows(listOld);

<!-- Esta opção é responsável por personalizar seu gráfico vale a pena ler um pouco mais sobre esse item para saber até onde você pode ir com a integração, no nosso caso vamos apenas colocar o título do gráfico -->
var options = { title: 'Teste' };

<!-- Cria o tipo do gráfico que será exibido na tela, no nosso caso de Coluna, passando o objeto HTML que receberá nosso gráfico, aqui o objeto span com o id = piechart_diff -->
var chartDiff = new google.visualization.ColumnChart(document.getElementById('piechart_diff'));

<!-- Está linha computa a diferença entre os dois dataTables que foram setados acima, gerando um conjunto único de dados-->
var diffData = chartDiff.computeDiff(dataOld, dataNew);

<!-- Passa pra o nosso gráfico o conjunto de dados único e as options que setamos-->
chartDiff.draw(diffData, options);
 }
</script>
<!-- Objeto HTML que irá exibir o conteúdo do gráfico -->
<span id='piechart_diff' style='width: 450px; display: inline-block'></span>

Bom com o final desse texto já conseguimos visualizar o nosso gráfico de diferença, conclua a narrativa. Afim de evitar algum problema mude a formatação das colunas numéricas para a seguinte configuração:

Pode ser que em alguns casos você não consiga visualizar a nossa narrativa, então clique na imagem para mostrar a visualização como seria exibida no painel, isto basta pra visualizar a nossa integração. Se mesmo assim o gráfico não aparecer, por favor repita os passos pois algo deve está errado. Observe a formatação das colunas numéricas pois ela é uma grande candidata a dar problemas na nossa integração. Abaixo temos o resultado da nossa integração:

Caso queria alterar o tipo de gráfico mude a linha:

var chartDiff = new google.visualization.ColumnChart(document.getElementById('piechart_diff'));

Para:

var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));

Este gerará um gráfico de Pizza com a diferença:

Você ainda pode alterar para um gráfico de barras horizontais alterando para:

var chartDiff = new google.visualization.BarChart(document.getElementById('piechart_diff'));

Com isso concluímos este post da integração do OBIEE com o Google Charts, espero ter ajudado a nossos leitores a entender um pouco mais sobre esta integração, para maiores conhecimentos e dúvidas sobre as opções sobre este gráfico segue o link do Google Charts para este tipo de gráfico: Diff Charts - Google Charts. Qualquer dúvida é só perguntar estarei sempre disposto a tentar sanar sa dúvidas, vamos aprendendo uns com os outros!

Obrigado e até o próximo post!