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


<window apply="demo.heatandtree.HeatmapComposer">
	<charts id="chart" type="heatmap" title="Sales per employee per weekday" />
</window>

package demo.heatandtree;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.ColorAxis;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Responsive;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.json.JavaScriptValue;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class HeatmapComposer extends SelectorComposer<Window> {
	
	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		
		YAxis yaxis = chart.getYAxis();
		ColorAxis cAxis = chart.getColorAxis();
		Legend legend = chart.getLegend();
		Series series = chart.getSeries();
		DataLabels labels = series.getDataLabels();
		
		chart.setModel(HeatmapData.getXYZModel());
		chart.setMarginTop(40);
		chart.setMarginBottom(80);
		chart.setPlotBorderWidth(1);
		chart.getXAxis().setCategories("Alexander", "Marie", "Maximilian",
				"Sophia", "Lukas", "Maria", "Leon", "Anna", "Tim", "Laura");
		yaxis.setCategories("Monday", "Tuesday", "Wednesday", "Thursday",
				"Friday");
		yaxis.setTitle("");
		yaxis.setReversed(true);

		String[] themeColors = ThemeColors.getThemeColors(Theme.DEFAULT);
		cAxis.setMin(0);
		cAxis.setMinColor("#FFFFFF");
		cAxis.setMaxColor(themeColors[0]);

		legend.setAlign("right");
		legend.setLayout("vertical");
		legend.setMargin(0);
		legend.setVerticalAlign("top");
		legend.setY(25);
		legend.setSymbolHeight(280);

		chart.getAccessibility().getPoint().setDescriptionFormatter(new JavaScriptValue(
		"function (point) {\n"
		+ "		var ix = point.index + 1,\n"
		+ " 		xName = getPointCategoryName(point, 'x'),\n"
		+ "			yName = getPointCategoryName(point, 'y'),\n"
		+ "			val = point.value;\n"
		+ "		return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';\n"
		+ "}"
		));

		chart.getTooltip().setFormatter(new JavaScriptValue("function () { return '<b>' + this.series.xAxis.categories[this.point.x]"
				+ " + '</b> sold <br><b>' + this.point.value"
				+ " + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; }"));
		series.setBorderWidth(1);

		labels.setEnabled(true);
		labels.setColor("#000000");

		Responsive.Rule rule = chart.getResponsive().getRule();
		rule.getCondition().setMaxWidth(500);
		rule.getChartOptions().getYAxis().getLabels().setFormatter(new JavaScriptValue("function () { return this.value.charAt(0); }"));

		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				chart.getColorAxis().setMaxColor(chart.getColors().get(0));
	    	}
		});
	}
}

package demo.heatandtree;

import org.zkoss.chart.model.DefaultXYZModel;
import org.zkoss.chart.model.XYZModel;

public class HeatmapData {
	private static XYZModel model;
	static {
		final Integer[][] data = { { 0, 0, 10 }, { 0, 1, 19 }, { 0, 2, 8 },
				{ 0, 3, 24 }, { 0, 4, 67 }, { 1, 0, 92 }, { 1, 1, 58 },
				{ 1, 2, 78 }, { 1, 3, 117 }, { 1, 4, 48 }, { 2, 0, 35 },
				{ 2, 1, 15 }, { 2, 2, 123 }, { 2, 3, 64 }, { 2, 4, 52 },
				{ 3, 0, 72 }, { 3, 1, 132 }, { 3, 2, 114 }, { 3, 3, 19 },
				{ 3, 4, 16 }, { 4, 0, 38 }, { 4, 1, 5 }, { 4, 2, 8 },
				{ 4, 3, 117 }, { 4, 4, 115 }, { 5, 0, 88 }, { 5, 1, 32 },
				{ 5, 2, 12 }, { 5, 3, 6 }, { 5, 4, 120 }, { 6, 0, 13 },
				{ 6, 1, 44 }, { 6, 2, 88 }, { 6, 3, 98 }, { 6, 4, 96 },
				{ 7, 0, 31 }, { 7, 1, 1 }, { 7, 2, 82 }, { 7, 3, 32 },
				{ 7, 4, 30 }, { 8, 0, 85 }, { 8, 1, 97 }, { 8, 2, 123 },
				{ 8, 3, 64 }, { 8, 4, 84 }, { 9, 0, 47 }, { 9, 1, 114 },
				{ 9, 2, 31 }, { 9, 3, 48 }, { 9, 4, 91 } };
		model = new DefaultXYZModel();
		for (Integer[] value : data) {
			model.addValue("Sales per employee", value[0], value[1], value[2]);
		}
	}
	public static XYZModel getXYZModel() {
		return model;
	}
}