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



<window apply="demo.scatter.ScatterComposer">
	<charts id="chart" type="scatter" zoomType="xy"
		title="Olympics athletes by height and weight"/>
</window>

package demo.scatter;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class ScatterComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.getTitle().setAlign("left");
		chart.setSubtitle("Source: <a href=\"https://www.theguardian.com/sport/datablog/2012/aug/07/olympics-2012-athletes-age-weight-height\">The Guardian</a>");
		chart.getSubtitle().setAlign("left");

		chart.getXAxis().setTitle("Height");
		chart.getXAxis().getLabels().setFormat("{value} m");
		chart.getXAxis().setStartOnTick(true);
		chart.getXAxis().setEndOnTick(true);
		chart.getXAxis().setShowLastLabel(true);

		chart.getYAxis().setTitle("Weight");
		chart.getYAxis().getLabels().setFormat("{value} kg");

		chart.getLegend().setEnabled(true);

		chart.getPlotOptions().getScatter().getMarker().setRadius(2.5);
		chart.getPlotOptions().getScatter().getMarker().setSymbol("circle");
		chart.getPlotOptions().getScatter().getMarker().getStates().getHover().setEnabled(true);
		chart.getPlotOptions().getScatter().getMarker().getStates().getHover().setLineColor("rgb(100,100,100");

		chart.getPlotOptions().getScatter().getStates().getHover().getMarker().setEnabled(false);

		chart.getPlotOptions().getScatter().getJitter().setX(0.005);

		chart.getTooltip().setPointFormat("Height: {point.x} m <br/> Weight: {point.y} kg");

		initSeries();
	}
	private void initSeries() {
		Series series1 = chart.getSeries();
		series1.setName("Basketball");
		series1.setId("basketball");
		series1.getMarker().setSymbol("circle");
		series1.setColor("rgba(5,141,199,0.5)");
		for (Number[] value : ScatterData.getBasketball()) {
			series1.addPoint(value[0], value[1]);
		}

		Series series2 = chart.getSeries(1);
		series2.setName("Triathlon");
		series2.setId("triathlon");
		series2.getMarker().setSymbol("triangle");
		series2.setColor("rgba(80,180,50,0.5)");
		for (Number[] value : ScatterData.getTriathlon()) {
			series2.addPoint(value[0], value[1]);
		}

		Series series3 = chart.getSeries(2);
		series3.setName("Volleyball");
		series3.setId("volleyball");
		series3.getMarker().setSymbol("square");
		series3.setColor("rgba(237,86,27,0.5)");
		for (Number[] value : ScatterData.getVolleyball()) {
			series3.addPoint(value[0], value[1]);
		}
	}
}

package demo.scatter;

import java.io.BufferedInputStream;
import java.io.IOException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import org.zkoss.io.Files;
import org.zkoss.json.JSONArray;
import org.zkoss.json.JSONObject;
import org.zkoss.json.JSONValue;


public class ScatterData {
	static List<Number[]> basketballData = new ArrayList<>(),
			triathlonData = new ArrayList<>(),
			volleyballData = new ArrayList<>();

	static {
		try {
			JSONArray array = (JSONArray) JSONValue.parse(new String(
					Files.readAll(new BufferedInputStream(
							new URL("https://cdn.jsdelivr.net/gh/highcharts/highcharts@24912efc85/samples/data/olympic2012.json").openStream()))));
			for (Object a : array) {
				JSONObject data = (JSONObject) a;
				String sport = (String) data.get("sport");
				Number height = (Number) data.get("height"),
						weight = (Number) data.get("weight");
				if (!height.equals((Number) 0) && !weight.equals((Number) 0)) {
					if ("basketball".equals(sport))
						basketballData.add(new Number[]{height, weight});
					else if ("triathlon".equals(sport))
						triathlonData.add(new Number[]{height, weight});
					else if ("volleyball".equals(sport))
						volleyballData.add(new Number[]{height, weight});
				}
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	static public List<Number[]> getBasketball() {
		return basketballData;
	}
	static public List<Number[]> getTriathlon() {
		return triathlonData;
	}
	static public List<Number[]> getVolleyball() {
		return volleyballData;
	}
}