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!
Muito bom!! Parabéns pela iniciativa do blog.
ResponderExcluirObrigado Anderson, caso tenha alguma dúvida ou sugestão de post nos envia que vamos postando, um abraço irmão
ExcluirParabéns pelo trabalho!
ResponderExcluir