Open Flash Charts with ZK
Fernando Selvatici
August 24, 2009
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
- Download
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |