JFreeChart & GWT Example

1,007 views
Skip to first unread message

marcin

unread,
Mar 10, 2008, 4:31:22 PM3/10/08
to Google Web Toolkit
Hello,

i have tried to display/store a chart created by the JFreeChart
library, but i don't get it. I have also read the tutorial (
http://www.jfree.org/phpBB2/viewtopic.php?t=19080 ) but that doesn't
work for me.
The application makes a call to the server, JChart makes the chart and
so on. There are neither Java-Compiling errors nor GWT-Compiling
errors.
But in case i run the application there is always a broken image-link.
When i try to change the URL in the Image-class the GWT-Compiler says
there is no file, so it must be the right URL, but i do not understand
why i always get a broken Link instead of the image.

I have searched after the chartName on my computer and i found this
file in a windows-temp folder with the right chart-image.

I really don't know what to do. Maybe someone can give me a working
example to get the idea. This would be great!

Greetings,
Marcin

Sebastien

unread,
Mar 11, 2008, 12:42:27 AM3/11/08
to Google Web Toolkit
Hi,

When I used JFreeChart, it is used on the server side only thanks to a
servlet. The servlet produces an image encoded in a byte output sream.
The client side only calls the right url to get the image. To use
JFreeChart with GWT you could do this :

1/ On server side, write a Servlet which retrieves the binary image :
package foo.bar;
public class ChartBuilderServlet extends HttpServlet {
public void init() throws ServletException {
super.init();
//initialize here EJB homes if you have ones
}
protected void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
// Sets the content type.
res.setContentType("image/png");
// Gets the binary output stream on which the encoded bytes will be
sent
// back to the client browser.
ServletOutputStream out = res.getOutputStream();
encodeChartAsPNG(req, out);
// Closes the servlet output stream.
out.close();
}
public void encodeChartAsPNG(HttpServletRequest req, OutputStream
out) throws IOException {
byte[] bits;
GenericGraph graph = getChart(req);
if (graph == null) {
return;
}
int chartWidth = ... ; //TODO: extract chart width from request
parameters
int chartHeight = ... ; //TODO: extract chart height from request
parameters
graph.setOffScreenGraphEnabled(true);
graph.setSize(chartWidth, chartHeight);
graph.setBufferedImageEnabled(true, BufferedImage.TYPE_INT_ARGB);
graph.setLocale(Locale.getDefault());
graph.setRightMargin(2);
graph.setLeftMargin(2);
Java2Adapter ja = new Java2Adapter(graph);
ja.setAntiAliasEnabled(true);
BufferedImage bi = new BufferedImage(chartWidth, chartHeight,
BufferedImage.TYPE_INT_ARGB);
Graphics2D g = bi.createGraphics();

g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
graph.paint(g);
ByteArrayOutputStream bout = new ByteArrayOutputStream();
ImageEncodeParam iep = PNGEncodeParam.getDefaultEncodeParam(bi);
ImageEncoder encoder = ImageCodec.createImageEncoder ("PNG", bout,
iep);
encoder.encode(bi);
bits = bout.toByteArray();
out.write(bits);
}
public GenericGraph getChart(HttpServletRequest req) {
GenericGraph graph = ....;

//TODO: here define you JFreeChart
//if required you have access to the request parameters and the
HttpSession.

return graph;
}
}


2/ You have to declare this servlet in the web.xml :
<servlet>
<servlet-name>CharTest</servlet-name>
<servlet-class>foo.bar.ChartBuilderServlet</servlet-class>
</servlet>
...
<servlet-mapping>
<servlet-name>CharTest</servlet-name>
<url-pattern>/myChartBuilderServlet</url-pattern>
</servlet-mapping>


3/ Package the servlet in your war archive.
Do no forget to include jfreechart libraries and to declare these
libraries in the classpath field of the manifest.


4/ deploy you war achive on your favorite web container (ex Tomcat)
Now you can test a call to the servlet with your favorite browser.
Open the url 'http://myhost/myChartBuilderServlet'.
Of course if your servlet requires parameter, add them to the url :
http://myhost/myChartBuilderServlet?param1=value1&param2=value2
When the image is right, go to the next step: the client side.
To setup chart with JFreeChart I built a small swing application
(JFrame) in order to avoid web deployement at each compilation. It
saved me lot of time.


5/ On client side use the url of the servlet in Image widget :
final Image image = new Image();
image.setUrl("http://myhost/myChartBuilderServlet?
param1=value1&param2=value2");
Add the widget to your panel.

Note: I used JFreeChart during one year, but since few months I am
using FusionChart ($). It produces more beautiful charts and permits
user interactions (see values with the mouse, rotate ...). In the case
of FusionChart, the server side produces xml data corresponding to the
chart definition. The url of the servlet is given to the flash
animation as parameter.

Hoping this some tips will help you and the community.

Regards,
Seb

On 10 mar, 21:31, marcin <marcin.skirzyn...@googlemail.com> wrote:
> Hello,
>
> i have tried to display/store a chart created by the JFreeChart
> library, but i don't get it. I have also read the tutorial (http://www.jfree.org/phpBB2/viewtopic.php?t=19080) but that doesn't

marcin

unread,
Mar 12, 2008, 12:11:39 PM3/12/08
to Google Web Toolkit
Hey Sebastien,

Wow... thanks for spending your time to post this tutorial. I will
give it a try! Unfortunately i have no experience with JSP/Servlets-
stuff, so i have to work in myself. This could take some time, so i
will ask some questions later. OK, there is the first question ;-) :
So i have to put in the data as parameters in the servlet-URL? Isn't
this very inconvenient? What if you have a lot of data to create a
chart? You will have hundred and more parameters. Isn't this causing
several problems because of a too long URL or something else? Or can i
access this servlet from the GWT-Server-side to pass data and vice
versa?

I have looked for 'FusionChart' and it really looks amazing. This
would be perfect for our application but unfortunately it is too
expensive for our work yet. But i will keep this in mind! Thanks for
the hint!

When someone else have an only-GWT-solution/example i will be still
happy to read your approach. Thank you all!

Regards,
Marcin
Reply all
Reply to author
Forward
0 new messages