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



<window apply="demo.line.SplinePlotBandsComposer">
	<charts id="chart" type="spline" title="Wind speed during two days" />
</window>

package demo.line;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.TimeZone;

import demo.util.TimeUtil;

import org.zkoss.chart.Charts;
import org.zkoss.chart.PlotBand;
import org.zkoss.chart.ScrollablePlotArea;
import org.zkoss.chart.Series;
import org.zkoss.chart.State;
import org.zkoss.chart.States;
import org.zkoss.chart.Subtitle;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.SplinePlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;

public class SplinePlotBandsComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

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

		chart.getTitle().setAlign("left");
		Subtitle subtitle = chart.getSubtitle();
		subtitle.setText("13th & 14th of June, 2022 at two locations in Vik i Sogn, Norway");
		subtitle.setAlign("left");

		ScrollablePlotArea scrollablePlotArea = chart.getScrollablePlotArea();
		scrollablePlotArea.setMinWidth(600);
		scrollablePlotArea.setScrollPositionX(1);

		chart.getXAxis().setType("datetime");
		chart.getXAxis().getLabels().setOverflow("justify");

		YAxis yAxis = chart.getYAxis();
		yAxis.setTitle("Wind speed (m/s)");
		yAxis.setMinorGridLineWidth(0);
		yAxis.setGridLineWidth(0);
		yAxis.setAlternateGridColor((String) null);

		final String LABEL_STYLE = "color: '#606060'";

		// Light air
		PlotBand plotBand1 = new PlotBand(0.3, 1.5, "rgba(68, 170, 213, 0.1)");
		plotBand1.getLabel().setText("Light air");
		plotBand1.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand1);

		// Light breeze
		PlotBand plotBand2 = new PlotBand(1.5, 3.3, "rgba(0, 0, 0, 0)");
		plotBand2.getLabel().setText("Light breeze");
		plotBand2.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand2);
		
		// Gentle breeze
		PlotBand plotBand3 = new PlotBand(3.3, 5.5, "rgba(68, 170, 213, 0.1)");
		plotBand3.getLabel().setText("Gentle breeze");
		plotBand3.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand3);
		
		// Moderate breeze
		PlotBand plotBand4 = new PlotBand(5.5, 8, "rgba(0, 0, 0, 0)");
		plotBand4.getLabel().setText("Moderate breeze");
		plotBand4.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand4);
		
		// Fresh breeze
		PlotBand plotBand5 = new PlotBand(8, 11, "rgba(68, 170, 213, 0.1)");
		plotBand5.getLabel().setText("Fresh breeze");
		plotBand5.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand5);
		
		// Strong breeze
		PlotBand plotBand6 = new PlotBand(11, 14, "rgba(0, 0, 0, 0)");
		plotBand6.getLabel().setText("Strong breeze");
		plotBand6.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand6);
		
		// High wind
		PlotBand plotBand7 = new PlotBand(14, 15, "rgba(68, 170, 213, 0.1)");
		plotBand7.getLabel().setText("High wind");
		plotBand7.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand7);
		
		chart.getTooltip().setValueSuffix(" m/s");
		
		SplinePlotOptions spline = chart.getPlotOptions().getSpline();
		spline.setLineWidth(4);
		spline.getStates().getHover().setLineWidth(5);
		spline.getMarker().setEnabled(false);
		spline.setPointInterval(3600000); // One hour
		spline.setPointStart(TimeUtil.parse("06-13-2022", "UTC"));
		
		Series series1 = chart.getSeries();
		series1.setName("Hestavollane");
		series1.setData(4.5, 5.1, 4.4, 3.7, 4.2, 3.7, 4.3, 4, 5, 4.9,
				4.8, 4.6, 3.9, 3.8, 2.7, 3.1, 2.6, 3.3, 3.8,
				4.1, 1, 1.9, 3.2, 3.8, 4.2);
		
		Series series2 = chart.getSeries(1);
		series2.setName("Vik");
		series2.setData(0.1, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.4,
				0.1, 0, 0.2, 0.3, 0, 0, 0, 0, 0, 0.1,
				0.1, 0.1, 0, 0.1, 0, 0, 0);
		chart.getNavigation().setMenuItemStyle("fontSize: '10px'");
    }
}