Chart

Chart
Prev	Components	Next

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.

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>

Class Name

org.zkoss.zul.Chart

Supported Child Components

*NONE

Supported Events

Name	Event Type
`onClick`	`org.zkoss.zk.ui.event.MouseEvent` `Description:` `Denotes user has clicked the component.` `Use getX(), getY() method to get coo` `rdinates.` `Use getArea() method to get the area component which user clicks on.`

Name

Event Type

onClick

org.zkoss.zk.ui.event.MouseEvent

Description: Denotes user has clicked the component.

Use getX(), getY() method to get coo rdinates.

Use getArea() method to get the area component which user clicks on.

Properties

Property	Description	Data Type	Default Value
`bgAlpha`	Sets the background alpha (transparency, 0 ~ 255).	`int`	`255`
`bgColor`	Sets the background color of the chart.It must be in `#RRGGBB` format (hexdecimal).	`String`	`null`
`fgAlpha`	Sets the foreground alpha (transparency, 0 ~ 255).	`int`	`255`
`height`	Sets height of chart, it must be a integer string	`String`	`200`
`orient`	Sets the chart orientation. Values: `vertical \| horizontal`	`String`	`vertical`
`paneAlpha`	Sets the pane alpha (transparency, 0 ~ 255).	`int`	`255`
`panelColor`	Sets the pane color of the chart.It must be `#RRGGBB` format (hexdecimal).	`String`	`null`
`per` `iod`	Sets the period used in Time Series Chart. Values : millisecond \| second \| minute \| \| hour \| day \| week \| month \| quarter \| year	`String`	`null`
`showLegend`	Sets the flag of showing the chart's legend	`boolean`	`true`
`showTooltiptext`	Sets the flag of showing the chart's tool tip text	`boolean`	`true`
`threeD`	Sets true to show three dimensional graph (If a type of chart got no 3d peer, this is ignored).	`boolean`	`false`
`title`	Sets the chart's title.	`String`	`null`
`type`	Set the chart's type Values: `pie \| ring \| bar \| line \| area \| stacked_bar` \| `stacked_`area \| `waterfall \| polar \| scatter \| time_series \| polar \| step_area` \| `step \| histogram \| candlestick \| hilow`	`String`	`null`
`width`	Sets width of chart, it must be a integer string	`String`	`400`
`xAxis`	Sets the label in xAxis.	`String`	`null`
`yAxis`	Sets the label in yAxis.	`String`	`null`

Methods

Name	Description	Return Data Type
`getAreaListener`	Returns the renderer to render each area, or null if the default renderer is used.	`ChartAreaListener`
`getBgRGB`	Get the background color in int array (0: red, 1: green, 2:blue).	`int[]`
`getEngine`	Returns the implemetation chart engine.	`ChartEngine`
`getIntHeight`	Get the chart int width in pixel	`int`
`getIntWidth`	Get the chart int width in pixel	`int`
`getModel`	Returns the chart model associated with this chart, or null if this chart is not associated with any chart data model	`ChartModel`
`getPaneRGB`	Get the pane color in int array (0: red, 1: green, 2:blue).	`int[]`
`getTimeZone`	Returns the time zone that this Time Series Chart belongs to, or null if the default time zone is used.	`TimeZone`
`newChartEngine`	Instantiates the default chart engine	`ChartEngine`
`setAreaListener`	Sets the renderer which is used to render each area
`setEngine`	Sets the chart engine
`setModel`	Sets the chart model associated with this chart
`setTimeZone`	Sets the time zone that this Time Series Chart belongs to, or null if the default time zone is used
`smartDrawChart`	mark a draw flag to inform that this Chart needs update

Inherited From

Inherited From
org.zkoss.zul.Imagemap
org.zkoss.zul.Image
org.zkoss.zul.impl.XulElement
org.zkoss.zk.ui.HtmlBasedComponent
org.zkoss.zk.ui.AbstractComponent

Prev	Up	Next
Center	Home	Checkbox