Chart"

From Documentation
Line 316: Line 316:
  
 
==XY Area Chart==
 
==XY Area Chart==
[[Image:ZKComRef_Chart_XY_Area.png]]  
+
[[Image:ZKComRef_Chart_XY_Area.png]]
 +
<source lang="xml">
 +
<chart id="xyarea" title="XY Area Chart" width="500" height="250"
 +
type="area" threeD="false" fgAlpha="128">
 +
    <zscript><![CDATA[
 +
XYModel xymodel = new SimpleXYModel();
 +
xymodel.addValue("2001", new Integer(20), new Integer(120));
 +
xymodel.addValue("2001", new Integer(40), new Integer(135));
 +
xymodel.addValue("2001", new Integer(60), new Integer(140));
 +
xymodel.addValue("2001", new Integer(80), new Integer(160));
 +
 +
xymodel.addValue("2002", new Integer(30), new Integer(120));
 +
xymodel.addValue("2002", new Integer(50), new Integer(135));
 +
xymodel.addValue("2002", new Integer(70), new Integer(140));
 +
xymodel.addValue("2002", new Integer(90), new Integer(160));
 +
xyarea.setModel(xymodel);
 +
    ]]></zscript>
 +
</chart>
 +
</source>
  
 
==XY Line Chart==
 
==XY Line Chart==

Revision as of 10:45, 30 November 2010

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

Pie Chart

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>

Pie Chart 3D

ZKComRef Chart Pie 3D.png

<chart id="piechart3d" title="Pie Chart 3D" width="500" height="250"
		type="pie" threeD="true" fgAlpha="128">
    <zscript><![CDATA[
		PieModel piemodel = new SimplePieModel();
		piemodel.setValue("C/C++", new Double(12.5));
		piemodel.setValue("Java", new Double(50.2));
		piemodel.setValue("VB", new Double(20.5));
		piemodel.setValue("PHP", new Double(15.5));
        piechart3d.setModel(piemodel);
    ]]></zscript>
</chart>

Ring Chart

ZKComRef Chart Ring.png

<chart id="ringchart" title="Ring Chart" width="500" height="250"
		type="ring" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		PieModel piemodel = new SimplePieModel();
		piemodel.setValue("C/C++", new Double(12.5));
		piemodel.setValue("Java", new Double(50.2));
		piemodel.setValue("VB", new Double(20.5));
		piemodel.setValue("PHP", new Double(15.5));
        ringchart.setModel(piemodel);
    ]]></zscript>
</chart>

Bar Chart

ZKComRef Chart Bar.png

<chart id="barchart" title="Bar Chart" width="500" height="250"
		type="bar" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		barchart.setModel(catmodel);
    ]]></zscript>
</chart>

Bar Chart 3D

ZKComRef Chart Bar 3D.png

<chart id="barchart3d" title="Bar Chart 3D" width="500" height="250"
		type="bar" threeD="true" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		barchart3d.setModel(catmodel);
    ]]></zscript>
</chart>

Stacked Bar

ZKComRef Chart Stacked Bar.png

<chart id="sbarchart" title="Stacked Bar" width="500" height="250"
		type="stacked_bar" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		sbarchart.setModel(catmodel);
    ]]></zscript>
</chart>

Stacked Bar 3D

ZKComRef Chart Stacked Bar 3D.png

<chart id="sbarchart3d" title="Stacked Bar 3D" width="500"
		height="250" type="stacked_bar" threeD="true" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		sbarchart3d.setModel(catmodel);
    ]]></zscript>
</chart>

Line Chart

ZKComRef Chart Line.png

<chart id="linechart" title="Line Chart" width="500" height="250"
		type="line" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		linechart.setModel(catmodel);
    ]]></zscript>
</chart>

Line Chart 3D

ZKComRef Chart Line 3D.png

<chart id="linechart3d" title="Line Chart 3D" width="500"
		height="250" type="line" threeD="true" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		linechart3d.setModel(catmodel);
    ]]></zscript>
</chart>

Area Chart

ZKComRef Chart Area.png

<chart id="areachart" title="Area Chart" width="500" height="250"
		type="area" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		areachart.setModel(catmodel);
    ]]></zscript>
</chart>

Stacked Area Chart

ZKComRef Chart Stacked Area.png

<chart id="sareachart" title="Stacked Area Chart" width="500"
		height="250" type="stacked_area" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		sareachart.setModel(catmodel);
    ]]></zscript>
</chart>

Waterfall Chart

ZKComRef Chart Waterfall.png

<chart id="waterfall" title="Waterfall Chart" width="500"
		height="250" type="waterfall" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		CategoryModel catmodel = new SimpleCategoryModel();
		catmodel.setValue("2001", "Q1", new Integer(20));
		catmodel.setValue("2001", "Q2", new Integer(35));
		catmodel.setValue("2001", "Q3", new Integer(40));
		catmodel.setValue("2001", "Q4", new Integer(55));
		catmodel.setValue("2002", "Q1", new Integer(40));
		catmodel.setValue("2002", "Q2", new Integer(60));
		catmodel.setValue("2002", "Q3", new Integer(70));
		catmodel.setValue("2002", "Q4", new Integer(90));
		waterfall.setModel(catmodel);
    ]]></zscript>
</chart>

Polar Chart

ZKComRef Chart Polar.png

<chart id="polar" title="Polar Chart" width="500" height="250"
		type="polar" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		XYModel xymodel = new SimpleXYModel();
		xymodel.addValue("2001", new Integer(20), new Integer(120));
		xymodel.addValue("2001", new Integer(40), new Integer(135));
		xymodel.addValue("2001", new Integer(60), new Integer(140));
		xymodel.addValue("2001", new Integer(80), new Integer(160));
		
		xymodel.addValue("2002", new Integer(30), new Integer(120));
		xymodel.addValue("2002", new Integer(50), new Integer(135));
		xymodel.addValue("2002", new Integer(70), new Integer(140));
		xymodel.addValue("2002", new Integer(90), new Integer(160));
		polar.setModel(xymodel);
    ]]></zscript>
</chart>

Scatter Chart

ZKComRef Chart Scatter.png

<chart id="scatter" title="Scatter Chart" width="500" height="250"
		type="scatter" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		XYModel xymodel = new SimpleXYModel();
		xymodel.addValue("2001", new Integer(20), new Integer(120));
		xymodel.addValue("2001", new Integer(40), new Integer(135));
		xymodel.addValue("2001", new Integer(60), new Integer(140));
		xymodel.addValue("2001", new Integer(80), new Integer(160));
		
		xymodel.addValue("2002", new Integer(30), new Integer(120));
		xymodel.addValue("2002", new Integer(50), new Integer(135));
		xymodel.addValue("2002", new Integer(70), new Integer(140));
		xymodel.addValue("2002", new Integer(90), new Integer(160));
		scatter.setModel(xymodel);
    ]]></zscript>
</chart>

Time Series Chart

ZKComRef Chart Timeseries.png

<chart id="timeseries" title="Time Series Chart" width="500"
		height="250" type="time_series" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		XYModel xymodel = new SimpleXYModel();
		xymodel.addValue("2001", new Integer(20), new Integer(120));
		xymodel.addValue("2001", new Integer(40), new Integer(135));
		xymodel.addValue("2001", new Integer(60), new Integer(140));
		xymodel.addValue("2001", new Integer(80), new Integer(160));
		
		xymodel.addValue("2002", new Integer(30), new Integer(120));
		xymodel.addValue("2002", new Integer(50), new Integer(135));
		xymodel.addValue("2002", new Integer(70), new Integer(140));
		xymodel.addValue("2002", new Integer(90), new Integer(160));
		timeseries.setModel(xymodel);
    ]]></zscript>
</chart>

XY Area Chart

ZKComRef Chart XY Area.png

<chart id="xyarea" title="XY Area Chart" width="500" height="250"
		type="area" threeD="false" fgAlpha="128">
    <zscript><![CDATA[
		XYModel xymodel = new SimpleXYModel();
		xymodel.addValue("2001", new Integer(20), new Integer(120));
		xymodel.addValue("2001", new Integer(40), new Integer(135));
		xymodel.addValue("2001", new Integer(60), new Integer(140));
		xymodel.addValue("2001", new Integer(80), new Integer(160));
		
		xymodel.addValue("2002", new Integer(30), new Integer(120));
		xymodel.addValue("2002", new Integer(50), new Integer(135));
		xymodel.addValue("2002", new Integer(70), new Integer(140));
		xymodel.addValue("2002", new Integer(90), new Integer(160));
		xyarea.setModel(xymodel);
    ]]></zscript>
</chart>

XY Line Chart

ZKComRef Chart XY Line.png

Step Area Chart

ZKComRef Chart Step Area.png

Step Chart

ZKComRef Chart Step.png

XY Stacked Area Chart

ZKComRef Chart XY Stacked Area.png

XY Bar Chart

ZKComRef Chart XY Bar.png

Histogram Chart

ZKComRef Chart Histogram.png

Candlestick Chart

ZKComRef Chart Candlestick.png

High Low Chart

ZKComRef Chart Highlow.png

Bubble Chart

ZKComRef Chart Bubble.png

Horizontal Bubble Chart

ZKComRef Chart HBubble.png

Wafer Map Chart

ZKComRef Chart Wafer Map.png

Gantt Chart

ZKComRef Chart Gantt.png

Wind Chart

ZKComRef Chart Wind.png

Dial Chart

ZKComRef Chart Dial.png

Properties

Type and Model

Type
Model
3D
pie
PieModel
o
ring
PieModel
x
bar
CategoryModel or 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.