ZKTM Small Talks |
Integrating JFreeChart to ZK Framework, Part I |
| Simply Rich | Henri Chen Principal Engineer Potix Corporation June 21, 2006 |
ZK has been asked for charting components for a while. To response these requirements, here is a quick start to fullfil it. This smalltalk uses the famous opensource JFreeChart charting engine as an example. However, the way illustrated here is not limited to any specific charting engine. Developers can freely select their favorite charting engine to do the same thing.
Go to JFreeChart download page. Download the latest version and unzip it to a directory. In the $JFREECHART$/lib subdirectory, find jcommon*.jar and jfreechart*.jar. Copy them to shared/lib of your Tomcat (The same place with other ZK jars). Or you can copy those two files to your project's WEB-INF/lib along with other ZK jar files.
In ZK's component set, there is a component named "image" that can be used to, as its name suggests, show images of different formats. It can be used to show images of at least gif, png, and jpeg formats. The whole charting implementation is then really straitforward. Use the charting engine to render data into image stream of compatible format and show it with the ZK's <image> component.
Since JFreeChart support a lot of different charts. I will use the PieChart3D as an example to illustrate the procedure on how to integrate charting capbility into ZK. First of all, chart is used to illustrate data as a graph. You got to have data first. In JFreeChart, data is put in a class named Dataset. To simplify the example, I hard coded this part.
DefaultPieDataset pieDataset = new DefaultPieDataset();
pieDataset.setValue("C/C++", new Double(17.5));
pieDataset.setValue("PHP", new Double(32.5));
pieDataset.setValue("Java", new Double(43.2));
pieDataset.setValue("Visual Basic", new Double(10));
JFreeChart provides an easy to use utility class, ChartFactory, that can be used to create a chart in one single API. Then you really draw the chart onto an BufferedImage. Another utility class, EncodeUtil, can be used to export the chart on the BufferImage into a png image stream byte array.
JFreeChart chart = ChartFactory.createPieChart3D("Sample Pie Chart 3D", pieDataset,true,true,true);
PiePlot3D plot = (PiePlot3D) chart.getPlot();
plot.setForegroundAlpha(0.5f);
BufferedImage bi = chart.createBufferedImage(500, 300, BufferedImage.TRANSLUCENT , null);
byte[] bytes = EncoderUtil.encode(bi, ImageFormat.PNG, true);
Ok, we have the png image stream of the chart in a byte array now. It is time for ZK's <image> component. To call the setContent() method of the Image component we have to first wrap the byte array as an AImage class and then call myimage.setContent(aimage) to really show the image on the browser. There you go.
AImage image = new AImage("Pie Chart", bytes);
myimage.setContent(image);
The whole procedure is simple:
The whole example source code can be copied to the demo Source pane and press "try me" button to view the result. Remember to copy those two JFreeChart jars into the Tomcat's shared/lib directory first and reboot Tomcat.
The example illustrated here just do the "view" parts of the chart. Generally, it is even better if end user can drill down more detailed information by clicking on a specific part of the chart. ZK and JFreeChart can cooperate to provides that facility. I will show how to do that in the next smalltalk. The final target of ZK team is to provide a set of charting components that developer can use seamlessly just like using other ZK components.