Chart"

From Documentation
Line 119: Line 119:
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
 
 
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
! <center>Event Type</center>
+
! <center>Inherited From</center>
 +
 
 
|-
 
|-
| <center><tt>onClick</tt></center>
+
| None
| <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
+
| None
 +
|}
  
 
+
*Inherited Supported Events: [[ZK_Component_Reference/Essential_Components/Imagemap#Supported_Events | Imagemap]]
'''Description:''' Denotes user has clicked the component.
 
 
 
Use <javadoc method="getX()">org.zkoss.zk.ui.event.MouseEvent</javadoc> and <javadoc method="getY()">org.zkoss.zk.ui.event.MouseEvent</javadoc> method to get coordinates.
 
 
 
Use <javadoc method="getAreaComponent()">org.zkoss.zk.ui.event.MouseEvent</javadoc> method to retrieve the area component (<javadoc>org.zkoss.zul.Area</javadoc>) which user clicks on.
 
 
 
<source lang="java">
 
void drilldown(MouseEvent event) {
 
  final Component area = event.getAreaComponent();
 
  if (area != null)
 
    Messagebox.show(area.getAttribute("entity")+": "+area.getTooltiptext());
 
}
 
</source>
 
 
 
|}
 
  
 
=Supported Children=
 
=Supported Children=

Revision as of 11:46, 22 November 2010

Chart

  • Demonstration: Chart
  • Java API: Chart
  • JavaScript API: Chart
  • Style Guide: N/A

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

ZKComRef Chart.png


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
Inherited From
None None

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

Last Update : 2010/11/22


Version Date Content
5.0.4 August 2010 MouseEvent introduced a new method, MouseEvent.getAreaComponent(), 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
...



Last Update : 2010/11/22

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