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


<window apply="demo.more.BoxPlotComposer">
	<charts id="chart" type="boxplot" title="Highcharts Box Plot Example"/>
</window>

package demo.more;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Marker;
import org.zkoss.chart.PlotLabel;
import org.zkoss.chart.PlotLine;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class BoxPlotComposer extends SelectorComposer<Window> {
	
	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		
		chart.getLegend().setEnabled(false);
		
		XAxis xAxis = chart.getXAxis();
		xAxis.setCategories("1", "2", "3", "4", "5");
		xAxis.setTitle("Experiment No.");
		
		YAxis yAxis = chart.getYAxis();
		yAxis.setTitle("Observations");
		PlotLine plotLine = new PlotLine();
		plotLine.setValue(932);
		plotLine.setColor("red");
		plotLine.setWidth(1);
		PlotLabel plotLineLabel = plotLine.getLabel();
		plotLineLabel.setText("Theoretical mean: 932");
		plotLineLabel.setAlign("center");
		plotLineLabel.setStyle("color: gray;");
		yAxis.setPlotLines(plotLine);
		
		Series series0 = chart.getSeries(0);
		series0.setName("Observations");
		series0.setData(Point.of(760, 801, 848, 895, 965),
				Point.of(733, 853, 939, 980, 1080),
				Point.of(714, 762, 817, 870, 918),
				Point.of(724, 802, 806, 871, 950),
				Point.of(834, 836, 864, 882, 910));
		series0.getTooltip().setHeaderFormat("<em>Experiment No. {point.key}</em><br/>");

		String themeColor = ThemeColors.getThemeColors(Theme.DEFAULT)[1];
		series0.setColor(themeColor);
		Series series1 = chart.getSeries(1);
		series1.setName("Outlier");
		series1.setColor(themeColor);
		series1.setType("scatter");
		series1.setData(Point.of(0, 644), Point.of(4, 718), Point.of(4, 951),
				Point.of(4, 969));
		Marker series1Marker = series1.getMarker();
		series1Marker.setFillColor("white");
		series1Marker.setLineWidth(1);
		series1Marker.setLineColor(themeColor);

		series1.getTooltip().setPointFormat("Observation: {point.y}");
	}
}