Criação de Gráficos com jFreeChart e JSF + richFaces [Concluído]

thokk · Julho 9, 2009, 9:01am

Pessoal, bom dia;

Gostaria de saber se alguém tem algum exemplo de jFreeChart com JSF e que pudesse me passar ou coisa do tipo, me explicar. Estou tendo dificuldades de chamar o gráfico.

thokk · Julho 9, 2009, 1:56pm

Pessoal consegui usar o jFreeChart, é tipo vc cria o gráfico nomalmente e depois vc cria um array de byte pra poder jogar no campo aJax4JSF a:mediaOutput. Ele recebe o value da imagem, mas vc tem que passar um OutputStream e um object.

Bacana demais!!!

ClodoaldoJR · Julho 9, 2009, 5:23pm

[quote=thokk]Pessoal consegui usar o jFreeChart, é tipo vc cria o gráfico nomalmente e depois vc cria um array de byte pra poder jogar no campo aJax4JSF a:mediaOutput. Ele recebe o value da imagem, mas vc tem que passar um OutputStream e um object.

Bacana demais!!![/quote]

Cara…estou com a mesma dúvida. Você poderia postar o trecho de código com a sulução adotada?
Grato desde já!!!

thokk · Julho 10, 2009, 1:51pm

public void chart(OutputStream out, Object data) throws IOException {
		BufferedImage result = createChart();
		result.flush();  
		ImageIO.write(result, "JPG", out);
	}

	public static BufferedImage createChart() {
		BufferedImage buf = null;
		//Pizza o gráfico
		/*DefaultPieDataset dataset = new DefaultPieDataset();
		dataset.setValue("Red Hat", new Integer(33));
		dataset.setValue("Debian", new Integer(33));
		dataset.setValue("Suse", new Integer(33));
		JFreeChart chart = ChartFactory.createPieChart(
				"Linux Market Share - Room for everyone!", dataset, true, true,
				true);*/
		//Este daqui é o de Barras
		/*final StatisticalCategoryDataset dataset = createDataset();

        final CategoryAxis x = new CategoryAxis("Type");
        x.setLowerMargin(0.01d); // percentage of space before first bar
        x.setUpperMargin(0.01d); // percentage of space after last bar
        x.setCategoryMargin(0.05d); // percentage of space between categories
        final ValueAxis y = new NumberAxis("Value");

        // define the plot
        final CategoryItemRenderer renderer = new StatisticalBarRenderer();
        final CategoryPlot plot = new CategoryPlot(dataset, x, y, renderer);
        final JFreeChart chart = new JFreeChart("Statistical Bar Chart Demo",
        		JFreeChart.DEFAULT_TITLE_FONT,
                plot,
                true);*/
		//Gráfioc de Barras 3d + marker
		DefaultCategoryDataset dataset = createDataset();
		JFreeChart chart = ChartFactory.createBarChart3D
		    ("Comparison between Students","Students", "Marks", 
		    dataset, PlotOrientation.VERTICAL, true,true, false);
	     //Teste da grade
		 CategoryPlot cp = chart.getCategoryPlot();  
		 NumberAxis rangeAxis = (NumberAxis) cp.getRangeAxis();   
		 rangeAxis.setUpperMargin(0.15);   
		 cp.setBackgroundPaint(Color.lightGray);   
		 cp.setDomainGridlinePaint(Color.black);   
		 cp.setDomainGridlinesVisible(true);   
		 cp.setRangeGridlinePaint(Color.white);   
		 Marker marker = new ValueMarker(5.0);   
		 marker.setLabel("text on the line");  
		 marker.setLabelFont(new Font("SansSerif", Font.ITALIC, 11));  
		 marker.setLabelAnchor(RectangleAnchor.LEFT);  
		 marker.setLabelTextAnchor(TextAnchor.CENTER_LEFT);  
		 marker.setPaint(Color.red);    
		 cp.addRangeMarker(marker);
		 //fim de teste
		 int colorCode = 0x00FFFFFF;
		 chart.setBackgroundPaint(new Color(colorCode));
		 chart.getTitle().setPaint(Color.black); 
		 CategoryPlot p = chart.getCategoryPlot(); 
		 p.setRangeGridlinePaint(Color.black);
	     //Aqui é codigo antigo
		 chart.setBorderVisible(true);
		 chart.setBorderPaint(Color.black);
		 buf = chart.createBufferedImage(300, 300);
		 return buf;
	}
	
	private static DefaultCategoryDataset createDataset() {
        final DefaultCategoryDataset result = new DefaultCategoryDataset();
        result.addValue(10.0, "IBM", "2006");
        return result;
    }

e o JSF

<a:mediaOutput element="img" cacheable="false" session="true"
  	createContent="#{graficoMB.chart}"
  	mimeType="image/jpeg" style="width: 300px; height: 300px;"/>

Aqui o ajax4JSF tem que estar dentro do a:form ok. Acho que isso pode te ajudar.

ClodoaldoJR · Julho 10, 2009, 6:08pm

[quote=thokk][code]
public void chart(OutputStream out, Object data) throws IOException {
BufferedImage result = createChart();
result.flush();
ImageIO.write(result, “JPG”, out);
}

public static BufferedImage createChart() {
	BufferedImage buf = null;
	//Pizza o gráfico
	/*DefaultPieDataset dataset = new DefaultPieDataset();
	dataset.setValue("Red Hat", new Integer(33));
	dataset.setValue("Debian", new Integer(33));
	dataset.setValue("Suse", new Integer(33));
	JFreeChart chart = ChartFactory.createPieChart(
			"Linux Market Share - Room for everyone!", dataset, true, true,
			true);*/
	//Este daqui é o de Barras
	/*final StatisticalCategoryDataset dataset = createDataset();

    final CategoryAxis x = new CategoryAxis("Type");
    x.setLowerMargin(0.01d); // percentage of space before first bar
    x.setUpperMargin(0.01d); // percentage of space after last bar
    x.setCategoryMargin(0.05d); // percentage of space between categories
    final ValueAxis y = new NumberAxis("Value");

    // define the plot
    final CategoryItemRenderer renderer = new StatisticalBarRenderer();
    final CategoryPlot plot = new CategoryPlot(dataset, x, y, renderer);
    final JFreeChart chart = new JFreeChart("Statistical Bar Chart Demo",
    		JFreeChart.DEFAULT_TITLE_FONT,
            plot,
            true);*/
	//Gráfioc de Barras 3d + marker
	DefaultCategoryDataset dataset = createDataset();
	JFreeChart chart = ChartFactory.createBarChart3D
	    ("Comparison between Students","Students", "Marks", 
	    dataset, PlotOrientation.VERTICAL, true,true, false);
     //Teste da grade
	 CategoryPlot cp = chart.getCategoryPlot();  
	 NumberAxis rangeAxis = (NumberAxis) cp.getRangeAxis();   
	 rangeAxis.setUpperMargin(0.15);   
	 cp.setBackgroundPaint(Color.lightGray);   
	 cp.setDomainGridlinePaint(Color.black);   
	 cp.setDomainGridlinesVisible(true);   
	 cp.setRangeGridlinePaint(Color.white);   
	 Marker marker = new ValueMarker(5.0);   
	 marker.setLabel("text on the line");  
	 marker.setLabelFont(new Font("SansSerif", Font.ITALIC, 11));  
	 marker.setLabelAnchor(RectangleAnchor.LEFT);  
	 marker.setLabelTextAnchor(TextAnchor.CENTER_LEFT);  
	 marker.setPaint(Color.red);    
	 cp.addRangeMarker(marker);
	 //fim de teste
	 int colorCode = 0x00FFFFFF;
	 chart.setBackgroundPaint(new Color(colorCode));
	 chart.getTitle().setPaint(Color.black); 
	 CategoryPlot p = chart.getCategoryPlot(); 
	 p.setRangeGridlinePaint(Color.black);
     //Aqui é codigo antigo
	 chart.setBorderVisible(true);
	 chart.setBorderPaint(Color.black);
	 buf = chart.createBufferedImage(300, 300);
	 return buf;
}

private static DefaultCategoryDataset createDataset() {
    final DefaultCategoryDataset result = new DefaultCategoryDataset();
    result.addValue(10.0, "IBM", "2006");
    return result;
}

[/code]

e o JSF

<a:mediaOutput element="img" cacheable="false" session="true"
  	createContent="#{graficoMB.chart}"
  	mimeType="image/jpeg" style="width: 300px; height: 300px;"/>

Aqui o ajax4JSF tem que estar dentro do a:form ok. Acho que isso pode te ajudar.[/quote]

Obrigado pela ajuda tokk. Eu copiei seu método que constrói o gráfico para o meu bean mas quando o método é chamada pela página para exibir a imagem a mesma não é exibida (surge na tela o icone com um “x” indicando que a imagem não pôde ser carregada).
Segue a página que exibe o gráfico:

<h:panelGroup id="panelGroupDeVisao" rendered="#{chartGeneratorBean.viewing}"> <f:subview id="viewVisao"> <table class="tabela"> <tr> <td class="tdCor" width="15%"><h:outputText value="#{bundle.lbl_description}" /></td> <td class="tdBranco" width="85%"><h:outputText value="#{chartGeneratorBean.entity.description}" /> </td> </tr> <tr align="center"> <a4j:mediaOutput element="img" cacheable="false" session="true" createContent="#{chartGeneratorBean.showChart}" mimeType="image/jpeg"/> </tr> </table> </f:subview> </h:panelGroup>

O método showChart é uma cópia do seu. Já tente por o <h:panelGroup> dentro de um a4j:form mas o erro ainda persiste.

thokk · Julho 12, 2009, 5:17pm

Tenta tirar o rendered do panelgroup, pois a chamada tem que ser apenas no mediaoutput. Pois ele vai receber a imagem que e gerada pelo metodo que BufferedImage entao ele tem que pegar o resultado do metodo que recebe o grafico e converte ele para imagem. Tenta isso, caso retorne o erro, posta o codigo do seu MB.

Vlws…

ClodoaldoJR · Julho 13, 2009, 1:49pm

[quote=thokk]Tenta tirar o rendered do panelgroup, pois a chamada tem que ser apenas no mediaoutput. Pois ele vai receber a imagem que e gerada pelo metodo que BufferedImage entao ele tem que pegar o resultado do metodo que recebe o grafico e converte ele para imagem. Tenta isso, caso retorne o erro, posta o codigo do seu MB.

Vlws…[/quote]

thokk…o erro ainda persite mesmo retirando o rendered. O método do meu MBean está assim:

[code]
public void showChart(OutputStream out, Object data) throws IOException
{
JFreeChart chart = null;

	JSFUtil jsfUtil = new JSFUtil();
	this.setEntity((ChartVo)jsfUtil.getSession().getAttribute("chartVo"));

	try
	{
		if(this.getEntity() != null) 
		{
			ChartVo chartVo = this.getEntity();
			
			//verifica de acordo com o tipo de gráfico qual classe de negócio deve ser chamada.
			int type = chartVo.getType().getValor();
			
			if(type == Constants.PIE_TYPE_CHART)
			{
				PieChartNgc pieChartNgc =  PieChartNgc.getInstance();
				
				PieChartVo pieChartVo = new PieChartVo();
				pieChartVo.setId(chartVo.getId());
				
				List<PieChartVo> search = pieChartNgc.search(pieChartVo, 0);
				
				chart = pieChartNgc.generateChart(search.get(0));

			}	
		}			
		//ByteArrayOutputStream baos = new ByteArrayOutputStream();
		
		BufferedImage image = chart.createBufferedImage(500, 375, BufferedImage.TYPE_INT_RGB, null);
		ImageIO.write(image, "jpeg", out);
		
	}
	catch(R3AException e)
	{
		 FacesMessage message = new FacesMessage(e.getMensagem());  
         message.setSeverity(FacesMessage.SEVERITY_ERROR);  
         FacesContext.getCurrentInstance().addMessage("", message);
	} 
	
}  [/code]

O método pieChartNgc.generateChart me retorna um objeto do tipo chart.

thokk · Julho 14, 2009, 8:59am

image.flush(); coloca isso acho que deve ser preciso ter isso depois do seu bufferImage.

ClodoaldoJR · Julho 15, 2009, 5:34pm

Cara já tentei fazer isso também mas não funcionou. Como estou com urgência e não consegui usar a tag, fiz usando a tag graphicImage mesmo.
De qualquer forma muito obrigado pela ajuda

[]'s

William_Alves · Junho 2, 2010, 1:37pm

Cara já tentei fazer isso também mas não funcionou. Como estou com urgência e não consegui usar a tag, fiz usando a tag graphicImage mesmo.
De qualquer forma muito obrigado pela ajuda

[]'s[/quote]

Estou com um problema bem parecido, como você usou a tag <h:graphicImage/> ao invez da a4j:mediaOutput/.
Eu tento usar a tag a4j mas não renderiza a imagem, se alguém tiver alguma dica…

Managed Bean

[code]import java.awt.Color;
import java.awt.image.BufferedImage;
import java.io.OutputStream;

import javax.imageio.ImageIO;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.data.general.DefaultPieDataset;

public class ChartBean {

public void chart(OutputStream out, Object data) throws Exception {  
  BufferedImage pageImage = gerarGraficoPie();  
  pageImage.flush();
  ImageIO.write(pageImage, "jpeg", out);  
}  

public static BufferedImage gerarGraficoPie() throws Exception {  
  BufferedImage buf = null;  

  try {  
	  DefaultPieDataset ds = new DefaultPieDataset();
		ds.setValue("Norte", 13000000);
		ds.setValue("Nordeste", 48000000);
		ds.setValue("Centro-Oeste", 11000000);
		ds.setValue("Sudeste", 73000000);
		ds.setValue("Sul", 25500000);
		
		JFreeChart chart = 
			ChartFactory.createPieChart("População Nacional", ds, true, false, false);// create your chart
			chart.setBackgroundPaint(Color.white);  
			chart.setBorderVisible(true);  
			chart.setBorderPaint(Color.gray);  

		buf = chart.createBufferedImage(400,250,BufferedImage.TYPE_INT_RGB, null); 
		buf.flush();
    } catch (Exception e) {  
    	throw new Exception(e);    		  
    }  
    
    return buf;  
}

}[/code]

JSP : a4j:mediaOutput/

[code]<%@ page language=“java” contentType=“text/html;charset=UTF-8” pageEncoding=“UTF-8”%>

<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f”%>
<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h”%>
<%@ taglib uri=“http://richfaces.org/a4j” prefix=“a”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>

[/code]

OU

JSP :<h:graphicImage/>

[code]<%@ page language=“java” contentType=“text/html;charset=UTF-8” pageEncoding=“UTF-8”%>

<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f”%>
<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>

[/code]

tiles-definitions

<tiles-definitions>  <definition name="/charts.tiles"> <put name="body" value="/content/exemple/componentesApresentacao/charts/charts.jsp" /> </definition> </tiles-definitions>

faces-navigation-config.xml

<faces-config> <navigation-rule> <navigation-case> <from-outcome>charts</from-outcome> <to-view-id>/charts.tiles</to-view-id> </navigation-case> </navigation-rule> </faces-config>

faces-managedbean-config.xml

<faces-config> <managed-bean> <managed-bean-name>chartBean</managed-bean-name> <managed-bean-class>br.com.exemple.view.bean.ChartBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config>

Preciso de ajuda…

Abraços.

RenZasso · Julho 16, 2010, 4:17pm

Ola pessoal!

Belezinha? Pessoal, tambem estou tentando imprimir pequenos graficos feitos em JSF dentro de uma rich:datatable. Porem, neste exemplo citado acima voces estao chamando o metodo createContent="#{dialChart.chart}" dentro do a4j:mediaOutput, mas este metodo deve receber alguns parametros certo? que parametros sao esses? Como passo esses parametros?

Grato desde ja

thokk · Julho 16, 2010, 4:36pm

Tente colocar apenas isso dentro do seu dataTable:


<a:mediaOutput element="img" cacheable="false" session="true"  
     createContent="#{graficoMB.chart}"  
     mimeType="image/jpeg" style="width: 300px; height: 300px;"/>

O gráfico vai ter o perfeito funcionamento.

RenZasso · Julho 16, 2010, 5:16pm

Salve thokk! Show de bola cara! pegou que eh uma beleza! Nao sei porque mas o grafico esta saindo avermelhado, tem nocao o que pode ser?

Vlwzasso cara!
Abracos

thokk · Julho 16, 2010, 5:55pm

Tenta mudar de image/jpeg para image/png.

RenZasso · Julho 16, 2010, 6:16pm

Fala thokk! Cara mais uma vez SHOW! foi pimba! Vlwzasso pela dica parceiro!

Abraçao

RenZasso · Julho 23, 2010, 12:13pm

Fala thokk! Belezura parceiro? Cara to enfretando outro pepino agora. Tipo, quando gero a imagem pela primeira vez na minha pagina ta blz! mas dai cara quando eu atualizo a pagina e tento gerar outro grafico, aparece o mesmo grafico de antes e nao modifica os valores. Tem nocao o que pode ser cara?

Abracao

thokk · Julho 23, 2010, 1:40pm

Provavel de vc ter que matar o seu objeto e criar um novo.

[code]setObjeto(null);

public Objeto getObjeto(){

    if(objeto == null){
         objeto = new Objeto();
    }

}[/code]

RenZasso · Julho 23, 2010, 7:52pm

Que objeto seria esse thokk? Ta acontecendo o seguinte,apos eu atualizar a pagina, a pagina renderiza o grafico porem o mesmo de antes, ela nem acessa o metodo que desenha o grafico! To gerando uma imagem png.

Desde ja grato

system · Dezembro 30, 2015, 1:09am

Criação de Gráficos com jFreeChart e JSF + richFaces [Concluído]

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI