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 org.zkoss.zk.ui.event.MouseEvent method to get coordinates. Use org.zkoss.zk.ui.event.MouseEvent method to get the UUID of the area component which user clicks on. void drilldown(MouseEvent event) { final Component area = event.getAreaComponent(); if (area != null) Messagebox.show(area.getAttribute("entity")+": "+area.getTooltiptext()); } |} =Supported Children= *NONE =Use cases= {| border='1px' | width="100%" ! Version !! Description !! Example Location |- | 5.0 | Make a Chart fill 100% width in parent panel | [http://www.zkoss.org/forum/listComment/10761 http://www.zkoss.org/forum/listComment/10761] |- | 5.0 | Dual axis in Chart | [http://www.zkoss.org/forum/listComment/8752 http://www.zkoss.org/forum/listComment/8752] |} =Version History= {| border='1px' | width="100%" ! Version !! Date !! Content |- | 5.0.4 | August 2010 | MouseEvent introduced a new method, org.zkoss.zk.ui.event.MouseEvent.html#getX()" title="org.zkoss.zk.ui.event.MouseEvent and org.zkoss.zk.ui.event.MouseEvent method to get coordinates. Use org.zkoss.zk.ui.event.MouseEvent method to get the UUID of the area component which user clicks on. void drilldown(MouseEvent event) { final Component area = event.getAreaComponent(); if (area != null) Messagebox.show(area.getAttribute("entity")+": "+area.getTooltiptext()); } |} =Supported Children= *NONE =Use cases= {| border='1px' | width="100%" ! Version !! Description !! Example Location |- | 5.0 | Make a Chart fill 100% width in parent panel | [http://www.zkoss.org/forum/listComment/10761 http://www.zkoss.org/forum/listComment/10761] |- | 5.0 | Dual axis in Chart | [http://www.zkoss.org/forum/listComment/8752 http://www.zkoss.org/forum/listComment/8752] |} =Version History= {| border='1px' | width="100%" ! Version !! Date !! Content |- | 5.0.4 | August 2010 | MouseEvent introduced a new method, org.zkoss.zk.ui.event.MouseEvent">MouseEvent and org.zkoss.zk.ui.event.MouseEvent method to get coordinates. Use org.zkoss.zk.ui.event.MouseEvent method to get the UUID of the area component which user clicks on. void drilldown(MouseEvent event) { final Component area = event.getAreaComponent(); if (area != null) Messagebox.show(area.getAttribute("entity")+": "+area.getTooltiptext()); } |} =Supported Children= *NONE =Use cases= {| border='1px' | width="100%" ! Version !! Description !! Example Location |- | 5.0 | Make a Chart fill 100% width in parent panel | [http://www.zkoss.org/forum/listComment/10761 http://www.zkoss.org/forum/listComment/10761] |- | 5.0 | Dual axis in Chart | [http://www.zkoss.org/forum/listComment/8752 http://www.zkoss.org/forum/listComment/8752] |} =Version History= {| border='1px' | width="100%" ! Version !! Date !! Content |- | 5.0.4 | August 2010 | MouseEvent introduced a new method, org.zkoss.zk.ui.event.MouseEvent.getX(), which simplifies the retrieval of the area component. Area area = (Area)event.getAreaComponent(); //must be Area or null when used with chart if (area != null) ...
5.0.3	June 2010	The area sent with the click event becomes UUID of the area component. Thus, use desktop.getComponentByUuid(event.getArea()). To write a program compatible with any version of ZK: String areaid = event.getArea(); if (areaid != null) { Area area = desktop.getComponentByUuidIfAny(areaid); if (area == null) area = chart.getFellow(areaid); //fall back to older version ...