Gerando gráficos na web utilizando módulos
Este artigo visa exemplificar a geração de gráficos utilizando o Objeto Módulo do Kankei.
Relação de gráficos que são possíveis serem gerados:
- Bars
- Bars 3D
- Curve
- Curve 3D
- Curve Surface
- Curve Surface 3D
- Cylinder 3D
- Doughnut
- Doughnut 3D
- Horizontal Bar
- Horizontal Bar 3D
- Horizontal Cylinder 3D
- Line
- Line 3D
- Pie
- Pie 3D
- Radar
- Stacked Bars
- Stacked Bar 3D
- Stacked Curve
- Stacked Curve Surface
- Stacked Horizontal Bar
- Stacked Horizontal Bar 3D
- Stacked Line
- Stacked Surface
- Surface
- Surface 3D
Abaixo segue o código Kankei Script que resultou os gráficos:
/* ==================================================================================== modResumoVendasGrafico Exemplificar a geração de gráfico apartir de uma Pesquisa e/ou Estatística Detalhada via Kankei Web. Obs.: PARA GERAÇÃO DE GRÁFICO VOCÊ PRECISA DA VERSÃO WEB DO KANKEI Kankei Software e Consultoria Ltda - Todos os direitos reservados João Ferreira - 20/10/2009 www.kankei.com.br ==================================================================================== */ var pesquisa = 'pesqResumoVendasGrafico'; %> <html> <title>Exemplo de Utilização de Gráficos - Kankei Web</title> <head></head> <body> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Bars','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Bars3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Curve','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Curve3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'CurveSurface','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'CurveSurface3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Cylinders3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Doughnut','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Doughnut3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'HorizontalBars','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'HorizontalBars3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'HorizontalCylinders3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Line','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Line3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Pie','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Pie3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Radar','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Scatter','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedBars','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedBars3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedCurve','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedCurveSurface','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedHorizontalBars','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedHorizontalBars3D','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedLine','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'StackedSurface','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Surface','','ShowLegends')%>" /></p> <p><img src="<%=K.BD.GetResourceURL('chart',pesquisa,'Surface3D,'','ShowLegends')%>" /></p> </body> </html>
Explicação do código:
Primeiro bloco contém a pesquisa que resulta os dados para geração dos gráficos.
var pesquisa = 'pesqResumoVendasGrafico';
O segundo bloco é a página HTML que irá mostrar os gráfico.
O código
"<%=K.BD.GetResourceURL('chart',pesquisa,'Bars','','ShowLegends')%>"
é responsável por gerar o gráfico e este valor é passado para tag img src como parâmetro, formando assim o gráfico desejado.
Parâmetros da função GetResourceURL(1º,2º,3º,4º,5º);
1º - informa que é para ser gerado um gráfico (fixo não muda);
2º - o code da Pesquisa ou Estátistica Detalhada que será a fonte de dados para gerar o gráfico, pode ser informado o code diretamente ou criado uma variável (var) e atribuir o code da Pesquisa ou Estátistica Detalhada, conforme mostrado neste artigo;
3º - o tipo do gráfico, pode ser informado o tipo diretamente ou criado uma variavel (var) e atribuir o tipo do gráfico, conforme mostrado neste artigo;
4º - é para determinar a largura (with) e altura (height) em pixel para imagem do gráfico;
5º - é a legenda do gráfico, informe 'ShowLegends', caso não queira mostrar não informar nenhum valor.
Downloads
Efetue o download da estrutura em xml dos itens utilizados neste exemplo, a partir dos links abaixo:
Esqueceu sua senha?
