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


<window apply="demo.gauges.SolidGaugeComposer">
	<style>
		.mmm { 
			white-space: normal;
		}
		.mmm > div {
			width: 300px;
			height: 200px;
			display: inline-block;
		}
	</style>
	<div sclass="mmm">
		<charts id="speedChart" type="solidgauge" title="" />
		<charts id="rmpChart" type="solidgauge" title="" />
	</div>
	<timer id="timer" delay="2000" running="true" repeats="true" />
</window>

package demo.gauges;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Pane;
import org.zkoss.chart.PaneBackground;
import org.zkoss.chart.Series;
import org.zkoss.chart.Stop;
import org.zkoss.chart.Theme;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.chart.plotOptions.PlotOptions;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
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 SolidGaugeComposer extends SelectorComposer<Window> {
	
	@Wire
	Charts speedChart;	
	
	@Wire
	Charts rmpChart;
	
	EventListener themeChangeListener = new EventListener() {
    	public void onEvent(Event event) throws Exception {
    		Component target = event.getTarget();
    		if (target instanceof Charts) {
    			Charts chart =(Charts) target;
    			setDatalabelsFormat(chart);
    		}
    	}
    };
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		initSpeedChart();
		initRmpChart();
		speedChart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, themeChangeListener);
		rmpChart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, themeChangeListener);
	}
	
	public Charts initChart(Charts chart) {
		Pane pane = chart.getPane();
		Tooltip tooltip = chart.getTooltip();
		YAxis yaxis = chart.getYAxis();
		PlotOptions options = chart.getPlotOptions();
		Series s0 = chart.getSeries(0);
		pane = initGaugePane(pane);
		yaxis = initYAxis(yaxis);
		options = initPlotOptions(options);
		chart.getExporting().setEnabled(false);
		tooltip.setEnabled(false);
		
		return chart;
	}
	
	public void initSpeedChart() {
		speedChart = initChart(speedChart);
		YAxis yaxis = speedChart.getYAxis();
		Series s0 = speedChart.getSeries();
		Tooltip tooltip = speedChart.getTooltip();
		
		yaxis.setMin(0);
		yaxis.setMax(200);
		yaxis.setTitle("speed");
		
		speedChart.getCredits().setEnabled(false);
		s0.setName("Speed");
		s0.setData(new Integer[] {80});
		setDatalabelsFormat(speedChart);
		
		tooltip.setValueSuffix("km/h");
	}
	
	public void initRmpChart() {
		rmpChart = initChart(rmpChart);
		YAxis yaxis = rmpChart.getYAxis();
		Series s0 = rmpChart.getSeries();
		Tooltip tooltip = rmpChart.getTooltip();
		
		yaxis.setMin(0);
		yaxis.setMax(5);
		yaxis.setTitle("RPM");
		
		s0.setName("RPM");
		s0.setData(new Double[] {1.0});
		setDatalabelsFormat(rmpChart);
		tooltip.setValueSuffix("revolutions/min");
	}
	
	public Pane initGaugePane(Pane pane) {
		PaneBackground b0 = new PaneBackground();
		List backgrounds = new ArrayList();
		pane.setCenter(new String[] {"50%", "85%"});
		pane.setSize("140%");
		pane.setStartAngle(-90);
		pane.setEndAngle(90);
		
		b0.setBackgroundColor("#EEE");
		b0.setInnerRadius("60%");
		b0.setOuterRadius("100%");
		b0.setShape("arc");
		backgrounds.add(b0);
		
		pane.setBackground(backgrounds);
		return pane;
	}
	
	public YAxis initYAxis(YAxis yaxis) {
		yaxis.setStops(
//				new Stop(0.1, "#558F3B"),
				new Stop(0.1, "rgba(255,0,0,0.4)"),
				new Stop(0.5, "#DDDF0D"),
				new Stop(0.9, "#DF5353")
		);
		yaxis.setLineWidth(0);
		yaxis.setMinorTickInterval((String) null);
		yaxis.setTickPixelInterval(400);
		yaxis.setMinorTickWidth(0);
		yaxis.setTickWidth(0);
		yaxis.getTitle().setY(-70);
		yaxis.getLabels().setY(16);
		
		return yaxis;
	}
	
	public PlotOptions initPlotOptions(PlotOptions options) {
		DataLabels labels = options.getSolidGauge().getDataLabels();
		labels.setY(5);
		labels.setBorderWidth(0);
		labels.setUseHTML(true);
		
		return options;
	}
	
	public int getRandomInt(int min, int max) {
		int range = max - min + 1;
		return (int) (min + Math.floor(Math.random() * range));
	}
	
	public void setDatalabelsFormat(Charts chart) {
		Theme theme = chart.getTheme();
		String format = "";
		String titleColor = (Theme.DARK_UNICA.equals(theme) || Theme.DARK_BLUE.equals(theme) 
				|| Theme.DARK_GREEN.equals(theme) || Theme.GRAY.equals(theme)) ? "white" : "black";
		
		if (chart.getId().equals("speedChart")) {
			format = "<div style='text-align:center'><span style='font-size:25px;color:"
					+ titleColor + "'>{y}</span><br/>" 
					+ "<span style='font-size:12px;color:silver'>km/h</span></div>";
		} else if (chart.getId().equals("rmpChart")) {
			format = "<div style='text-align:center'><span style='font-size:25px;color:"
					+ titleColor + "'>{y:.1f}</span><br/>"
					+ "<span style='font-size:12px;color:silver'>* 1000 / min</span></div>";
		}
		
		if (!format.equals("")) {
			chart.getSeries().getDataLabels().setFormat(format);
		}
	}
	
	// Add some life
    @Listen("onTimer = #timer")
    public void updateData() {
        int inc = (int) Math.round((Math.random() - 0.5) * 40);
        int oldSpeed = speedChart.getSeries().getPoint(0).getY().intValue();
        int newSpeed = oldSpeed + inc;
        if (newSpeed < 0 || newSpeed > 200) {
        	newSpeed = oldSpeed - inc;
        }
        
        double dub = Math.random() - 0.5;
        double oldRmp = rmpChart.getSeries().getPoint(0).getY().doubleValue();
        double newRmp = oldRmp + dub;
        if (newRmp < 0 || newRmp > 5) {
        	newRmp = oldRmp - dub;
        }
        
    	speedChart.getSeries().setData(new Integer[] {newSpeed});
    	rmpChart.getSeries().setData(new Double[] {newRmp});
    }
}