Chart

From Documentation

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

ZKComRef Chart.png

<chart id="mychart" title="Pie Chart Demo" width="550" height="400"
    type="pie" threeD="true" fgAlpha="128">
    <attribute name="onClick"><![CDATA[
        Area area = event.getAreaComponent();
        if (area != null)
            alert(""+area.getAttribute("entity")+":"+area.getTooltiptext());
    ]]></attribute>
    <zscript><![CDATA[
        PieModel model = new SimplePieModel();
        model.setValue("C/C++", new Double(21.2));
        model.setValue("VB", new Double(10.2));
        model.setValue("Java", new Double(40.4));
        model.setValue("PHP", new Double(28.2));
        mychart.setModel(model);
    ]]></zscript>
</chart>

Properties

Type and Model

Type
Model
3D
pie
PieModel
o
ring
PieModel
x
bar
CategoryModelor XYModel
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
bubble
XYModel
x
wind
XYModel
x
candlestick
HiLoModel
x
highlow
HiLoModel
x


wafermap
WaferMapModel
x
gantt
GanttModel
x
dial
DialModel
x

The onClick Event

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());
}

Charts Support Setting the Font

We can now specify what font we want a chart to use, this is useful when employing a foreign language within your chart. The example demonstrates setting a font and using it with a foreign language, in this case Chinese.

ZKComRef Chart Font Examples.png

<vbox>
	<zscript>
		import java.awt.Font;
		String fontname = "Dialog";
		Font tfont = new Font(fontname, Font.BOLD, 16); //for title
		Font lfont = new Font(fontname, Font.PLAIN, 10); //for legend
		Font lbfont = new Font(fontname, Font.PLAIN, 12); //for label


		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "第一季", new Integer(20));
		catmodel.setValue("2001", "第二季", new Integer(35));
		catmodel.setValue("2001", "第三季", new Integer(40));
		catmodel.setValue("2001", "第四季", new Integer(55));
		catmodel.setValue("2002", "第一季", new Integer(40));
		catmodel.setValue("2002", "第二季", new Integer(60));
		catmodel.setValue("2002", "第三季", new Integer(70));
		catmodel.setValue("2002", "第四季", new Integer(90));
	</zscript>

	<chart id="barchart" title="長條圖  Bar Chart" width="500" height="250" type="bar" threeD="false" fgAlpha="128"
	titleFont="${tfont}" legendFont="${lfont}" xAxisFont="${lbfont}" xAxisTickFont="${lbfont}" model="${catmodel}"/>
</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/30


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/30

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