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

17 respostas
T

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.

17 Respostas

T

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!!!

C

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!!!

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

T
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.

C
thokk:
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.
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 dentro de um mas o erro ainda persiste.

T

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…

C
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...

thokk...o erro ainda persite mesmo retirando o rendered. O método do meu MBean está assim:
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);
		} 
		
	}

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

T

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

C

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

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

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

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

Managed Bean
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;  
    }  
}
JSP :
<%@ 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"%>

<html>  
     <body>
         <h:form id="formChart">
	    <f:verbatim>
	 	<h:panelGroup>
			<h:panelGrid>
				<a:mediaOutput element="img" cacheable="false" 
				     session="true" createContent="#{chartBean.chart}"
			             mimeType="image/jpeg" 
			             style="width: 400px; height: 250px;"/>					 		
			</h:panelGrid>
		</h:panelGroup>	
	    </f:verbatim> 
        </h:form>
  </body>  
</html>

OU

JSP :
<%@ 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"%>

<html>  
     <body>
         <h:form id="formChart">
	    <f:verbatim>
	 	<h:panelGroup>
		      <h:panelGrid>
                             <h:graphicImage url="#{chartBean.chart}"/>
		      </h:panelGrid>
		</h:panelGroup>	
	    </f:verbatim> 
        </h:form>
  </body>  
</html>
tiles-definitions
<tiles-definitions>
	<!-- ### Mecanismo de Grárficos ### -->
	<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.

R

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

T

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.

R

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

Vlwzasso cara!
Abracos

T

Tenta mudar de image/jpeg para image/png.

R

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

Abraçao

R

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

T

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

setObjeto(null);

public Objeto getObjeto(){

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

}
R

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

Criado 9 de julho de 2009
Ultima resposta 23 de jul. de 2010
Respostas 17
Participantes 4