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



<window apply="demo.gauges.GaugeDualComposer">
	<charts id="chart" type="gauge" alignTicks="false" plotBackgroundColor="" plotBackgroundImage=""
		plotBorderWidth="0" plotShadow="false" title="Speedometer with dual axes" 
		height="400" />
	<timer id="timer" delay="3000" running="true" repeats="true" />
</window>

package demo.gauges;

import org.zkoss.chart.Charts;
import org.zkoss.chart.LinearGradient;
import org.zkoss.chart.Pane;
import org.zkoss.chart.Series;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.json.JavaScriptValue;
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 GaugeDualComposer extends SelectorComposer<Window> {
	@Wire
	Charts chart;

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		Pane pane = chart.getPane();
		pane.setStartAngle(-150);
		pane.setEndAngle(150);

		YAxis yAxis1 = chart.getYAxis();
		yAxis1.setMin(0);
		yAxis1.setMax(200);
		yAxis1.setLineColor("#339");
		yAxis1.setTickColor("#339");
		yAxis1.setMinorTickColor("#339");
		yAxis1.setOffset(-25);
		yAxis1.setLineWidth(2);

		yAxis1.getLabels().setDistance(-20);
		yAxis1.getLabels().setRotation("auto");

		yAxis1.setTickLength(5);
		yAxis1.setMinorTickLength(5);
		yAxis1.setEndOnTick(false);

		YAxis yAxis2 = chart.getYAxis(1);
		yAxis2.setMin(0);
		yAxis2.setMax(124);
		yAxis2.setTickPosition("outside");
		yAxis2.setLineColor("#933");
		yAxis2.setLineWidth(2);
		yAxis2.setMinorTickPosition("outside");
		yAxis2.setTickColor("#933");
		yAxis2.setMinorTickColor("#933");
		yAxis2.setTickLength(5);
		yAxis2.setMinorTickLength(5);

		yAxis2.getLabels().setDistance(12);
		yAxis2.getLabels().setRotation("auto");

		yAxis2.setOffset(-20);
		yAxis2.setEndOnTick(false);

		Series series = chart.getSeries();
		series.setName("Speed");
		series.addPoint(80);
		DataLabels dataLabels = series.getDataLabels();
		dataLabels.setFormatter(new JavaScriptValue("function () { var kmh = this.y, mph = Math.round(kmh * 0.621); return '<span style=\"color:#339\">' + kmh + ' km/h</span><br/><span style=\"color:#933\">' + mph + ' mph</span>'; }"));
		LinearGradient linearGradient = new LinearGradient(0, 0, 0, 1);
		linearGradient.setStops("#DDD", "#FFF");
		dataLabels.setBackgroundColor(linearGradient);

		chart.getPlotOptions().getGauge().getTooltip().setValueSuffix(" km/h");
	}

	// Add some life
	@Listen("onTimer = #timer")
	public void updateData() {
		int inc = (int) Math.round((Math.random() - 0.5) * 20);
		int oldVal = chart.getSeries().getPoint(0).getY().intValue();
		int newVal = oldVal + inc;
		if (newVal < 0 || newVal > 200) {
			newVal = oldVal - inc;
		}
		chart.getSeries().getPoint(0).update(newVal);
	}
}