Small Talks/2009/August/Open Flash Charts with ZK

Author
Fernando Selvatici

Date
August 24, 2009

Version
ZK 3.6.2

Introduction

Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart) is a collection of Flash applets that you embed in your web page. At the time of writing, you can create various types of bar chart, line chart, pie chart, scatter chart, high-low chart and radar chart. The striking features are the capabilities of animation, tooltips, drill and configuration of fonts, size and colours. In this smalltalk we show how to use this OFC with the ZK OFC Component (ZKofc).

Available chart types

In current alpha version of ZKofc we have three types of charts implemented: bar, pie and line charts. In the near future we will have: area, combined, scatter, High-low, candle and radar charts

Basic charting code

To insert a chart in your application you must add a OFC component, for example in a vbox. You set the size, chart type and then you set the model of data. With zul:

<vbox>
     <ofc id="mychart" title="Pie Chart Demo" width="500" height="250" type="pie" threeD="true" />
     <zscript>
         SimpleCategoryModelmodel = new SimpleCategoryModel();
         ... fill the model here ...
         mychart.setModel(model);
     </zscript>
 </vbox>

Or, if you prefer to do it with pure Java:

Vbox vbox = new Vbox();
OFC ofc = new OFC();
ofc.setTitle("Pie Chart Demo");
ofc.setWidth("300px");
ofc.setHeight("200px");
ofc.setType(org.zkoss.zul.Chart.PIE);
ofc.setThreeD("true");
vbox.appendChild(ofc);

SimpleCategoryModelmodel = new SimpleCategoryModel();
... fill the model here ...
ofc.setModel(model);

Data models

To draw the charts we need the corresponding data models. With ZKofc we can use the same models as in native ZK Charts (Jfreechart with chart component).

		model = new SimpleCategoryModel();
		model.setValue("Serie 1", "January", 1);
		model.setValue("Serie 1", "Febrery", 2);
		model.setValue("Serie 1", "March", 3);
		model.setValue("Serie 1", "April", 4);
		model.setValue("Serie 1", "May", 5);
		model.setValue("Serie 1", "June", 6);
		model.setValue("Serie 2", "January", 6);
		model.setValue("Serie 2", "Febrery", 5);
		model.setValue("Serie 2", "March", 4);
		model.setValue("Serie 2", "April", 3);
		model.setValue("Serie 2", "May", 2);
		model.setValue("Serie 2", "June", 1);
		model.setValue("Serie 3", "January", 2);
		model.setValue("Serie 3", "Febrery", 3);
		model.setValue("Serie 3", "March", 4);
		model.setValue("Serie 3", "April", 5);
		model.setValue("Serie 3", "May", 6);
		model.setValue("Serie 3", "June", 7);

Samples

With the model in the previous section you can generate the following charts:

You can download the sample application from the appendix section

Appendix

• Related Link

• [1] Open Flash Chart 2

• SVN

• http://zkforge.svn.sourceforge.net/svnroot/zkforge/trunk/openflashchart

• Download

• ofcztest.war

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.