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



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

package demo.line;


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.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("29th of February, 2024 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 = "opacity: 0.7";

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

		// Near Gale
		PlotBand plotBand7 = new PlotBand(14, 17, "rgba(68, 170, 213, 0.1)");
		plotBand7.getLabel().setText("Near gale");
		plotBand7.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand7);

		// Fresh Gale
		PlotBand plotBand8 = new PlotBand(17, 20.5, "rgba(0, 0, 0, 0)");
		plotBand8.getLabel().setText("Fresh gale");
		plotBand8.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand8);

		// Strong Gale
		PlotBand plotBand9 = new PlotBand(20.5, 24, "rgba(68, 170, 213, 0.1)");
		plotBand9.getLabel().setText("Strong gale");
		plotBand9.getLabel().setStyle(LABEL_STYLE);
		yAxis.addPlotBand(plotBand9);

		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("2014-02-29");

		Series series1 = chart.getSeries();
		series1.setName("Hestavollane");
		series1.setData(12.9, 13.8, 10.2, 8.4, 10.0, 9.2, 10.0,
				12.2, 13.2, 12.7, 12.5, 11.4, 10.4,
				7.9, 8.0, 11.4, 11.5, 12.0, 12.0,
				10.4, 11.2, 11.5, 12.2, 11.5, 8.3);

		Series series2 = chart.getSeries(1);
		series2.setName("Vik");
		series2.setData(null, 1.3, 1.1, 0.8, 1.8, 1.7, 0.8,
				0.8, 1.0, 1.0, 1.0, 0.8, 1.4,
				1.3, 2.9, 6.1, 6.4, 6.6, 6.4,
				6.3, 5.4, 3.9, 3.0, 1.7, 1.4);
		chart.getNavigation().setMenuItemStyle("fontSize: '10px'");
    }
}