<?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;
}
}