Open Flash Charts with ZK"

From Documentation
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:
  
<pre>
+
<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>
</pre>
+
</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">http://docs.zkoss.org/images/0/0d/Zkofc-demo.swf</gflash>
+
<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

DocumentationSmall Talks2009AugustOpen Flash Charts with ZK
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
  • Download




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