ZK Component Reference/Diagrams and Reports/Chart

Chart

• Demonstration: Chart
• Java API: Chart
• JavaScript API: Chart

Employment/Purpose

A chart is used to show a set of data as a graph. It helps users to judge things with a snapshot. To use a chart component , developers must prepare a ChartModel and a ChartEngine. Developers also set proper chart type, and the threeD (3D) attribute to draw proper chart. The model and type must match to each other; or the result is unpredictable. The 3D chart is not supported on all chart type.

Example

Type	Model	3D
pie	PieModel	o
ring	PieModel	x
bar	CategoryModel	o
line	CategoryModel or XYModel	o
area	CategoryModel or XYModel	x
stacked_bar	CategoryModel	o
stacked_area	CategoryModel or XYModel	x
waterfall	CategoryModel	x
polar	XYModel	x
scatter	XYModel	x
time_series	XYModel	x
polar	XYModel	x
step_area	XYModel	x
step	XYModel	x
histogram	XYModel	x
candlestick	HiLoModel	x
hilow	HiLoModel	x

<vbox>
     <chart id="mychart" title="Pie Chart Demo" width="500" height="250" type="pie" threeD="true" fgAlpha="128"/>
     <zscript>
         PieModel model = new MyPieModel();
         mychart.setModel(model);
     </zscript>
 </vbox>

Supported events

Name	Event Type
onClick	MouseEvent Description: Denotes user has clicked the component. Use getX(), getY() method to get coordinates. Use getArea() method to get the area component which user clicks on.

Supported Children

*NONE

Use cases

Version	Description	Example Location
5.0	Make a Chart fill 100% width in parent panel	http://www.zkoss.org/forum/listComment/10761
5.0	Dual axis in Chart	http://www.zkoss.org/forum/listComment/8752

Version History

Version	Date	Content
5.0.2	5/19/2010	Initialization