Charts

[jknotzke]

Hi,

I am looking to create several HTML charts.. That is graphs displayed inside the browser.

What are my options with seam and are there any code examples ?

Thanks

J

[engelme]

I use JFreeCharts. Here is an example of what i do. The code is a little rough but gives the general idea.

package example.chartprocesser;

@Name("chartprocesser")
public class ChartProcesserBean implements {

 @In
 EntityManager em; // Entity Manager to access the database

 byte[] chart; // chart image (.png) as a byte array


 @Factory(value="chart")
 public void createChart() {

 DefaultCategoryDataset ds = this.getData;


 JFreeChart chart = ChartFactory.createLineChart(
 "TITLE",
 "Category Label",
 "Axis Lable",
 ds,
 PlotOrientation.HORIZONTAL,
 false,
 false,
 false
 );

 try{
 this.chart = ChartUtilities.encodeAsPNG(chart.createBufferedImage(400, 400));
 } catch (IOException e){
 e.printStackTrace();
 }

 }

 private DefaultCategoryDataset getData(){
 //get the data and put into DefaultCategoryDataset
 //Then return it.
 }
}

Then in the display page.

<s:graphicImage value="#{chartprocesser.chart}" />

Take a look at the <s:graphicImage/> tag and the JFree docs for more on creating charts.

If you put this in a SFSB then you might want to put something to clear the
chart before the method is run again, especially if the chart can change between renderings.

I usually use this in a stateless bean that does all of the processing for the page to be rendered. Then once rendered, the SLSB is destroyed (I hope) when the page is refreshed the SLSB gets recreated and the chart is rendered anew. No messing with storing images to the disk.

Hope this makes sense.

Micheal

[engelme]

Just a quick correction. I use a pojo or SLSB that is scoped to the ScopeType.EVENT.

Michael

[jknotzke]

That is freaking fantastic! Thanks!!

J

[jknotzke]

Oh, and before I forget, what does the class implement ?

J

[engelme]

Sorry about that. If you make it a pojo then nothing. This was from a SLSB, i forget the local interface name of ChartProcesser.

Michael

[norman.richards]

Have a look at the html chart page in the itext demo. It only does a couple types of charts, but it works pretty well.

[jknotzke]

Michael,

I've been trying now for the past several hours and no luck..

This is more a basic SEAM question I think but what calls createChart?

Thanks

J

[jknotzke]

Here's my code:

chartProcessor.xhtml

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
 template="layout/template.xhtml">

<ui:define name="body">

 <h:messages globalOnly="true" styleClass="message"/>

 <h:form id="chartProcessorForm">

 <rich:panel>
 <f:facet name="header">chartProcessor</f:facet>

 <s:decorate id="nameDecoration" template="layout/edit.xhtml">
 <s:graphicImage value="#{chartprocesserHome.chart}" />
 </s:decorate>

 <div style="clear:both"/>

 </rich:panel>

 <div class="actionButtons">
 <h:commandButton id="save"
 value="Save"
 action="#{chartProcessorHome.persist}"
 rendered="#{!chartProcessorHome.managed}"/>
 <h:commandButton id="update"
 value="Save"
 action="#{chartProcessorHome.update}"
 rendered="#{chartProcessorHome.managed}"/>
 <h:commandButton id="delete"
 value="Delete"
 action="#{chartProcessorHome.remove}"
 rendered="#{chartProcessorHome.managed}"/>
 <s:button propagation="end"
 id="done"
 value="Done"
 view="/chartProcessorList.xhtml"/>
 </div>

 </h:form>

</ui:define>

</ui:composition>

And ChartProcessor.java

package com.techsolcom.powermanager;

import java.io.IOException;
import java.io.Serializable;

import javax.persistence.Entity;
import javax.persistence.EntityManager;

import org.jboss.seam.annotations.Factory;
import org.jboss.seam.annotations.In;
import javax.persistence.Id;
import org.jboss.seam.annotations.Name;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.data.xy.XYSeries;
import org.jfree.data.xy.XYSeriesCollection;
import org.hibernate.validator.NotNull;

@Entity
public class ChartProcessor implements Serializable
{
 byte[] chart;

 @Factory("chart")
 public void createChart()
 {

 System.out.println("Trying to create a FREAKING CHART!!");

 XYSeries series = new XYSeries("XYGraph");
 series.add(1, 1);
 series.add(1, 2);
 series.add(2, 1);
 series.add(3, 9);
 series.add(4, 10);
 // Add the series to your data set
 XYSeriesCollection dataset = new XYSeriesCollection();
 dataset.addSeries(series);
 // Generate the graph
 JFreeChart chart = ChartFactory.createXYLineChart("XY Chart", // Title
 "x-axis", // x-axis Label
 "y-axis", // y-axis Label
 dataset, // Dataset
 PlotOrientation.VERTICAL, // Plot Orientation
 true, // Show Legend
 true, // Use tooltips
 false // Configure chart to generate URLs?
 );

 try{
 this.chart = ChartUtilities.encodeAsPNG(chart.createBufferedImage(400, 400));
 } catch (IOException e){
 e.printStackTrace();
 }

 }
}

All I get is a little graphic icon.. No exception.. Oh, and " System.out.println("Trying to create a FREAKING CHART!!");" never gets executed.. at least not that I can see.

Thanks
J

[pmuir]

Please note Seam2 has chart support built in.

[jknotzke]

Thanks.. that's what I ended up doing.. The swap was a PITA though but it's all working..

J

[engelme]

jknotxke,

Sorry it took so long, been a nightmare with deadlines. Looking over your code, the only problem that i saw the following:

#{chartprocesserHome}

Should be:

#{chartProcessorHome}

I understand that you went with the built in charting for Seam. Though it seems like it might be a good solution ( i haven't really had time to check it out). I like the versitility that JFreeCharts gives me for customization and various chart types.

Well thats it for my two cents. Take care.

Michael

[supernovasoftware.com]

I have seen charts integrated in PDF, but how is this integrated now within HTML pages?

Please point me to an example or provide assistance.

I now have Trinidad, Richfaces, and Tomahawk playing nicely together. I need charting support and started to evaluate the chart component in Trinidad. I have used JFreeChart with seam before, but I used a servlet to provide the image.

Could someone please comment on Trinidad Chart Component vs JFreeChart integrated with Seam for HTML pages?

[pmuir]

Take a look at the itext example in CVS (perhaps beta2 as well)

[norman.richards]

I haven't used it, but the trinidad component looks like it supports more chart types.