<?xml version="1.0" encoding="UTF-8"?>
<window apply="demo.gauges.GaugeClockComposer">
<charts id="chart" type="gauge" plotBackgroundColor="" plotBackgroundImage=""
plotBorderWidth="0" plotShadow="false" height="400" title="The ZK Charts clock" />
<timer id="timer" delay="1000" running="true" repeats="true" />
</window>
package demo.gauges;
import java.util.LinkedList;
import java.util.List;
import demo.util.TimeUtil;
import org.zkoss.chart.AxisTitle;
import org.zkoss.chart.Charts;
import org.zkoss.chart.PaneBackground;
import org.zkoss.chart.Point;
import org.zkoss.chart.RadialGradient;
import org.zkoss.chart.Series;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.GaugeDialPlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
public class GaugeClockComposer extends SelectorComposer<Window> {
@Wire
Charts chart;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
List<PaneBackground> backgrounds = new LinkedList<PaneBackground>();
// Default background
backgrounds.add(new PaneBackground());
PaneBackground background = new PaneBackground();
RadialGradient radialGradient = new RadialGradient(0.5, -0.4, 1.9);
radialGradient.addStop(0.5, "rgba(255, 255, 255, 0.2)");
radialGradient.addStop(0.5, "rgba(200, 200, 200, 0.2)");
background.setBackgroundColor(radialGradient);
backgrounds.add(background);
chart.getPane().setBackground(backgrounds);
// The value axis
YAxis yAxis = chart.getYAxis();
yAxis.getLabels().setDistance(-20);
yAxis.setMin(0);
yAxis.setMax(12);
yAxis.setLineWidth(0);
yAxis.setShowFirstLabel(false);
yAxis.setMinorTickInterval("auto");
yAxis.setMinorTickWidth(1);
yAxis.setMinorTickLength(5);
yAxis.setMinorTickPosition("inside");
yAxis.setGridLineWidth(0);
yAxis.setMinorTickColor("#666");
yAxis.setTickInterval(1);
yAxis.setTickWidth(2);
yAxis.setTickPosition("inside");
yAxis.setTickLength(10);
yAxis.setTickColor("#666");
AxisTitle title = yAxis.getTitle();
title.setText("Powered by<br/>ZK Charts");
title.setStyle("color: '#BBB'; fontWeight: 'normal'; fontSize: '8px'; lineHeight: '10px'");
title.setY(10);
chart.getTooltip().setFormat("{series.chart.tooltipText}");
Series series = chart.getSeries();
Double[] values = currentDateValue();
Point hour = new Point("hour", values[0]);
GaugeDialPlotOptions dial1 = hour.getDial();
dial1.setRadius("60%");
dial1.setBaseWidth(4);
dial1.setBaseLength("95%");
dial1.setRearLength("0");
series.addPoint(hour);
Point minute = new Point("minute", values[1]);
GaugeDialPlotOptions dial2 = minute.getDial();
dial2.setBaseLength("95%");
dial2.setRearLength("0");
series.addPoint(minute);
Point second = new Point("second", values[2]);
GaugeDialPlotOptions dial3 = second.getDial();
dial3.setRadius("100%");
dial3.setBaseWidth(1);
dial3.setRearLength("20%");
series.addPoint(second);
series.getPlotOptions().setAnimation(false);
series.getDataLabels().setEnabled(false);
}
// Move
@Listen("onTimer = #timer")
public void updateData() {
Double[] value = currentDateValue();
for (int i = 0; i < value.length; i ++) {
chart.getSeries().getPoint(i).update(value[i]);
}
}
private Double[] currentDateValue() {
double hours = TimeUtil.getHour(),
minutes = TimeUtil.getMinute(),
seconds = TimeUtil.getSecond();
Double[] result = new Double[3];
result[0] = hours + minutes / 60;
result[1] = minutes * 12 / 60 + seconds * 12 / 3600;
result[2] = seconds * 12 / 60;
return result;
}
}