Recentemente um cliente solicitou uma rotina de geração de gráficos para seu sistema. Então como eu não tinha muita experiência nisso, meu amigo Ricardo ajudou-me enviando um exemplo completíssimo, e este artigo é um pequeno How-To para quem desejar se aventurar pelo TeeChart.

Construindo um Exemplo

Inicie um novo projeto no delphi, e insira o componente TeeChart no formulário principal e dê um clique duplo sobre ele. Na janela de configuração, na guia Chart temos uma sub-guia Series. Clique no Add, e a janela da Figura 1 será apresentada, onde então escolhemos o estilo do gráfico que será utilizado.

 

image001.png 

Figura 1. Tipos de gráficos

 

Ao clicar botão Title  podemos dar um título ao gráfico, veja Figura 2.

 

image003.png 

Figura 2. Entitulando o gráfico

 

Feito isso, vamos configurar a propriedade name do TChart para “SerieVendas”.                                                                            

Melhorando a aparência

Podemos configurar nosso gráfico para que tenha um resultado final bem profissional. Vamos melhorar o espaçamento de suas linhas. Para afastar a Linha com os dados na verticalconfigure a propriedade Position  na paleta Chart, guia Axis/Position, para -1, conforme Figura 3.

                                            

image005.png                                            

Figura 3. Melhorando o espaçamento

 

Além do espaçamento vamos dar um efeito gradiente no Painel do gráfico. Na guia Chart->Panel, temos um groupbox Gradient. Defina as cores que irão compor o gradiente clicando nos botões Start Color e End Color, e marque o checkbox Visible para que suas alterações tenham efeito, veja Figura 4.

 

image007.png 

Figura 4. Definindo um efeito gradiente

 

Para ajustar a largura das bordas que compõem o painel do gráfico temos a propriedade Width, de cada “lado” da borda. Veja Figura 5.

 

image009.png 

Figura 5. Ajustando as bordas do painel

 

Um gráfico pode possuir várias escalas e para distingui-las vamos aplicar uma cor diferente. Vá até  Guia Chart -> Axis, nela estão todas as configurações possíveis para a escala em uso. Para alterar sua cor, clique no botão Font e formate da maneira que desejar, veja Figura 6.

 

image011.png                                            

Figura 6. Formatando uma escala

 

Como todo gráfico, o nosso não seria diferente, portando vamos dar um título a ele. Acesse a guia Chart -> Titles, conforme Figura 7.

 

image013.png 

Figura 7. Formatando o título do gráfico

 

Legendas devem ser utilizadas para facilitar o entendimento do usuário. Podemos indicar o percentual de cada coluna inserindo uma legenda no seu topo. Na guia Series->Marks temos uma propriedade Style, configure-a. Para que seus ajustes tenham efeito marque a opção Visible, veja Figura 8.

 

image015.png 

Figura 8. Definindo o formato das legendas

 

Com nosso gráfico configurado ao nosso gosto, vamos agora  passar valores a ele e ver seu funcionamento. Antes disso, configure o formulário principal conforme Figura 9.

 

image017.png 

Figura 9. Formulário principal

 

Codificando o gráfico

No evento onclik do botão de geração do gráfico vamos adicionar os valores a ele, conforme Listagem 1.

 

Listagem 1. Gerando o gráfico de forma dinâmica

procedure TForm1.BtnGerarGraficoClick(Sender: TObject);

begin

   SerieVendas.Clear;

   SerieVendas.AddY(StrToCurrDef(EditMesJan.Text,0),

     'Janeiro',clNavy);

   SerieVendas.AddY(StrToCurrDef(EditMesFev.Text,0),

     'Fevereiro',clBlue);

   SerieVendas.AddY(StrToCurrDef(EditMesMar.Text,0),

     'Março',clRed);

   SerieVendas.AddY(StrToCurrDef(EditMesAbr.Text,0),

     'Abril',clInfoBk);

   SerieVendas.AddY(StrToCurrDef(EditMesMai.Text,0),

     'Maio',clSilver);

   SerieVendas.AddY(StrToCurrDef(EditMesJun.Text,0),

     'Junho',clGreen);

end;

 

Observe que o método AddY possui 3 parâmetros, sendo eles  o Valor da coluna, o Rótulo da coluna e sua Cor. No evento onclick  do botão que altera o titulo do gráfico temos a Listagem 2.

 

Listagem 2. Alterando as propriedades do gráfico em tempo de execução

procedure TForm1.BtnAlterarTituloGraficoClick(Sender: TObject);

begin

  Chart1.Title.Text.Clear;

  Chart1.Title.Text.Add(InputBox('Titulo do Grafico',

    'Descrição','Gráfico'));

end;

 

Finalmente podemos imprimir nosso gráfico, escolhendo ainda a orientação do papel, conforme Listagem 3.

 

Listagem 3. Imprimindo o gráfico

procedure TForm1.BtnImprirClick(Sender: TObject);

begin

  case RadioGroup1.ItemIndex of

    0: Chart1.PrintLandscape;

    1: Chart1.PrintPortrait;

  end;

end;

Conclusão

Nos sistemas atuais quase sempre existe algum gráfico para mostrar facilitar o entendimento de valores que estão sendo comparados e a versão do TeeChart que acompanha o Delphi é simples, prática e eficiente para atender essa necessidade. Não deixe de visitar o site oficial do componente (www.teechart.com) e visualizar todos os recursos da versão full.

 

Ricardo Scache Belardinuci (ri-taqua@ig.com.br) é analista desenvolvedor formado pela Fatec-Taquaritinga, atualmente trabalha como free-lance na cidade de São Paulo desenvolvendo sistemas cliente-servidor para os mais diversos mercados.