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



<window apply="demo.gauges.GaugeVuMeterComposer">
	<charts id="chart" type="gauge" plotBorderWidth="1" plotBackgroundImage=""
		title="VU meter" />
	<timer id="timer" delay="500" running="true" repeats="true" />
</window>

package demo.gauges;

import java.util.ArrayList;

import org.zkoss.chart.Charts;
import org.zkoss.chart.LinearGradient;
import org.zkoss.chart.Pane;
import org.zkoss.chart.PaneBackground;
import org.zkoss.chart.PlotBand;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.GaugePlotOptions;
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 GaugeVuMeterComposer extends SelectorComposer<Window> {
	@Wire
	Charts chart;

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

		chart.setHeight(200);

		LinearGradient linearGradient = new LinearGradient(0, 0, 0, 1);
		linearGradient.addStop(0, "#FFF4C6");
		linearGradient.addStop(0.3, "#FFFFFF");
		linearGradient.addStop(1, "#FFF4C6");
		chart.setPlotBackgroundColor(linearGradient);
		Pane pane1 = chart.getPane();
		pane1.setStartAngle(-45);
		pane1.setEndAngle(45);
		pane1.setBackground(new ArrayList<PaneBackground>());
		pane1.setCenter("25%", "145%");
		pane1.setSize(300);

		Pane pane2 = chart.getPane(1);
		pane2.setStartAngle(-45);
		pane2.setEndAngle(45);
		pane2.setBackground(new ArrayList<PaneBackground>());
		pane2.setCenter("75%", "145%");
		pane2.setSize(300);

		chart.getExporting().setEnabled(false);
		chart.getTooltip().setEnabled(false);

		YAxis yAxis1 = chart.getYAxis();
		yAxis1.setMin(-20);
		yAxis1.setMax(6);
		yAxis1.setMinorTickPosition("outside");
		yAxis1.setTickPosition("outside");
		yAxis1.getLabels().setRotation("auto");
		yAxis1.getLabels().setDistance(20);

		PlotBand plotBand = new PlotBand();
		plotBand.setFrom(0);
		plotBand.setTo(6);
		plotBand.setColor("#C02316");
		plotBand.setInnerRadius("100%");
		plotBand.setOuterRadius("105%");
		yAxis1.addPlotBand(plotBand);

		yAxis1.setPane(0);
		yAxis1.setTitle("VU<br/><span style=\"font-size:8px\">Channel A</span>");
		yAxis1.getTitle().setY(-40);

		YAxis yAxis2 = chart.getYAxis(1);
		yAxis2.setMin(-20);
		yAxis2.setMax(6);
		yAxis2.setMinorTickPosition("outside");
		yAxis2.setTickPosition("outside");
		yAxis2.getLabels().setRotation("auto");
		yAxis2.getLabels().setDistance(20);
		yAxis2.addPlotBand(plotBand);

		yAxis2.setPane(1);
		yAxis2.setTitle("VU<br/><span style=\"font-size:8px\">Channel B</span>");
		yAxis2.getTitle().setY(-40);

		GaugePlotOptions plotOptions = chart.getPlotOptions().getGauge();
		plotOptions.getDataLabels().setEnabled(false);
		plotOptions.getDial().setRadius("100%");

		Series series1 = chart.getSeries();
		series1.setData(-20);
		series1.setYAxis(0);

		Series series2 = chart.getSeries(1);
		series2.setData(-20);
		series2.setYAxis(1);

	}

	// Add some life
	@Listen("onTimer = #timer")
	public void updateData() {
		Point left = chart.getSeries().getPoint(0),
				right = chart.getSeries(1).getPoint(0);
		double inc = (Math.random() - 0.5) * 3,
				leftVal = left.getY().doubleValue() + inc,
				rightVal = leftVal + inc / 3 ;
		if (leftVal < -20 || leftVal > 6) {
			leftVal = left.getY().doubleValue() - inc;
		}
		if (rightVal < -20 || rightVal > 6) {
			rightVal = leftVal;
		}
		left.update(leftVal);
		right.update(rightVal);
	}
}