Chart

From Documentation
Revision as of 11:43, 22 November 2010 by Jimmyshiau (talk | contribs) (→‎Chart)

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
Event Type
onClick
MouseEvent


Description: Denotes user has clicked the component.

Use MouseEvent.getX() and MouseEvent.getY() method to get coordinates.

Use MouseEvent.getAreaComponent() method to retrieve the area component (Area) 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

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.