Open Flash Charts with ZK"
m (Created page with '{{Template:Smalltalk_Author| |author=Fernando Selvatici |date=August 24, 2009 |version=ZK 3.6.2 | ZK Open Flash Chart 0.1 }} =Introduction= Open Flash Chart (http://teethgrinder…') |
|||
| (2 intermediate revisions by one other user not shown) | |||
| Line 19: | Line 19: | ||
With zul: | With zul: | ||
| − | < | + | <source lang='xml'> |
<vbox> | <vbox> | ||
<ofc id="mychart" title="Pie Chart Demo" width="500" height="250" type="pie" threeD="true" /> | <ofc id="mychart" title="Pie Chart Demo" width="500" height="250" type="pie" threeD="true" /> | ||
| Line 28: | Line 28: | ||
</zscript> | </zscript> | ||
</vbox> | </vbox> | ||
| − | </ | + | </source> |
Or, if you prefer to do it with pure Java: | Or, if you prefer to do it with pure Java: | ||
| Line 72: | Line 72: | ||
=Samples= | =Samples= | ||
With the model in the previous section you can generate the following charts: | With the model in the previous section you can generate the following charts: | ||
| − | <gflash width="1200" height="600"> | + | <gflash width="1200" height="600">Zkofc-demo.swf</gflash> |
You can download the sample application from the appendix section | You can download the sample application from the appendix section | ||
Latest revision as of 05:41, 30 January 2011
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. |