Chart

{{ZKComponentReferencePageHeader}}

= Chart =

*Demonstration: [http://www.zkoss.org/zkdemo/chart/pie_chart Chart]
*Java API: <javadoc>org.zkoss.zul.Chart</javadoc>
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Chart</javadoc>
*Style Guide: N/A

= Employment/Purpose =

A <tt>chart</tt> 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 <tt>ChartModel </tt>and a <tt>ChartEngine.</tt> 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 =

[[Image:ZKComRef_Chart.png]] 


{| border="1"
! <center>Type</center>
! <center>Model</center>
! <center>3D</center>

|-
| <center><tt>pie</tt></center>
| <tt>PieModel</tt>
| <center><tt>o</tt></center>

|-
| <center><tt>ring</tt></center>
| <tt>PieModel</tt>
| <center><tt>x</tt></center>

|-
| <center><tt>bar</tt></center>
| <tt>CategoryModel</tt>
| <center><tt>o</tt></center>

|-
| <center><tt>line</tt></center>
| <tt>CategoryModel </tt>or<tt> XYModel</tt>
| <center><tt>o</tt></center>

|-
| <center><tt>area</tt></center>
| <tt>CategoryModel </tt>or<tt> XYModel</tt>
| <center><tt>x</tt></center>

|-
| <center><tt>stacked_bar </tt></center>
| <tt>CategoryModel</tt>
| <center><tt>o</tt></center>

|-
| <center><tt>stacked_area </tt></center>
| <tt>CategoryModel </tt>or<tt> XYModel</tt>
| <center><tt>x</tt></center>

|-
| <center><tt>waterfall </tt></center>
| <tt>CategoryModel</tt>
| <center><tt>x</tt></center>

|-
| <center><tt>polar </tt></center>
| <tt>XYModel</tt>
| <center>x</center>

|-
| <center><tt>scatter </tt></center>
| <tt>XYModel</tt>
| <center>x</center>

|-
| <center><tt>time_series </tt></center>
| <tt>XYModel</tt>
| <center>x</center>

|-
| <center><tt>polar </tt></center>
| <tt>XYModel</tt>
| <center>x</center>

|-
| <center><tt>step_area </tt></center>
| <tt>XYModel</tt>
| <center>x</center>

|-
| <center><tt>step </tt></center>
| <tt>XYModel</tt>
| <center>x</center>

|-
| <center><tt>histogram </tt></center>
| <tt>XYModel</tt>
| <center>x</center>

|-
| <center><tt>candlestick </tt></center>
| <tt>HiLoModel</tt>
| <center>x</center>

|-
| <center><tt>hilow </tt></center>
| <tt>HiLoModel</tt>
| <center>x</center>

|}

<source lang="xml" >
<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>
</source>

=Supported Events=
{| border="1" | width="100%"
! <center>Name</center>
! <center>Inherited From</center>

|-
| None
| None
|}

*Inherited Supported Events: [[ZK_Component_Reference/Essential_Components/Imagemap#Supported_Events | Imagemap]]

=Supported Children=

 *NONE

=Use Cases=

{| border='1px' | width="100%"
! Version !! Description !! Example Location
|-
| 5.0
| Make a Chart fill 100% width in parent panel
| [http://www.zkoss.org/forum/listComment/10761 http://www.zkoss.org/forum/listComment/10761]
|-
| 5.0
| Dual axis in Chart
| [http://www.zkoss.org/forum/listComment/8752 http://www.zkoss.org/forum/listComment/8752]
|}

=Version History=
{{LastUpdated}}

{| border='1px' | width="100%"
! Version !! Date !! Content
|-
| 5.0.4
| August 2010
| MouseEvent introduced a new method, <javadoc method="getAreaComponent()">org.zkoss.zk.ui.event.MouseEvent</javadoc>, which simplifies the retrieval of the area component.
<source lang="java">
Area area = (Area)event.getAreaComponent(); //must be Area or null when used with chart
if (area != null)
  ...
</source>

|-
| 5.0.3
| June 2010
| The area sent with the click event becomes UUID of the area component. Thus, use <tt>desktop.getComponentByUuid(event.getArea())</tt>. To write a program compatible with any version of ZK:
<source lang="java">
String areaid = event.getArea();
if (areaid != null) {
  Area area = desktop.getComponentByUuidIfAny(areaid);
  if (area == null)
    area = chart.getFellow(areaid); //fall back to older version
...
</source>
|}

{{ZKComponentReferencePageFooter}}