chart.zul

非常接近C/S操作方式的Java Ajax框架－ZK 用ZK框架使你的B/S应用程序更漂亮更易操作。 官网：www.zkoss.org

<?xml version="1.0" encoding="UTF-8"?>

<!--
charts.zul

{{IS_NOTE
	Purpose:
		
	Description:
		
	History:
		Thu Aug  10 12:37:06     2006, Created by henrichen
}}IS_NOTE

Copyright (C) 2006 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<vbox>
<zscript>
  void drilldown() {
  	String areaid = event.getArea();
  	if (areaid != null) {
	  	Area area = self.getFellow(areaid);
	  	alert(""+area.getAttribute("entity")+": "+area.getTooltiptext());
	}
  }
</zscript>
<zscript>
  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));
</zscript>
<label value="pie"/>
<chart id="piechart" title="Pie Chart" width="500" height="250" type="pie" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  piechart.setModel(piemodel);
</zscript>

<label value="pie+3d"/>
<chart id="piechart3d" title="Pie Chart 3D" width="500" height="250" type="pie" threeD="true" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  piechart3d.setModel(piemodel);
</zscript>

<label value="ring"/>
<chart id="ringchart" title = "Ring Chart" width="500" height="250" type="ring" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  ringchart.setModel(piemodel);
</zscript>

<zscript>
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));
</zscript>

<label value="bar"/>
<chart id="barchart" title="Bar Chart" width="500" height="250" type="bar" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  barchart.setModel(catmodel);
</zscript>

<label value="bar+3d"/>
<chart id="barchart3d" title="Bar Chart 3D" width="500" height="250" type="bar" threeD="true" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  barchart3d.setModel(catmodel);
</zscript>

<label value="stacked_bar"/>
<chart id="sbarchart" title="Stacked Bar" width="500" height="250" type="stacked_bar" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  sbarchart.setModel(catmodel);
</zscript>

<label value="stacked_bar+3d"/>
<chart id="sbarchart3d" title="Stacked Bar 3D" width="500" height="250" type="stacked_bar" threeD="true" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  sbarchart3d.setModel(catmodel);
</zscript>

<label value="line"/>
<chart id="linechart" title="Line Chart" width="500" height="250" type="line" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  linechart.setModel(catmodel);
</zscript>

<label value="line+3d"/>
<chart id="linechart3d" title="Line Chart 3D" width="500" height="250" type="line" threeD="true" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  linechart3d.setModel(catmodel);
</zscript>

<label value="area"/>
<chart id="areachart" title="Area Chart" width="500" height="250" type="area" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  areachart.setModel(catmodel);
</zscript>

<label value="stacked_area"/>
<chart id="sareachart" title="Stacked Area Chart" width="500" height="250" type="stacked_area" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  sareachart.setModel(catmodel);
</zscript>

<label value="waterfall"/>
<chart id="waterfall" title="Waterfall Chart" width="500" height="250" type="waterfall" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  waterfall.setModel(catmodel);
</zscript>

<zscript>
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));
</zscript>


<label value="polar"/>
<chart id="polar" title="Polar Chart" width="500" height="250" type="polar" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  polar.setModel(xymodel);
</zscript>

<label value="scatter"/>
<chart id="scatter" title="Scatter Chart" width="500" height="250" type="scatter" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  scatter.setModel(xymodel);
</zscript>

<label value="time_series"/>
<chart id="timeseries" title="Time Series Chart" width="500" height="250" type="time_series" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  timeseries.setModel(xymodel);
</zscript>

<label value="area"/>
<chart id="xyarea" title="XY Area Chart" width="500" height="250" type="area" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  xyarea.setModel(xymodel);
</zscript>

<label value="line"/>
<chart id="xyline" title="XY Line Chart" width="500" height="250" type="line" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  xyline.setModel(xymodel);
</zscript>

<label value="step_area"/>
<chart id="steparea" title="Step Area Chart" width="500" height="250" type="step_area" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  steparea.setModel(xymodel);
</zscript>

<label value="step"/>
<chart id="step" title="Step Chart" width="500" height="250" type="step" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  step.setModel(xymodel);
</zscript>

<label value="stacked_area"/>
<chart id="xystackedarea" title="XY Stacked Area Chart" width="500" height="250" type="stacked_area" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  xystackedarea.setModel(xymodel);
</zscript>

<label value="bar"/>
<chart id="xybar" title="XY Bar Chart" width="500" height="250" type="bar" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  xybar.setModel(xymodel);
</zscript>

<label value="histogram"/>
<chart id="histogram" title="Histogram Chart" width="500" height="250" type="histogram" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  histogram.setModel(xymodel);
</zscript>

<zscript>
HiLoModel hilomodel = new SimpleHiLoModel();
long d = new Date().getTime();
hilomodel.addValue(new Date(d),  new Double(45.5),  new Double(54.2), new Double(19.9), new Double(42.8), new Double(20));
hilomodel.addValue(new Date(d+1000),  new Double(46.5),  new Double(55.2),  new Double(43.8), new Double(50.9),   new Double(32));
hilomodel.addValue(new Date(d+2000),  new Double(47.5),  new Double(56.2),  new Double(44.8), new Double(51.9),   new Double(33));
hilomodel.addValue(new Date(d+3000),  new Double(48.5),  new Double(57.2),  new Double(45.8), new Double(52.9),   new Double(34));
hilomodel.addValue(new Date(d+4000),  new Double(49.5),  new Double(58.2),  new Double(46.8), new Double(53.9),   new Double(35));
hilomodel.addValue(new Date(d+5000),  new Double(50.5),  new Double(59.2),  new Double(47.8), new Double(54.9),   new Double(36));
hilomodel.addValue(new Date(d+6000),  new Double(51.5),  new Double(60.2),  new Double(48.8), new Double(55.9),   new Double(37));
hilomodel.addValue(new Date(d+7000),  new Double(52.5),  new Double(61.2),  new Double(49.8), new Double(56.9),   new Double(38));
hilomodel.addValue(new Date(d+8000),  new Double(53.5),  new Double(62.2),  new Double(50.8), new Double(57.9),   new Double(39));
hilomodel.addValue(new Date(d+9000),  new Double(54.5),  new Double(63.2),  new Double(51.8), new Double(58.9),   new Double(40));
hilomodel.addValue(new Date(d+10000),  new Double(55.5),  new Double(64.2),  new Double(52.8), new Double(59.9),   new Double(41));
hilomodel.addValue(new Date(d+11000),  new Double(56.5),  new Double(65.2),  new Double(53.8), new Double(60.9),   new Double(42));
hilomodel.addValue(new Date(d+12000),  new Double(57.5),  new Double(66.2),  new Double(54.8), new Double(61.9),   new Double(43));
hilomodel.addValue(new Date(d+13000),  new Double(58.5),  new Double(67.2),  new Double(55.8), new Double(62.9),   new Double(44));
hilomodel.addValue(new Date(d+14000),  new Double(59.5),  new Double(68.2),  new Double(56.8), new Double(63.9),   new Double(45));
hilomodel.addValue(new Date(d+15000),  new Double(60.5),  new Double(69.2),  new Double(57.8), new Double(64.9),   new Double(46));
hilomodel.addValue(new Date(d+16000),  new Double(61.5),  new Double(70.2),  new Double(58.8), new Double(65.9),   new Double(47));
hilomodel.addValue(new Date(d+17000),  new Double(62.5),  new Double(71.2),  new Double(59.8), new Double(66.9),   new Double(48));
hilomodel.addValue(new Date(d+18000),  new Double(63.5),  new Double(72.2),  new Double(60.8), new Double(67.9),   new Double(49));
</zscript>

<label value="candlestick"/>
<chart id="candlestick" title="Candlestick Chart" width="500" height="250" type="candlestick" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  candlestick.setModel(hilomodel);
</zscript>

<label value="highlow"/>
<chart id="highlow" title="High Low Chart" width="500" height="250" type="highlow" threeD="false" fgAlpha="128" onClick="drilldown()"/>
<zscript>
  highlow.setModel(hilomodel);
</zscript>


</vbox>