Candlestick
Source :
1. File Zul :
<vlayout apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('demo.chart.candlestick.CandlestickChartVM')"> <chart id="chart" width="680" height="400" yAxis="Price" fgAlpha="128" paneColor="#ffffff" type="candlestick" model="@bind(vm.model)" engine="@bind(vm.engine)" onClick="@command('showMessage',msg=event.areaComponent.tooltiptext)"/> <hlayout visible="@bind(not empty vm.message)"> You clicked on :<label value="@bind(vm.message)"/> </hlayout></vlayout>2. View Model :
2.1. candlestickchartVM.java
package demo.chart.candlestick;import java.util.Date;import java.util.Iterator;import org.zkoss.bind.annotation.BindingParam;import org.zkoss.bind.annotation.Command;import org.zkoss.bind.annotation.Init;import org.zkoss.bind.annotation.NotifyChange;import org.zkoss.zul.HiLoModel;import org.zkoss.zul.SimpleHiLoModel;public class CandlestickChartVM { HiLoModel model; CandlestickChartEngine engine; String message; @Init public void init() { engine = new CandlestickChartEngine(); model = new SimpleHiLoModel(); Iterator<Object[]> it = ChartData.get().iterator(); while (it.hasNext()) { Object[] data = it.next(); model.addValue((Date) data[0], (Double) data[1], (Double) data[2], (Double) data[3], (Double) data[4], (Double) data[5]); } } public CandlestickChartEngine getEngine() { return engine; } public HiLoModel getModel() { return model; } public String getMessage() { return message; } @Command("showMessage") @NotifyChange("message") public void onShowMessage( @BindingParam("msg") String message){ this.message = message; }}2.2. candlestickchartEngine.java
package demo.chart.candlestick;import org.jfree.chart.JFreeChart;import org.jfree.chart.axis.NumberAxis;import org.jfree.chart.plot.XYPlot;import org.jfree.chart.renderer.xy.CandlestickRenderer;import org.jfree.chart.renderer.xy.XYItemRenderer;import org.zkoss.zkex.zul.impl.JFreeChartEngine;import org.zkoss.zul.Chart;import demo.chart.ChartColors;/* * you are able to do many advanced chart customization by extending ChartEngine */public class CandlestickChartEngine extends JFreeChartEngine { //This method used to define the margin of axis protected boolean prepareJFreeChart(JFreeChart jfchart, Chart chart) { XYPlot xyplot = (XYPlot) jfchart.getPlot(); // Define margin of y-axis NumberAxis numberaxis = (NumberAxis) xyplot.getRangeAxis(); numberaxis.setUpperMargin(0.0D); numberaxis.setLowerMargin(0.0D); // Second axis shows volume NumberAxis rangeAxis2 = new NumberAxis("TotalVolume"); rangeAxis2.setUpperMargin(78410); numberaxis.setAutoRangeIncludesZero(false); xyplot.setRangeAxis( 1, rangeAxis2 ); CandlestickRenderer renderer = (CandlestickRenderer)xyplot.getRenderer(); renderer.setSeriesPaint(0, ChartColors.COLOR_1); renderer.setDownPaint(ChartColors.COLOR_5); renderer.setUpPaint(ChartColors.COLOR_2); return false; }}3. Model :
3.1. ChartData.java
package demo.chart.candlestick;import java.util.ArrayList;import java.util.Date;import java.util.List;import java.util.TimeZone;public class ChartData { static List<Object[]> data = new ArrayList<Object[]>(); static { data.add(new Object[] { time(2010, 5, 6, 13, 57, 0), new Double(1116.50), new Double(1119.50), new Double(1115.75), new Double(1118.75), new Double(26534) }); data.add(new Object[] { time(2010, 5, 6, 13, 58, 0), new Double(1118.75), new Double(1118.75), new Double(1113.75), new Double(1115.50), new Double(22715) }); data.add(new Object[] { time(2010, 5, 6, 13, 59, 0), new Double(1115.75), new Double(1116.00), new Double(1110.75), new Double(1112.75), new Double(20766) }); data.add(new Object[] { time(2010, 5, 6, 14, 0, 0), new Double(1112.75), new Double(1112.75), new Double(1103.25), new Double(1106.00), new Double(30059) }); data.add(new Object[] { time(2010, 5, 6, 14, 1, 0), new Double(1105.75), new Double(1115.25), new Double(1105.50), new Double(1113.00), new Double(20329) }); data.add(new Object[] { time(2010, 5, 6, 14, 2, 0), new Double(1112.75), new Double(1116.50), new Double(1110.50), new Double(1116.25), new Double(20395) }); data.add(new Object[] { time(2010, 5, 6, 14, 3, 0), new Double(1116.50), new Double(1121.00), new Double(1115.75), new Double(1120.00), new Double(23156) }); data.add(new Object[] { time(2010, 5, 6, 14, 4, 0), new Double(1120.00), new Double(1121.25), new Double(1117.75), new Double(1119.00), new Double(22293) }); data.add(new Object[] { time(2010, 5, 6, 14, 5, 0), new Double(1119.00), new Double(1123.50), new Double(1116.75), new Double(1123.50), new Double(27369) }); data.add(new Object[] { time(2010, 5, 6, 14, 6, 0), new Double(1123.50), new Double(1124.00), new Double(1120.25), new Double(1121.75), new Double(22120) }); data.add(new Object[] { time(2010, 5, 6, 14, 7, 0), new Double(1121.75), new Double(1126.50), new Double(1121.00), new Double(1126.00), new Double(24415) }); data.add(new Object[] { time(2010, 5, 6, 14, 8, 0), new Double(1126.25), new Double(1131.25), new Double(1125.50), new Double(1131.25), new Double(27627) }); data.add(new Object[] { time(2010, 5, 6, 14, 9, 0), new Double(1131.00), new Double(1131.75), new Double(1125.00), new Double(1126.25), new Double(28348) }); data.add(new Object[] { time(2010, 5, 6, 14, 10, 0), new Double(1126.50), new Double(1128.00), new Double(1125.75), new Double(1127.75), new Double(18702) }); data.add(new Object[] { time(2010, 5, 6, 14, 11, 0), new Double(1128.00), new Double(1128.00), new Double(1117.50), new Double(1118.25), new Double(25499) }); data.add(new Object[] { time(2010, 5, 6, 14, 12, 0), new Double(1118.25), new Double(1122.25), new Double(1117.75), new Double(1120.25), new Double(16323) }); data.add(new Object[] { time(2010, 5, 6, 14, 13, 0), new Double(1120.25), new Double(1122.50), new Double(1119.00), new Double(1121.25), new Double(11372) }); data.add(new Object[] { time(2010, 5, 6, 14, 14, 0), new Double(1121.25), new Double(1121.75), new Double(1119.25), new Double(1119.75), new Double(8121) }); data.add(new Object[] { time(2010, 5, 6, 14, 15, 0), new Double(1119.75), new Double(1121.25), new Double(1118.00), new Double(1120.25), new Double(15347) }); data.add(new Object[] { time(2010, 5, 6, 14, 16, 0), new Double(1120.25), new Double(1122.75), new Double(1120.25), new Double(1122.00), new Double(12236) }); data.add(new Object[] { time(2010, 5, 6, 14, 17, 0), new Double(1121.75), new Double(1125.50), new Double(1121.00), new Double(1125.00), new Double(12052) }); data.add(new Object[] { time(2010, 5, 6, 14, 18, 0), new Double(1125.00), new Double(1125.75), new Double(1118.50), new Double(1118.75), new Double(21474) }); data.add(new Object[] { time(2010, 5, 6, 14, 19, 0), new Double(1119.00), new Double(1119.00), new Double(1115.25), new Double(1115.75), new Double(20824) }); data.add(new Object[] { time(2010, 5, 6, 14, 20, 0), new Double(1115.75), new Double(1116.00), new Double(1111.75), new Double(1112.25), new Double(20310) }); data.add(new Object[] { time(2010, 5, 6, 14, 21, 0), new Double(1112.00), new Double(1113.50), new Double(1108.00), new Double(1113.25), new Double(23136) }); data.add(new Object[] { time(2010, 5, 6, 14, 22, 0), new Double(1113.25), new Double(1116.75), new Double(1112.50), new Double(1114.50), new Double(13819) }); data.add(new Object[] { time(2010, 5, 6, 14, 23, 0), new Double(1114.75), new Double(1115.50), new Double(1111.50), new Double(1112.50), new Double(14484) }); data.add(new Object[] { time(2010, 5, 6, 14, 24, 0), new Double(1112.50), new Double(1113.50), new Double(1111.75), new Double(1112.25), new Double(7490) }); data.add(new Object[] { time(2010, 5, 6, 14, 25, 0), new Double(1112.25), new Double(1112.25), new Double(1108.25), new Double(1108.50), new Double(14881) }); data.add(new Object[] { time(2010, 5, 6, 14, 26, 0), new Double(1108.25), new Double(1112.00), new Double(1106.50), new Double(1107.25), new Double(19247) }); data.add(new Object[] { time(2010, 5, 6, 14, 27, 0), new Double(1107.25), new Double(1111.25), new Double(1106.50), new Double(1110.00), new Double(11622) }); data.add(new Object[] { time(2010, 5, 6, 14, 28, 0), new Double(1110.00), new Double(1111.00), new Double(1109.00), new Double(1110.50), new Double(8758) }); data.add(new Object[] { time(2010, 5, 6, 14, 29, 0), new Double(1110.50), new Double(1118.00), new Double(1110.00), new Double(1117.50), new Double(16857) }); data.add(new Object[] { time(2010, 5, 6, 14, 30, 0), new Double(1117.75), new Double(1122.00), new Double(1116.50), new Double(1121.50), new Double(17153) }); } public static List<Object[]> get(){ return data; } private static Date time(int year, int month, int day, int hour, int minute, int second) { final java.util.Calendar calendar = java.util.Calendar .getInstance(TimeZone.getTimeZone("GMT")); calendar.set(year, month - 1, day, hour, minute, second); final Date result = calendar.getTime(); return result; }}3.2. ChartColor.java
Hasil :
Reference : https://www.zkoss.org/zkdemo/chart
