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



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

package demo.area;

import demo.util.TimeUtil;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Color;
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.chart.plotOptions.SeriesPlotOptions;
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.setSubtitle("Source: " +
				"<a href=\"https://www.yr.no/nb/historikk/graf/1-113585/Norge/Viken/Nesbyen/Nesbyen?q=2022-07\"" +
				"target=\"_blank\">YR</a>");
		
		chart.getXAxis().setType("datetime");
		chart.getXAxis().getAccessibility().setRangeDescription("Range: Jul 1st 2022 to Jul 31st 2022.");
		chart.getYAxis().setTitle("");
		
		Tooltip tooltip = chart.getTooltip();
		tooltip.setCrosshairs(true);
		tooltip.setShared(true);
		tooltip.setValueSuffix("°C");

		SeriesPlotOptions series = chart.getPlotOptions().getSeries();
		series.setPointStart(TimeUtil.getUTCDate(2022, 6, 1));
		series.setPointIntervalUnit("day");

		Series series1 = chart.getSeries();
		series1.setName("Temperature");
		for (Double[] val : AreaRangeLineData.getAverages()) {
			series1.addPoint(val[0]);
		}
		series1.setZIndex(1);
		
		final Color color = chart.getColors().get(0);
		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]);
		}
		series2.setType("arearange");
		series2.setLineWidth(0);
		series2.setLinkedTo(":previous");
		series2.setColor(color);
		series2.setFillOpacity(0.3);
		series2.getMarker().setEnabled(false);
		series2.setZIndex(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 = {
			{13.7, 25.6},
			{13.3, 21.8},
			{11.2, 19.9},
			{7.9, 17.3},
			{4.9, 20.6},
			{5.1, 16.8},
			{9.3, 21.1},
			{11.1, 20.5},
			{8.9, 18.4},
			{4.6, 23.2},
			{11.5, 26.0},
			{8.6, 23.4},
			{9.8, 22.2},
			{8.1, 18.2},
			{5.9, 20.2},
			{4.5, 20.2},
			{8.9, 19.8},
			{11.1, 22.1},
			{7.9, 26.7},
			{15.9, 28.6},
			{14.9, 27.5},
			{9.5, 26.0},
			{11.5, 22.4},
			{8.6, 21.1},
			{12.9, 21.7},
			{13.6, 20.9},
			{9.6, 23.9},
			{8.6, 22.7},
			{7.5, 25.7},
			{5.5, 24.3},
			{10.4, 21.2} },
	averages = {
			{18.1},
			{17.1},
			{15.2},
			{12.7},
			{13.3},
			{10.6},
			{15.6},
			{16.1},
			{14.0},
			{15.3},
			{17.5},
			{17.5},
			{15.3},
			{13.9},
			{13.7},
			{13.8},
			{14.0},
			{15.8},
			{18.6},
			{21.5},
			{19.8},
			{17.6},
			{16.8},
			{15.6},
			{16.7},
			{16.3},
			{17.2},
			{16.0},
			{16.9},
			{16.1},
			{14.5}};
	
	public static Double[][] getRanges() {
		return ranges;
	}
	
	public static Double[][] getAverages() {
		return averages;
	}
}