Criando Dashs CDE com Gráficos HighCharts

A HigCharts é uma boblioteca de gráficos escrita em JavaScript puro, que oferece uma forma fácil de adicionar gráficos interativos em sua aplicação web.

Um grande atrativo do HighCharts são os gráficos 3D. Você pode saber um pouco mais através deste endereço: http://www.highcharts.com/

Em busca de mostrar um diferencial para meus clientes, vi nesta biblioteca uma grande oportunidade, porém uma curva de aprendizado surgia diante de mim. Como aplicar estes gráficos no CDE?

Vou dividir aqui com vocês, leitores do meu blog, essa experiência. Vejam como é simples ter gráficos 3D em seus painéis CDE.

Primeiro vamos ver o gráfico HighCharts que vamos utilizar em nosso exemplo: Clique aqui

Nessa tela temos 4 quadrantes. Numeramos eles da esquerda para direita e de cima para baixo:

1. Código HTML com as chamadas da biblioteca e a div que recebe o gráfico;
2. Classes de estilo (não usaremos)
3. Código JavaScript que cria e alimenta o gráfico
4. Gráfico propriamente dito.

O maior desafio aqui era usar um datasource para alimentar as barras do gráfico.

Note que no código JavaSript há um parâmetro onde é passado um vetor com os valores:

series: [{
data: [50.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

Este vetor deve ser substituído pelo vetor de retorno do datasource. Chega de bla bla bla. Vamos colocar a mão na massa.

1. Crie um novo painel CDE
2. Adicione um painel bootstrap
3. Dentro de “Panel Body” Acrescente uma “Row”
4. Dentro dessa “Row” Acrescente um HTML
5. Na propriedade HTML cole o seguinte código proveniente do site do HighCharts:<script src=”http://code.highcharts.com/highcharts.js”></script>
   <script src=”http://code.highcharts.com/highcharts-3d.js”></script>
   <script src=”http://code.highcharts.com/modules/exporting.js”></script>

   <div id=”container”></div>
   <div id=”sliders”>
   <table>
   <tr><td>Alpha Angle</td><td><input id=”R0″ type=”range” min=”0″ max=”45″ value=”15″/> <span id=”R0-value” class=”value”></span></td></tr>
   <tr><td>Beta Angle</td><td><input id=”R1″ type=”range” min=”0″ max=”45″ value=”15″/> <span id=”R1-value” class=”value”></span></td></tr>
   </table>
   </div>

Sua perspectiva layout deve estar como na figura abaixo:

Agora vamos criar um datasource para popular o gráfico:

1. Vá na perspectiva “datasource”
2. Selecione o tipo “SQL Queries”
3. Selecione o subtipo “sql over sqljndi”
4. em properties altere as seguintes propriedades:
   1. name: sql_valores
   2. jndi: <coloque sua conexão com o banco> – No meu caso dw_ivb
   3. Query: <escreva sua query> – No caso do explo didático escrevi a consulta abaixo:

select 10 as valorVenda union all
select 15 as valorVenda union all
select 16 as valorVenda union all
select 14 as valorVenda union all
select 13 as valorVenda union all
select 11 as valorVenda union all
select 12 as valorVenda union all
select 15 as valorVenda union all
select 16 as valorVenda union all
select 18 as valorVenda union all
select 20 as valorVenda union all
select 22 as valorVenda

Sua perspectiva Datasource deve ficar conforme a figura abaixo:

Agora vamos adicionar o componente que vai popular nosso gráfico. Selecione a perspectiva “Components” e siga os passos abaixo:

1. Selecione o grupo de componentes “Others”
2. Escolha “Query Component”
3. Altere as propriedades:
   1. Name: recebeResultado
   2. Result Var: vetorRetorno
   3. Datasource: sql_valores
   4. Post Execution (fica em “Advanced Properties”): function() {<cole aqui o código javascript que você pegou no site do HighCharts>}

Essa propriedade deve ficar assim:

function(){
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
type: ‘column’,
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: ‘Chart rotation demo’
},
subtitle: {
text: ‘Test options by dragging the sliders below’
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});

function showValues() {
$(‘#R0-value’).html(chart.options.chart.options3d.alpha);
$(‘#R1-value’).html(chart.options.chart.options3d.beta);
}

// Activate the sliders
$(‘#R0’).on(‘change’, function () {
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$(‘#R1’).on(‘change’, function () {
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});

showValues();
});
}

A essa altura, se você clicar em preview já vai ter o gráfico, porém com os dados fixos do exemplo do HighCharts.

Para colocar os dados provenientes de um datasource, você precisa passar para o atributo data do javascript do gráfico, o seu vetor de dados retornado pelo seu datasource. Este vetor recebe o nome que você definiu na propriedade Result Var do seu objeto “Query Component”.

Vejamos então como deve ficar seu código javascript ao final da alteração:

function(){
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
type: ‘column’,
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: ‘Chart rotation demo’
},
subtitle: {
text: ‘Test options by dragging the sliders below’
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data: vetorRetorno // Única linha alterada. Passei aqui o vetor de dados do meu query component 
}]
});

function showValues() {
$(‘#R0-value’).html(chart.options.chart.options3d.alpha);
$(‘#R1-value’).html(chart.options.chart.options3d.beta);
}

// Activate the sliders
$(‘#R0’).on(‘change’, function () {
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$(‘#R1’).on(‘change’, function () {
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});

showValues();
});
}

Se acompanhou tudo até aqui, sua perspectiva “Components” deve estar conforme a figura abaixo:

Agora clique em preview e veja a mágica acontecer.

Até a próxima 😉