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



<window apply="demo.scatter.BubbleComposer">
	<charts id="chart" type="bubble" plotBorderWidth="1" zoomType="xy" title="Sugar and fat intake per country"/>
</window>

package demo.scatter;

import org.zkoss.chart.Charts;
import org.zkoss.chart.PlotLabel;
import org.zkoss.chart.PlotLine;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.model.DefaultXYZModel;
import org.zkoss.chart.model.XYZModel;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
import org.zkoss.chart.util.AnyVal;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class BubbleComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

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

		chart.getLegend().setEnabled(false);

		chart.setSubtitle("Source: <a href=\"http://www.euromonitor.com/\">Euromonitor</a> and <a href=\"https://data.oecd.org/\">OECD</a>");

		chart.getAccessibility().getPoint().setValueDescriptionFormat("{index}. {point.name}, fat: {point.x}g, sugar: {point.y}g, obesity: {point.z}%.");

		XAxis xAxis = chart.getXAxis();
		xAxis.setGridLineWidth(1);
		xAxis.setTitle("Daily fat intake");
		xAxis.getLabels().setFormat("{value} gr");
		PlotLine plotLine = new PlotLine();
		plotLine.setColor("black");
		plotLine.setDashStyle("dot");
		plotLine.setWidth(2);
		plotLine.setValue(65);
		PlotLabel label = plotLine.getLabel();
		label.setRotation(0);
		label.setY(15);
		label.setStyle("fontStyle: 'italic'");
		label.setText("Safe fat intake 65g/day");
		plotLine.setZIndex(3);
		xAxis.addPlotLine(plotLine);
		xAxis.getAccessibility().setRangeDescription("Range: 60 to 100 grams.");

		YAxis yAxis = chart.getYAxis();
		yAxis.setStartOnTick(false);
		yAxis.setEndOnTick(false);
		yAxis.setTitle("Daily sugar intake");
		yAxis.getLabels().setFormat("{value} gr");
		yAxis.setMaxPadding(0.2);
		PlotLine yPlotLine = new PlotLine();
		yPlotLine.setColor("black");
		yPlotLine.setDashStyle("dot");
		yPlotLine.setWidth(2);
		yPlotLine.setValue(50);
		PlotLabel yLabel = yPlotLine.getLabel();
		yLabel.setAlign("right");
		yLabel.setStyle("fontStyle: 'italic'");
		yLabel.setText("Safe sugar intake 50g/day");
		yLabel.setX(-10);
		yPlotLine.setZIndex(3);
		yAxis.addPlotLine(yPlotLine);
		yAxis.getAccessibility().setRangeDescription("Range: 0 to 160 grams.");

		Tooltip tooltip = chart.getTooltip();
		tooltip.setUseHTML(true);
		tooltip.setHeaderFormat("<table>");
		tooltip.setPointFormat("<tr><th colspan=\"2\"><h3>{point.country}</h3></th></tr>" +
				"<tr><th>Fat intake:</th><td>{point.x}g</td></tr>" +
				"<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>" +
				"<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>"
				);
		tooltip.setFooterFormat("</table>");
		tooltip.setFollowPointer(true);

		SeriesPlotOptions seriesPlotOptions = chart.getPlotOptions().getSeries();
		DataLabels dataLabels = seriesPlotOptions.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setFormat("{point.name}");

		Series series = chart.getSeries();
		series.setData(initPoint(95, 95, 13.8, "BE", "Belgium"),
				initPoint(86.5, 102.9, 14.7, "DE", "Germany"),
				initPoint(80.8, 91.5, 15.8, "FI", "Finland"),
				initPoint(80.4, 102.5, 12, "NL", "Netherlands"),
				initPoint(80.3, 86.1, 11.8, "SE", "Sweden"),
				initPoint(78.4, 70.1, 16.6, "ES", "Spain"),
				initPoint(74.2, 68.5, 14.5, "FR", "France"),
				initPoint(73.5, 83.1, 10, "NO", "Norway"),
				initPoint(71, 93.2, 24.7, "UK", "United Kingdom"),
				initPoint(69.2, 57.6, 10.4, "IT", "Italy"),
				initPoint(68.6, 20, 16, "RU", "Russia"),
				initPoint(65.5, 126.4, 35.3, "US", "United States"),
				initPoint(65.4, 50.8, 28.5, "HU", "Hungary"),
				initPoint(63.4, 51.8, 15.4, "PT", "Portugal"),
				initPoint(64, 82.9, 31.3, "NZ", "New Zealand"));
	}
	private Point initPoint(Number x, Number y, Number z, String name, String country) {
		Point point = Point.ofXYZ(x, y, z);
		point.setName(name);
		point.addExtraAttr("country", new AnyVal<String>(country));
		return point;
	}
}