Inicial > Java, JSF 2.0, PRIMEFACES > Gráficos com JSF 2 e Primefaces – Torta

Gráficos com JSF 2 e Primefaces – Torta


Olá pessoal, tudo bem?

Espero que me perdoem a demora em postar novo material, mas estou com alguns projetos em adamento e ando um pouco sem tempo.

Neste novo post daremos início a uma série onde mostrarei como criar alguns tipos de gráficos com Primefaces. Como pontapé inicial veremos a criação de um gráfico de torta onde mostraremos a probabilidade de título do Camp. Brasileiro.

Utilizaremos em nosso projeto exemplo:

– Netbeans 7.0.1
– Primefaces 3.0M3

Obs.: Com primefaces, não há a necessidade de adicionar nenhuma lib para a criação de gráficos, a não ser, que você deseje interagir com o JFreeChart.

Para começar crie um projeto, no nosso caso ExGraficoTorta. Neste projeto construa uma estrutura de pacotes conforme exibido abaixo:

Criamos uma classe Time, outra TimeDAO e um managedbean GraficoBean. Todas estas classes serão detalhadas mais abaixo:

Veja a classe Time.java


public class Time {

    private long id;
    private String nomeTime;
    private double probabilidade;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getNomeTime() {
        return nomeTime;
    }

    public void setNomeTime(String nomeTime) {
        this.nomeTime = nomeTime;
    }

    public double getProbabilidade() {
        return probabilidade;
    }

    public void setProbabilidade(double probabilidade) {
        this.probabilidade = probabilidade;
    }
}

Utilizaremos este modelo para, através do DAO, buscar os dados que desejamos exibir no gráfico de torta. Vamos agora ver como ficará o managedbean utilizado para gerenciar a página. Abaixo confira o código:

@ManagedBean
public class GraficoBean implements Serializable {

    private PieChartModel modelo;

    public GraficoBean() {
        criarModeloGrafico();
    }

    public PieChartModel getModelo() {
        return modelo;
    }

    public void setModelo(PieChartModel modelo) {
        this.modelo = modelo;
    }

    private void criarModeloGrafico() {
        modelo = new PieChartModel();
        List<time> listaTime = new ArrayList<time>();
 TimeDAO timeDAo = new TimeDAO();
 listaTime = timeDAo.listaTodos();
 for (Time time : listaTime) {
 modelo.set(time.getNomeTime(), time.getProbabilidade());
 }
 }
}

Declaramos um objeto do tipo PieChartModel para espelhar o modelod o gráfico de torta que usaremos na nossa página. Como este é um exemplo simples e prático, decidi simplesmente criar um método para preencher o modelo e chamá-lo no construtor. Provavelmente, em suas apps, você deverá invocar o método através de uma action de um botão, menuitem, etc.

Confira abaixo um pouco sobre os principais atributos da tag pieChart

 Nome

Valor Padão

Tipo

Descrição

id

null

String

Identificador único

rendered

TRUE

Boolean

Indica que o componente deve ou não ser renderizado na tela

binding

null

Object

Uma expression language que faz o mapeamento do componente com um objeto UICOmponente localizado no backingbean.

value

null

Collection

É o modelo do gráfico

diameter

null

Integer

Tamanho do diâmetro da torta.

legendPosition

null

Object

Campo que indica a posição da legenda. Coloque as siglas dos pontos cardeais em inglês. Ex.: w, ne, n, etc.

style

null

String

Define o estilo do painel do gráfico, tamanho, tamanho de fonte, etc.

seriesStyle

null

String

Cores dos items. Coloque as cores em formato RGB sem o #.

Não explicarei todos os atributos, até porque você não os utilizará, mas em caso de dúvida post um comentário. Segue o código da nossa página que exibirá o gráfico:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Gráficos com JSF 2.0</title>
    </h:head>
    <h:body>
        <p:pieChart value="#{graficoBean.modelo}"
                    legendPosition="w"
                    title="Probabilidade de Título - Brasileirão 2011"
                    style="width:800px;height:600px;"/>
    </h:body>
</html>

Veja na imagem abaixo como ficou:
Gráfico de Torta

É isso ai, bem simples, qualquer dúvida coloca um comentário. Valeu!

  1. 25/03/2012 às 17:58

    Estou desenvolvendo um trabalho de conclusão de curso (tcc),
    do curso superior de Análise e densenvolvimento de Sistema do IFRR (Roraima).
    Meu projeto é um progrma java web usando primefaces com PHOTOCAM, não conseguir implementar o FotoDAO e EventoDao peço a você que envias este dos arquivos.
    Fábio, Boa Vista – Roraima,
    Agradeço !!!

  2. Pablo
    02/04/2012 às 14:31

    Cara, muito bom teu post. Como o Fábio também estou desenvolvendo um tcc, meu gráfico pega dados do banco e eu me baseio nos seguintes dados: data da reuniao e quantidade de presentes, até ae tudo bem, mas o problema é que minha data vem no formato americano, vc sabe como posso modificar para que o primefaces mostre ela no formato pt-BR?

  3. 12/09/2012 às 02:46

    oNDE TEM OS FONTES PARA DOWNLOAD ? NAO CONSEGUIR FAZER RODAR AQUI..

  4. 11/12/2012 às 12:34

    Só faltou a classe DAO

  5. 23/06/2015 às 09:37

    Bom dia! estou implementando um projeto semelhante, onde tenho que exportar o gráfico como imagem(png). Consegui, porém quando clico em algum valor na legenda, o que insere uma tarja na nomenclatura da legenda e oculta o valor no gráfico, e uso o botão exportar a imagem oculta aprece “disforme”(em outra posição) na imagem exportada ao invés de só levar a imagem da tela(com o item oculto). Utilizei a function, como recomenda o primefaces:

    function exportChart() {
    //export image
    $(‘#output’).empty().append(PF(‘grafico’).exportAsImage());
    //show the dialog
    PF(‘dlg’).show();
    }

    Teria alguma dica para exportar corretamente a imagem?

  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: