From Documentation

Jump to: navigation, search




  • Author
    Fernando Selvatici
  • Date
    August 24, 2009
  • Version
    ZK 3.6.2

Contents

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.
You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum