31/01/12

Criando gr ficos legais com pChart 2.0 | Boteco Digital

Home Sobre

Criando gr ficos legais com pChart 2.0

Li e 1 Rodrigo Aramburu 25/11/2011

Publicidade

Uma imagem diz mais que mil palavras, se isso verdade muito discutvel, mas com certeza um grfico facilita bastante a assimilao de uma boa quantidade de dados. Grficos so importantes com certeza(os administradores adoram) e agregam bastante a um sistema. At pouco tempo a nica biblioteca de grficos que eu conhecia utilizava Fla h e era bem complicada de mexer, a Fusion Charts, mas a alguns meses descobri uma biblioteca bem mais interessante a pChart que gera grficos muito bonitos e de forma bem fcil. Ento vamos parar de enrolao e vamos colocar a mo na massa. Primeiro claro vamos baixar o pChart. No zip vem vrios arquivos, muitos de exemplos e etc. S nos interessa as pastas class, que contm as classes PHP propriamente ditas, fontes com fontes diferenciadas para os rtulos dos grficos, e palettes com cores predefinidas. Gr fico em barra 1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5

Categorias

icue"Catcaspaacaspp) nld(phr/ls/Dt.ls.h"; Algoritmos icue"Catcaspmg.ls.h"; nld(phr/ls/Iaecaspp) Android $aa=nwpaa) dteDt(; $aa adonsra(10,30,30,1123 dt dPit(ar 0,20,40,20,0,0,0), BD $aa adonsra("aer","eeer","a","bi" dt dPit(ar JnioFvrioMroArl CSS $aa stbcsa"ee"; dt eAsis(Mss) $aa stxsae0"is) dt eAiNm(,Ht"; Dicas $yitreIae03dt; mPcue=nwpmg(70,20,$aa) $ y i t r d a R c a g e 9 2 r a ( " " 0 , " " 0 , Hardware mPcue rwetnl(0,0,69,29,ar R= G= Internet $yitrstotrprisra("otae="Catfnsp_rafv.t" mPcue eFnPoete(ar FnNm" phr/ot/fam_ietf Java $yitrstrpAe(04,5,0) mPcue eGahra6,06020; Javascript $clStigra("rd" 20,"rd" 20,"rd" 20, saeetns=ar GiR= 0GiG= 0GiB= 0 $yitrdaSae$clStig) mPcue rwcl(saeetns; JQuery $yitrdaLgn(50,1ra("tl" LGN_OODR, mPcue rweed82,ar Sye= EEDNBRE Linux $yitrdaBrhr(; mPcue rwaCat) Navegadores $yitratOtu(brapg) mPcue uoupt'ar.n'; Notcias

Outros
Nas linhas 1 e 2 inclumos os arquivos da classes pData e pImage que iremos utilizar. Na linha 4 instanciamos um objeto pData que o objeto que representa os dados de nosso grfico por ele que adicionaremos os valores no grfico. Na linha 5 adicionamos os valores das barras atravs do mtodo addPoints , os valores so adicionados no 1 parmetro em forma de array e o 2 parmetro o rotulo desta srie de dados, o pChart aceita grficos com vrios sries ou seja vrias barras por intervalo do eixo X. Na linha 6 adicionamos mais valores, mas estes sero os rtulos que estaro no eixo X(iremos configurar isso na linha 9) ento ele deve ter o mesmo n mero de valores no array dos valores das barras. Na linha 8 configuramos a serie Meses como rtulos do eixo X. Na linha 9 definimos o nome do eixo X. Neste momento j definimos os dados do nosso grfico agora devemos construir nossa imagem para isso criamos uma instncia da classe pImage e recebe como parmetro as

PHP Vdeo Video-Tutorial Web Posts Mais Populares

Enviando email com PHPmailer 31 comentrio(s) Introduo ao AJAX com JQuery 28 comentrio(s)

Carregando um ComboBox com AJAX com JQ

www.botecodigital.info/php/criando-graficos-legais-com-pchart-2-0/

1/4

31/01/12

Criando gr ficos legais com pChart 2.0 | Boteco Digital

dimens es da imagem, no caso a imagem ter 700px de largura e 230px de largura, e passamos tambm o nosso objeto que representa os dados do grfico $data. Na linha 12 utilizamos o mtodo drawRectangle para desenhar um retangulo com borda preta ao redor da imagem para delimitar a borda. Na linha 14 definimos a fonte atravs do mtodo setFontProperties repare que para FontName se esta apontando para um arquivo da pasta fonts, se deseja utilizar outra fonte para os rtulos do grfico basta colocar um novo ttf e especificar o caminho neste mtodo, e tambm podemos definir o tamanho da fonte atravs do FontSi e. Na linha 16 utilizamos o mtodo setGraphArea defimos onde nosso grfico ser desenhado na imagem, lembrando a imagem que iremos gerar ter 700230 mas dentro dela que iremos desenha o grfico de barras e devemos informar os pontos x,y inicial e x,y final como se estivssemos desenhado um retngulo. Na linha 18 definimos as propriedades da escala, que sero utilizadas para desenha-la na linha 20 com o mtodo drawScale. A escala a rea que sero desenhadas as barras, os valores GridR, GridG e GridB so os valores de cores das linha que sero desenhadas no fundo e CycleBackground para mostrar as linhas de escala. Na linha 21 desenhamos a legenda do grfico. Na linha 23 utilizamos o mtodo drawBarChart para desenhar o grfico propriamente dito, baseado nas configura es feitas anteriormente. Na linha 25 geramos a imagem do grfico para isso utilizamos autoOutput ela ir gerenciar automaticamente se a imagem deve ser enviada para o navegador ou ser salva. Mas podemos obrigar o grfico ser salvo utilizando o mtodo render. Veja o grfico gerado:

23 comentrio(s) Manipulando datas em Java 5 comentrio(s) Redimensionando imagens com PHP 9 comentrio(s) Menu Sanfona com JQuery 5 comentrio(s)

Lorem Ipsum: texto para preencher layo 1 comentrio(s)

Validando dados com express es regular 1 comentrio(s)

Tags
ajax Algoritmos apache classes

banco de dado
e-mail efeitos

CSS

css3

debian

desenvolvimento
filesystem firefox

fisl fisl10

html Humor imagens Java JQuery kernel layout Linux

OO

palestras

PHP

plugin JQuery

redimensionar imagens senac urugua

simpleXML

software livre

ubuntu

videoaula videotutorial Vdeo

Web

Gr fico em pizza
1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 icue"Catcaspaacaspp) nld(phr/ls/Dt.ls.h"; icue"Catcaspi.ls.h"; nld(phr/ls/Pecaspp) icue"Catcasprwcaspp) nld(phr/ls/Da.ls.h"; icue"Catcaspmg.ls.h"; nld(phr/ls/Iaecaspp) $aa=nwpaa) dteDt(; $aa adonsar (02,0,Paa"; dt dPit(ra 1,03)"lcr) $aa adonsar (A,B,C)"ae"; dt dPit(ra """""",Lbl) $aa stbcsa"ae"; dt eAsis(Lbl) $yitreIae5030$aa; mPcue=nwpmg(0,0,dt) $yitrdaRcage99ra("" 0,"" 0, mPcue rwetnl(0,0,49,29,ar R= G= $yitrstotrprisra("otae="Catfnsvraatf mPcue eFnPoete(ar FnNm" phr/ot/edn.t" $iCat=nwpi(mPcue$aa; PehrePe$yitr,dt) $iCat da3Pe56ra("rwaes=TUBre" Pehr rwDi(10,10,ar DaLbl" RE,"odr $iCat daPeeed50,ar ("tl" LGN_OODR, Pehr rwiLgn(40,5ra Sye= EEDNBRE $yitratOtu(; mPcue uoupt)

Para criar um grfico em pizza utilizamos basicamente os mesmos cdigos para criar o objeto de dados pData e a imagem pImage. Mas necessitamos criar um objeto pPie que nosso grfico em pizza, ele recebe como parmetro do construtor o nosso objeto de imagem e de dados(linha 16). Na linha 17 desenhamos nosso grfico em pizza com o mtodo draw3DPie que recebe os 2 primeiros parmetros so a posio do centro do grfico na imagem. O 3 parmetro

www.botecodigital.info/php/criando-graficos-legais-com-pchart-2-0/

2/4

31/01/12

Criando gr ficos legais com pChart 2.0 | Boteco Digital

um array com as op es do grfico, no caso especificamos que ser mostrado os labels no grfico e que ele ter bordar. Na linha 18 desenhamos a legenda do grfico em pizza. Os dois primeiros parmetros so a posio na imagem e o array contm as op es, no caso, sem bordar e a legenda na horizontal. Veja como o grfico ficou:

Gr fico em linha
1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 icue"Catcaspaacaspp) nld(phr/ls/Dt.ls.h"; icue"Catcasprwcaspp) nld(phr/ls/Da.ls.h"; icue"Catcaspmg.ls.h"; nld(phr/ls/Iaecaspp) $aa=nwpaa) dteDt(; $aa adonsra(10,30,30),"evrA dt dPit(ar 0,20,40,2Sre" $aa adonsra("aer","eeer","a","bi" dt dPit(ar JnioFvrioMroArl $aa stbcsa"ee"; dt eAsis(Mss) $aa stxsae0"is) dt eAiNm(,Ht"; $yitreIae7020$aa; mPcue=nwpmg(0,3,dt) $yitrdaRcage92ra("" 0,"" 0, mPcue rwetnl(0,0,69,29,ar R= G= $yitrstotrprisra("otae="Catfnsp_rafv.t" mPcue eFnPoete(ar FnNm" phr/ot/fam_ietf $yitrstrpAe(04,5,0) mPcue eGahra6,06020; $clStigra("rd" 20,"rd" 20,"rd" 20, saeetns=ar GiR= 0GiG= 0GiB= 0 $yitrdaSae$clStig) mPcue rwcl(saeetns; $yitrdaLgn(50,1ra("tl" LGN_OODR, mPcue rweed82,ar Sye= EEDNBRE $yitrdaLnCat) mPcue rwiehr(; $yitratOtu(; mPcue uoupt)

O grfico em linha praticamente igual ao grfico em barra basta alterar a linha 25 para desenhar com o mtodo drawLineChart. Veja um exemplo do grfico gerado abaixo:

Bom esse o bsico da biblioteca pChart ela muito completa permitindo vrios outros tipos de grficos como Barcode, Bubble chart, Plot chart, Polar and radars, Progress bars, Surface chart. Confira a documentao e os exemplos que vem junto com a biblioteca voc vai se

www.botecodigital.info/php/criando-graficos-legais-com-pchart-2-0/

3/4

31/01/12

Criando gr ficos legais com pChart 2.0 | Boteco Digital

surpreender! Era isso at mais e obrigado pelos peixes!

graficos, imagens, PHP

Posts Relacionados:

Trocando dados utilizando JSON

Font-Face, utilizando fontes al m do bsico!

Menu Sanfona com CakePHP Validando JQuery um formlrio com Model sem Controller

Atualmente existe 1 Coment rio

Boa tarde,
ROBSON SILVA 25/01/2012:

Teria como mostrar um exemplo usando banco de dados? Caso sim, gostaria de ser informado por email.

Obrigado.

Deixe um coment rio

Name (requirido) E-mail (no sera publicado) (requirido) Website

Enviar comentrio

Boteco Digital Todos os direios reservados

www.botecodigital.info/php/criando-graficos-legais-com-pchart-2-0/

4/4