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



<window apply="demo.area.AreaRangeLineComposer">
	<charts id="chart" title="July temperatures"/>
</window>

package demo.area;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Marker;
import org.zkoss.chart.Series;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.plotOptions.AreaRangePlotOptions;
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.Wire;
import org.zkoss.zul.Window;


public class AreaRangeLineComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

	public void doAfterCompose(Window comp) throws Exception {

		super.doAfterCompose(comp);
		
		chart.getXAxis().setType("datetime");
		chart.getYAxis().setTitle("");
		
		Tooltip tooltip = chart.getTooltip();
		tooltip.setCrosshairs(true);
		tooltip.setShared(true);
		tooltip.setValueSuffix("°C");
		
		chart.setLegend(new Legend());
		
		Series series1 = chart.getSeries();
		series1.setName("Temperature");
		for (Double[] val : AreaRangeLineData.getAverages()) {
			series1.addPoint(val[0], val[1]);
		}
		series1.setZIndex(1);
		
		final String color = chart.getColors().get(0).stringValue();
		Marker marker = series1.getMarker();
		marker.setFillColor("white");
		marker.setLineWidth(2);
		marker.setLineColor(color);
		
		Series series2 = chart.getSeries(1);
		series2.setName("Range");
		for (Double[] val : AreaRangeLineData.getRanges()) {
			series2.addPoint(val[0], val[1], val[2]);
		}
		series2.setType("arearange");
		AreaRangePlotOptions plotOptions = new AreaRangePlotOptions();
		plotOptions.setLineWidth(0);
		plotOptions.setLinkedTo(":previous");
		plotOptions.setColor(color);
		plotOptions.setFillOpacity(0.3);
		series2.setPlotOptions(plotOptions);
		series2.setIndex(0);
		
		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				final String color = chart.getColors().get(0).stringValue();
				chart.getSeries().getMarker().setLineColor(color);
				chart.getSeries(1).getPlotOptions().setColor(color);
	    	}
		});
	}
}

package demo.area;


public class AreaRangeLineData {
	private static Double[][] ranges = {
		{ 1246406400000.0, 14.3, 27.7 },
		{ 1246492800000.0, 14.5, 27.8 },
		{ 1246579200000.0, 15.5, 29.6 },
		{ 1246665600000.0, 16.7, 30.7 },
		{ 1246752000000.0, 16.5, 25.0 },
		{ 1246838400000.0, 17.8, 25.7 },
		{ 1246924800000.0, 13.5, 24.8 },
		{ 1247011200000.0, 10.5, 21.4 },
		{ 1247097600000.0, 9.2, 23.8 },
		{ 1247184000000.0, 11.6, 21.8 },
		{ 1247270400000.0, 10.7, 23.7 },
		{ 1247356800000.0, 11.0, 23.3 },
		{ 1247443200000.0, 11.6, 23.7 },
		{ 1247529600000.0, 11.8, 20.7 },
		{ 1247616000000.0, 12.6, 22.4 },
		{ 1247702400000.0, 13.6, 19.6 },
		{ 1247788800000.0, 11.4, 22.6 },
		{ 1247875200000.0, 13.2, 25.0 },
		{ 1247961600000.0, 14.2, 21.6 },
		{ 1248048000000.0, 13.1, 17.1 },
		{ 1248134400000.0, 12.2, 15.5 },
		{ 1248220800000.0, 12.0, 20.8 },
		{ 1248307200000.0, 12.0, 17.1 },
		{ 1248393600000.0, 12.7, 18.3 },
		{ 1248480000000.0, 12.4, 19.4 },
		{ 1248566400000.0, 12.6, 19.9 },
		{ 1248652800000.0, 11.9, 20.2 },
		{ 1248739200000.0, 11.0, 19.3 },
		{ 1248825600000.0, 10.8, 17.8 },
		{ 1248912000000.0, 11.8, 18.5 },
		{ 1248998400000.0, 10.8, 16.1 } },
	averages = {
		{ 1246406400000.0, 21.5 }, { 1246492800000.0, 22.1 },
		{ 1246579200000.0, 23.0 }, { 1246665600000.0, 23.8 },
		{ 1246752000000.0, 21.4 }, { 1246838400000.0, 21.3 },
		{ 1246924800000.0, 18.3 }, { 1247011200000.0, 15.4 },
		{ 1247097600000.0, 16.4 }, { 1247184000000.0, 17.7 },
		{ 1247270400000.0, 17.5 }, { 1247356800000.0, 17.6 },
		{ 1247443200000.0, 17.7 }, { 1247529600000.0, 16.8 },
		{ 1247616000000.0, 17.7 }, { 1247702400000.0, 16.3 },
		{ 1247788800000.0, 17.8 }, { 1247875200000.0, 18.1 },
		{ 1247961600000.0, 17.2 }, { 1248048000000.0, 14.4 },
		{ 1248134400000.0, 13.7 }, { 1248220800000.0, 15.7 },
		{ 1248307200000.0, 14.6 }, { 1248393600000.0, 15.3 },
		{ 1248480000000.0, 15.3 }, { 1248566400000.0, 15.8 },
		{ 1248652800000.0, 15.2 }, { 1248739200000.0, 14.8 },
		{ 1248825600000.0, 14.4 }, { 1248912000000.0, 15.0 },
		{ 1248998400000.0, 13.6 } };
	
	public static Double[][] getRanges() {
		return ranges;
	}
	
	public static Double[][] getAverages() {
		return averages;
	}
}