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



<window apply="demo.gauges.GaugeSpeedometerComposer">
	<charts id="chart" type="gauge" plotBackgroundColor="" plotBackgroundImage=""
		plotBorderWidth="0" plotShadow="false" height="80%" title="Speedometer" />
	<timer id="timer" delay="3000" running="true" repeats="true" />
</window>

package demo.gauges;

import java.util.List;

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

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

		Pane pane = chart.getPane();
		pane.setStartAngle(-90);
		pane.setEndAngle(89.9);
		PaneBackground background = new PaneBackground();
		background.setOuterRadius("0%");
		pane.setBackground(List.of(background));
		pane.setCenter("50%", "75%");
		pane.setSize("110%");

		YAxis yAxis = chart.getYAxis();
		yAxis.setMin(0);
		yAxis.setMax(200);
		yAxis.setTickPixelInterval(72);
		yAxis.setTickPosition("inside");
		yAxis.setTickColor("var(--highcharts-background-color, #FFFFFF)");
		yAxis.setTickLength(20);
		yAxis.setTickWidth(2);
		yAxis.setMinorTickInterval("");
		yAxis.getLabels().setDistance(20);
		yAxis.getLabels().setStyle("fontSize: '14px'");
		yAxis.setLineWidth(0);

		PlotBand[] plotBands = new PlotBand[] {new PlotBand(), new PlotBand(), new PlotBand()};
		plotBands[0].setFrom(0);
		plotBands[0].setTo(120);
		plotBands[0].setColor("#55BF3B");
		plotBands[0].setThickness(20);
		plotBands[0].setBorderRadius("50%");
		plotBands[1].setFrom(120);
		plotBands[1].setTo(160);
		plotBands[1].setColor("#DDDF0D");
		plotBands[1].setThickness(20);
		plotBands[1].setBorderRadius("50%");
		plotBands[2].setFrom(160);
		plotBands[2].setTo(200);
		plotBands[2].setColor("#DF5353");
		plotBands[2].setThickness(20);
		plotBands[2].setBorderRadius("50%");
		yAxis.setPlotBands(plotBands);

		Series series = chart.getSeries();
		series.setName("Speed");
		series.setData(80);
		series.getTooltip().setValueSuffix(" km/h");

		DataLabels dataLabels = series.getDataLabels();
		dataLabels.setFormat("{y} km/h");
		dataLabels.setBorderWidth(0);
		dataLabels.setColor("#333333");
		dataLabels.setStyle("fontSize: '16px'");

		GaugeDialPlotOptions dial = series.getDial();
		dial.setRadius("80%");
		dial.setBackgroundColor("gray");
		dial.setBaseWidth(12);
		dial.setBaseLength("0%");
		dial.setRearLength("0%");

		series.getPivot().setBackgroundColor("gray");
		series.getPivot().setRadius(6);
	}

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