Criando nossa primeira aplicação utilizando o Highcharts.
Para nossa primeira aplicação com APIs externas, vamos estar utilizando o highcharts. Neste exemplo, vamos aprender a fazer o gráfico que esta abaixo:
Lembrando que caso você queira colocar a API do highcharts dentro do pentaho, peço que você volte ao tutorial de como importar arquivos para o pentaho! mas não é obrigatório colocar a API dentro do pentaho, pois vou estar ensinando de dois jeitos diferentes. Dito isto vamos proseguir!
Obs: Para estes tutorias estou utilizando a versao 6.0.1.0
1.Criando um novo CDE Dashboard.
Vamos criar um novo CDE Dashboard. Cliquem em File -> new -> CDE Dashboard.
Após criar peço que ja salve o dashboard na pasa que desejar.
2.Bootstrap Panel
Adicione um novo Bootstrap Panel. Dentro do Bootstrap Panel, va em Panel Body e crie na sequencia:
- Uma Row
; - Dentro da Row crie uma Column
; - Dentro da column adicione um arquivo HTML
;
Mude o nome do html para "ht" e edite o arquivo html com o codigo abaixo, para editar o arquivo cliquem no icone " [...] " em HTML:
<div id='container'></div>
<div id='sliders'></div>
Caso você optou por nao importar a API do highcarts para o pentaho, cole o código abaixo:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id='container'></div>
<div id='sliders'></div>
Observe que eu não incluir as tags <html> , <head> e nem a tag <body> . porque? por que o bootstrap ja gerencia toda a organização dessas tags pra você. Você pode utilizar essas tags sem problema nehum, isto é apenas um exemplo ;)
Feito isto, clique em OK.
Sua configuração deve estar parecida com a imagem abaixo.
3.Adicionando recursos externos!
Se você optou por não importar a API para dentro do pentaho, peço que pule essa parte.
Lembra de quando eu falei no tutorial anterior que mostraria como acessar os arquivos escondidos? Essa é a hora!
- Clique em "add Resource"
; - Em "resource type" selecione JavaScript;
- Em "resource Source" selecione External File;
- Clique em "OK" ;
Adicione outro arquivo como este.
No primeiro arquivo coloque o nome de "highcharts" e no segundo coloque como "exporting"
Em "Properties", va na opção "Resource File" e clique no icone que parece um acento circunflexo " ^ ":
Procure na pasta onde voce importou a biblioteca do hicharts com o nome de "highcharts.js". No meu caso esta na pasta home/admin/highcharts/highcharts/code/highcharts.js
Observe que agora você consegue enxergar os arquivos ocultos pelo browser files.
Repita o mesmo procedimento para encontar o arquivo "exporting.js". No meu caso se encontra em home/admin/highcharts/highcharts/code/modules/exporting.js
Obs: é importante que voce salve o dashboard antes de importar os arquivos externos! Caso voce mude este arquivo de pasta tera que colocar o endereço novamente dos arquivos externos.
4.Components Panel.
Clique na aba de Componentes Panel e adicione um componente chamado "Query Component". O componente se encontra em Others -> Query Component.
Em Properties coloque:
- name: Resultado;
- Result Var: retornoConsulta;
- Datasource: consulta_sql;
- HtmlObject: ht;
Clique em "Advanced Properties" e edite a opçao "post execution", para editar clique no icone [...].
cole o codigo abaixo:
function(){
$(function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
});
showValues();
});
}
Clique em OK e salve o dashboard.
5.Datasources Panel
Adicione um datasource chamado "sql over sqljndi ".
Em properties coloque:
- name: consulta_sql;
- jndi: "coloque o nome da sua conexao com o banco", no meu caso se chama "sipac2_original"
clique em Query e coloque o codigo abaixo:
select 'Africa' as country, 107 as Year_1800, 133 as Year_1900 union all
select 'America' as country, 31 as Year_1800, 156 as Year_1900 union all
select 'Asia' as country, 635 as Year_1800, 947 as Year_1900 union all
select 'Europe' as country, 203 as Year_1800, 408 as Year_1900 union all
select 'Oceania' as country, 2 as Year_1800, 6 as Year_1900
Clique em OK e salve o arquivo.
Você ja pode visualizar seu Dasboard! uhul!!
Mas vamos com calma, ele ainda esta com os dados fixos do codigo JS. Agora temos que alterar aqueles dados para que ele possa enxergar nossa consulta com o banco de dados.
6.Domine o mundo!
Agora para finalizarmos nosso tutorial vamos voltar para "components panel" e editar nosso codigo JS!
Apague o código antigo e coloque o novo código abaixo:
function(){
$(function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: retornoConsulta.map(function(posicao){
return [posicao[0]];
}),
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: retornoConsulta.map(function(posicao){
return [posicao[1]];
})
},{
name: 'Year 1900',
data: retornoConsulta.map(function(posicao){
return [posicao[2]];
})
}]
});
showValues();
});
}
Clique em OK, salve o arquivo e visualize seu dasboard.
Vamos analizar os seguintes trechos de codigos:
...
categories: retornoConsulta.map(function(posicao){
return [posicao[0]];
})
...
series: [{
name: 'Year 1800',
data: retornoConsulta.map(function(posicao){
return [posicao[1]];
})
},{
name: 'Year 1900',
data: retornoConsulta.map(function(posicao){
return [posicao[2]];
})
}]
...
Perceba que essas foram as unicas linhas modificadas do codigo original. Mas de onde veio essa variavel "retornoConsulta"?
Lembra de quando eu pedi para que vocês colocassem o nomde do result var" como "retornoConsulta"(4.Components Panel)?
Esta variavel vai receber o retorno da sua consulta no banco em formato de vetores, veja na imagem abaixo como essa variavel é retornada pelo seu datasource:
Para acessarmos as posições de cada elemento é necessário uma função do JS chamada "map()". Onde o método map() cria uma nova matriz com os resultados da chamada de uma função para cada elemento da matriz. Lembrando que: a função map() não altera a matriz original.
Então nós retornamos um vetor somente com as informações que precisamos. Onde a posição "0" vai ser o nome dos países, "1" o valor do ano 1800 e "2" o valor correspondente ao ano de 1900.
Isto é tudo pessoal! Vejo vocês nos próximos capítulos!
