UNIOESTE – Universidade Estadual do Oeste do Paraná
CCET - CENTRO DE CIÊNCIAS EXATAS E TECNOLÓGICAS
Colegiado de Ciência da Computação
Curso de Bacharelado em Ciência da Computação
MANUAL DA GERAÇÃO DE GRÁFICOS
Allysson Chagas Carapeços
André da Silva Queiroz
Cascavel - PR
2010
Allysson Chagas Carapeços
André da Silva Queiroz
MANUAL DA GERAÇÃO DE GRÁFICOS
Trabalho da disciplina de Inteligência Artificial do
curso de Bacharelado em Ciência da
Computação. Centro de Ciências Exatas e
Tecnológicas.
Universidade Estadual do Oeste do Paraná Campus de Cascavel.
Professor: Claudia Brandelero Rizzi
Cascavel - PR
2010
3
MANUAL DA GERAÇÃO DE GRÁFICOS
Este manual tem o objetivo de auxiliar os usuário na criação de gráficos. Durante a
demonstração iremos utilizar o exemplo da URL abaixo. Todos os atributos são divididos pelo
caracter & e todos os dados são separados pelo caracter *.
Exemplo: "/servlet/GeradorGraficos?categorias=Dikstra*A*Busca em
Profundidade&tpo=barra&valX=1*10*20&valY=60*20*32&largura=800&"altura=600&titulo=Grafico
de Desempenho dos Algoritmos&posicaotit=topo&rotuloX=Numero de
acesso&rotuloY=Algoritmos&orient=horizontal&legenda=1&posicaoleg=base”
1.Categorias
Exemplo: “categorias=Dikstra*A*Busca em Profundidade”
Define a(s) categoria(s) do gráfico. Para incluir duas ou mais categorias é necessário utilizar
o * como separador. No exemplo acima definimos três categorias (Dijkstra, A e Busca em
Profundidade) para criação do gráfico.
2.Tipo de Gráfico
Exemplo: “tpo=barra”
Podemos trocar facilmente o tipo do gráfico como mostrado no exemplo acima. Existem 7
tipos diferentes de gráficos possíveis de serem gerados, são eles:
– Gráfico de Barras: barra;
– Gráfico de Barras 3D: barra3d;
– Gráfico de Barras Gradientes: barragrad;
– Gráfico de Pizza: pizza;
– Gráfico de Pizza 3D: pizza3d;
– Gráfico de Pizza Transparente: pizzatransp;
– Gráfico de Pontos: pontos.
3.Valores em X
Exemplo: “valX=1*10*20”
São os valores das categorias respectivamente. No caso do exemplo utilizado os valores
seriam 1 para o Algoritmo Dikstra, 10 para o Algoritmo A e 20 para o Algoritmo Busca em
Profundidade.
4.Valores em Y
Exemplo: “valY=60*20*32”
Tem o mesmo objetivo do Valores em X, porém é utilizado apensa em gráficos de pontos.
5.Largura
Exemplo: “largura=800”
Número de pixels em largura. No exemplo temos um gráfico com 800 pixels de largura.
4
6.Altura
Exemplo: “altura=600”
Número de pixels em altura. No exemplo temos um gráfico com 600 pixels de altura.
7.Título do Gráfico
Exemplo: “titulo=Grafico de Desempenho dos Algoritmos”
Um gráfico bem identificado deve possuir um título. A inserção de um título é feita facilmente
como mostrado no exemplo acima.
8.Posição do Título
Exemplo: “posicaotit=topo”
O título de um gráfico geralmente é encontrado no topo do gráfico, mas também podemos
escolher outras posições.
– Título fixado na parte superior do gráfico: topo;
– Título fixado na parte inferior do gráfico: base;
– Título fixado ao lado esquerdo do gráfico: esquerda;
– Título fixado ao lado direito do gráfico: direita.
9.Rótulo em X
Exemplo: “rotuloX=Numero de acesso”
Para a identificação do eixo X utilizamos o rotuloX. Seu uso é muito simples como mostrado
no exemplo acima.
10.Rótulo em Y
Exemplo: “rotuloY=Algoritmos”
Para a identificação do eixo Y utilizamos o rotuloY. Seu uso é muito simples como mostrado
no exemplo acima.
11.Orientação
Exemplo: “orient=horizontal”
A orientação do gráfico pode ser do tipo horizontal como o exemplo acima ou vertical. No
caso do tipo do gráfico for barra e a orientação especificada for vertical, será gerado um gráfico do
tipo coluna.
12.Legenda
Exemplo: “legenda=1”
É ideal que todo o gráfico tenha uma legenda para melhor identificação dos dados. Neste
campo ativamos/desativamos a visualização da legenda.
13.Posição da Legenda
Exemplo: “posicaoleg=base”
A legenda pode ser definida em quatro posições diferentes:
5
– Legenda fixada na parte superior do gráfico: topo;
– Legenda fixada na parte inferior do gráfico: base;
– Legenda fixada ao lado esquerdo do gráfico: esquerda;
– Legenda fixada ao lado direito do gráfico: direita.
14.Cor de Fundo do Gráfico
Exemplo: “corfundograf=branco”
Para a personificação da cor de fundo do gráfico basta escolher a cor no atributo. O fundo
do gráfico poderá ser formado pelas seguintes cores:
– Seta a cor branca de fundo do gráfico: branco;
– Seta a cor preta de fundo do gráfico: preto;
– Seta a cor azul de fundo do gráfico: azul;
– Seta a cor ciano de fundo do gráfico: ciano;
– Seta a cor cinza escura de fundo do gráfico: cinza_escuro;
– Seta a cor cinza clara de fundo do gráfico: cinza_claro;
– Seta a cor cinza de fundo do gráfico: cinza;
– Seta a cor verde de fundo do gráfico: verde;
– Seta a cor alaranjada de fundo do gráfico: laranja;
– Seta a cor rosa de fundo do gráfico: rosa;
– Seta a cor vermelha de fundo do gráfico: vermelho;
– Seta a cor amarela de fundo do gráfico: amarelo;
Obs.: Se a cor não for escolhida, por padrão é escolhido a cor branca.
15.Cor das Linhas Horizontais da Grade
Exemplo: “corlinhashorizontais=branco”
Para a personificação da cor das linhas horizontais da grade do gráfico basta escolher a cor
no atributo. A grade do gráfico poderá ser formado pelas seguintes cores:
– Seta a cor branca de fundo do gráfico: branco;
– Seta a cor preta de fundo do gráfico: preto;
– Seta a cor azul de fundo do gráfico: azul;
– Seta a cor ciano de fundo do gráfico: ciano;
– Seta a cor cinza escura de fundo do gráfico: cinza_escuro;
– Seta a cor cinza clara de fundo do gráfico: cinza_claro;
– Seta a cor cinza de fundo do gráfico: cinza;
– Seta a cor verde de fundo do gráfico: verde;
– Seta a cor alaranjada de fundo do gráfico: laranja;
– Seta a cor rosa de fundo do gráfico: rosa;
6
– Seta a cor vermelha de fundo do gráfico: vermelho;
– Seta a cor amarela de fundo do gráfico: amarelo;
Obs.: Se a cor não for escolhida, por padrão é escolhido a cor cinza escura.
16.Cor das Linhas Verticais da Grade
Exemplo: “corlinhasverticais=branco”
Para a personificação da cor das linhas verticais da grade do gráfico basta escolher a cor no
atributo. A grade do gráfico poderá ser formado pelas seguintes cores:
– Seta a cor branca de fundo do gráfico: branco;
– Seta a cor preta de fundo do gráfico: preto;
– Seta a cor azul de fundo do gráfico: azul;
– Seta a cor ciano de fundo do gráfico: ciano;
– Seta a cor cinza escura de fundo do gráfico: cinza_escuro;
– Seta a cor cinza clara de fundo do gráfico: cinza_claro;
– Seta a cor cinza de fundo do gráfico: cinza;
– Seta a cor verde de fundo do gráfico: verde;
– Seta a cor alaranjada de fundo do gráfico: laranja;
– Seta a cor rosa de fundo do gráfico: rosa;
– Seta a cor vermelha de fundo do gráfico: vermelho;
– Seta a cor amarela de fundo do gráfico: amarelo;
Obs.: Se a cor não for escolhida, por padrão é escolhido a cor cinza escura.