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


<window apply="demo.area.AreaSparklineComposer">
	<style>
		.z-row-content {
			overflow: visible;
		}
	</style>
	<grid id="data" model="${$composer.lma}">
		<columns>
			<column label="State" hflex="2"/> 
			<column label="Income" hflex="1"/>
			<column label="Income per quarter" hflex="2"/>
			<column label="Costs" hflex="1"/>
			<column label="Costs per quater" hflex="2"/>
			<column label="Result" hflex="1"/>
			<column label="Result per quarter" hflex="2"/>
		</columns>
		<template name="model">
			<row style="overflow:visible">
				<label value="${each[0]}" />
				<label value="${each[1]}" />
				<charts id="Income${forEachStatus.index}" onCreate="$composer.onChartsCreate(self)" type="area" />
				<label value="${each[2]}" />
				<charts id="Cost${forEachStatus.index}" onCreate="$composer.onChartsCreate(self)" type="area" />
				<label value="${each[3]}" />
				<charts id="Result${forEachStatus.index}" onCreate="$composer.onChartsCreate(self)" type="column" />
			</row>
		</template>
	</grid>
	<popup id="anchor" width="0" height="0">
		<window id="msgBox" border="normal" position="parent" mode="popup">
			<vlayout>
				<label id="header" style="margin: auto" />
				<hlayout style="margin: auto">
					<label id="point" style="font-weight: bold;" />
					<label id="usd" value=" USD" />
				</hlayout>
			</vlayout>
		</window>
	</popup>
</window>

package demo.area;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvent;
import org.zkoss.chart.Marker;
import org.zkoss.chart.Point;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.ColumnPlotOptions;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Label;
import org.zkoss.zul.ListModelArray;
import org.zkoss.zul.Popup;
import org.zkoss.zul.Window;


public class AreaSparklineComposer extends SelectorComposer<Window> {
	
	@Wire
	Popup anchor;
	
	@Wire
	Window msgBox;
	
	public ListModelArray lma = new ListModelArray(initModel());
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		anchor.setZindex(100000);
	}
	
	public void onChartsCreate(Charts chart) {
		int index = -1;
		String id = chart.getId();
		chart = initDefaultOptions(chart);
		if (id.startsWith("Income")) {
			index = new Integer(id.substring(6));
			chart.getSeries().setData(convertToList(AreaSparklineData.INCOME_DATAS[index]));
		} else if (id.startsWith("Cost")) {
			index = new Integer(id.substring(4));
			chart.getSeries().setData(convertToList(AreaSparklineData.COST_DATAS[index]));
		} else if (id.startsWith("Result")) {
			index = new Integer(id.substring(6));
			chart.getSeries().setData(convertToList(AreaSparklineData.RESULT_DATAS[index]));
		}
	}
	
	private static String getHeaderFormat(int index) {
		return "<span>" +  AreaSparklineData.STATES[index] + ", Q{point.x }" + " <b>${point.y} USD</b><br/></span>";
	}
	
	private Charts initDefaultOptions(Charts chart) {
		XAxis xaxis = new XAxis();
		YAxis yaxis = new YAxis();
		List<Number> pos = new ArrayList<Number>();
		chart.setBorderWidth(0);
		chart.setMargin(new Integer[] {2, 0, 2, 0});
		chart.setHeight(20);
		chart.setStyle("overflow:visible");
		chart.setTitle("");
		chart.getCredits().setEnabled(false);
		chart.getExporting().setEnabled(false);
		
		xaxis.getLabels().setEnabled(false);
		xaxis.setTitle("");
		xaxis.setStartOnTick(false);
		xaxis.setEndOnTick(false);
		xaxis.setTickPosition("outside");
		chart.setXAxis(xaxis);
		yaxis.setEndOnTick(false);
		yaxis.setStartOnTick(false);
		yaxis.getLabels().setEnabled(false);
		yaxis.setTitle("");
		pos.add(0);
		yaxis.setTickPositions(pos);
		chart.setYAxis(yaxis);
		chart.getLegend().setEnabled(false);
		Tooltip tooltip = chart.getTooltip();
		tooltip.setEnabled(false);
		
		SeriesPlotOptions seriesOpt = chart.getPlotOptions().getSeries();
		seriesOpt.setAnimation(false);
		seriesOpt.setLineWidth(1);
		seriesOpt.setShadow(false);
		seriesOpt.setPointStart(1);
		seriesOpt.getStates().getHover().setLineWidth(1);
		
		Marker marker = seriesOpt.getMarker();
		marker.setRadius(1);
		marker.getStates().getHover().setRadius(2);
		
		chart.getPlotOptions().getArea().setFillOpacity(0.25);
		
		ColumnPlotOptions colOpt = chart.getPlotOptions().getColumn();
		colOpt.setNegativeColor("#910000");
		colOpt.setBorderColor("silver");
		return chart;
	}
	
	private List<String[]> initModel() {
		List<String[]> result = new ArrayList<String[]>();
		String[] states = AreaSparklineData.STATES;
		int[] incomes = AreaSparklineData.INCOMES;
		int[] costs = AreaSparklineData.COSTS;
		int length = states.length;
		String incomeStr = "";
		String costStr = "";
		String resultStr = "";
		
		for (int i = 0; i < length; i++) {
			incomeStr = new Integer(incomes[i]).toString();
			costStr = new Integer(costs[i]).toString();
			resultStr = new Integer(incomes[i] - costs[i]).toString();
			String[] temp = new String[] {
					states[i], incomeStr, costStr, resultStr
			};
			result.add(temp);
		}
		return result;
	}
	
	@Listen("onPlotMouseOverPoint = charts")
	public void showMessage(ChartsEvent event) {
		Charts target = (Charts) event.getTarget();
		Point pt = event.getPoint();
		String id = target.getId();
		int index = (id.startsWith("Income") || id.startsWith("Result")) ? new Integer(id.substring(6)) : new Integer(id.substring(4));
		Label header = (Label) msgBox.getFellow("header");
		Label point = (Label) msgBox.getFellow("point");
		anchor.open(target, "at_pointer");
		msgBox.setTop(anchor.getTop());
		msgBox.setLeft(anchor.getLeft());
		msgBox.setVisible(true);
		header.setValue(AreaSparklineData.STATES[index] + ", Q" + (event.getPointIndex() + 1) + ":");
		point.setValue(pt.getY().toString() + ".0000");
	}
	
	@Listen("onPlotMouseOutPoint = charts")
	public void doPlotMouseOut(ChartsEvent event) {
		msgBox.setVisible(false);
		event.stopPropagation();
	}
	
	@SuppressWarnings({ "rawtypes", "unchecked" })
	public static List<Number> convertToList(int[] array) {
		List result = new ArrayList();
		for (int i = 0; i < array.length; i++) {
			result.add(array[i]);
		}
		return result;
	}

	public ListModelArray getLma() {
		return lma;
	}

	public void setLma(ListModelArray lma) {
		this.lma = lma;
	}
}

package demo.area;

public class AreaSparklineData {

	public final static String[] STATES = new String[] { "Alabama ", "Alaska ",
			"Arizona ", "Arkansas ", "California ", "Colorado ",
			"Connecticut ", "Delaware ", "District of Columbia ", "Florida ",
			"Georgia ", "Hawaii ", "Idaho ", "Illinois ", "Indiana ", "Iowa ",
			"Kansas ", "Kentucky ", "Louisiana ", "Maine ", "Maryland ",
			"Massachusetts ", "Michigan ", "Minnesota ", "Mississippi ",
			"Missouri ", "Montana ", "Nebraska ", "Nevada ", "New Hampshire ",
			"New Jersey ", "New Mexico ", "New York ", "North Carolina ",
			"North Dakota ", "Ohio ", "Oklahoma ", "Oregon ", "Pennsylvania ",
			"Rhode Island ", "South Carolina ", "South Dakota ", "Tennessee ",
			"Texas ", "Utah ", "Vermont ", "Virginia ", "Washington ",
			"West Virginia ", "Wisconsin ", "Wyoming " };

	public final static int[] INCOMES = { 254, 246, 101, 303, 200, 118, 201,
			161, 106, 249, 183, 232, 166, 336, 216, 135, 184, 289, 257, 194,
			204, 172, 177, 99, 205, 135, 195, 286, 221, 136, 194, 207, 316,
			175, 181, 189, 188, 165, 268, 164, 91, 184, 233, 211, 362, 119,
			127, 165, 248, 183, 231 };

	public final static int[] COSTS = { 296, 181, 191, 76, 217, 273, 148, 298,
			185, 244, 212, 172, 152, 151, 216, 159, 215, 219, 201, 133, 157,
			115, 185, 137, 179, 202, 237, 232, 214, 306, 147, 261, 193, 188,
			288, 163, 172, 257, 129, 182, 193, 221, 131, 225, 225, 152, 71,
			245, 171, 224, 251 };

	public final static int[][] INCOME_DATAS = { { 71, 78, 39, 66 },
			{ 87, 44, 74, 41 }, { 56, 12, 8, 25 }, { 81, 50, 78, 94 },
			{ 61, 80, 10, 49 }, { 13, 48, 21, 36 }, { 6, 64, 44, 87 },
			{ 7, 27, 49, 78 }, { 18, 39, 27, 22 }, { 51, 24, 90, 84 },
			{ 36, 80, 39, 28 }, { 73, 34, 74, 51 }, { 25, 43, 31, 67 },
			{ 56, 84, 98, 98 }, { 52, 87, 64, 13 }, { 41, 45, 19, 30 },
			{ 52, 43, 65, 24 }, { 85, 74, 98, 32 }, { 89, 18, 87, 63 },
			{ 17, 68, 61, 48 }, { 74, 12, 74, 44 }, { 44, 35, 69, 24 },
			{ 99, 26, 13, 39 }, { 34, 30, 16, 19 }, { 38, 75, 31, 61 },
			{ 37, 48, 2, 48 }, { 48, 81, 38, 28 }, { 98, 55, 82, 51 },
			{ 66, 4, 57, 94 }, { 32, 21, 1, 82 }, { 31, 40, 24, 99 },
			{ 66, 93, 18, 30 }, { 48, 95, 76, 97 }, { 31, 71, 2, 71 },
			{ 3, 90, 62, 26 }, { 70, 50, 6, 63 }, { 66, 46, 53, 23 },
			{ 82, 31, 38, 14 }, { 33, 88, 82, 65 }, { 8, 86, 32, 38 },
			{ 24, 18, 0, 49 }, { 73, 17, 64, 30 }, { 92, 24, 25, 92 },
			{ 33, 80, 68, 30 }, { 89, 98, 96, 79 }, { 4, 19, 56, 40 },
			{ 24, 27, 41, 35 }, { 40, 11, 63, 51 }, { 66, 56, 97, 29 },
			{ 24, 55, 21, 83 }, { 52, 49, 97, 33 } };

	public final static int[][] COST_DATAS = { { 68, 52, 80, 96 },
			{ 29, 54, 73, 25 }, { 69, 14, 53, 55 }, { 36, 15, 14, 11 },
			{ 100, 8, 52, 57 }, { 98, 86, 8, 81 }, { 60, 13, 73, 2 },
			{ 19, 90, 100, 89 }, { 62, 97, 24, 2 }, { 47, 40, 74, 83 },
			{ 43, 25, 52, 92 }, { 1, 83, 49, 39 }, { 30, 30, 75, 17 },
			{ 61, 12, 77, 1 }, { 2, 47, 94, 73 }, { 17, 34, 45, 63 },
			{ 20, 42, 97, 56 }, { 37, 38, 93, 51 }, { 19, 54, 35, 93 },
			{ 44, 35, 42, 12 }, { 65, 58, 22, 12 }, { 26, 3, 69, 17 },
			{ 20, 37, 99, 29 }, { 49, 43, 24, 21 }, { 0, 68, 100, 11 },
			{ 41, 64, 17, 80 }, { 44, 33, 86, 74 }, { 89, 54, 28, 61 },
			{ 59, 39, 94, 22 }, { 88, 85, 65, 68 }, { 7, 45, 12, 83 },
			{ 97, 28, 79, 57 }, { 68, 5, 97, 23 }, { 93, 5, 81, 9 },
			{ 70, 63, 82, 73 }, { 21, 94, 4, 44 }, { 26, 25, 35, 86 },
			{ 91, 9, 80, 77 }, { 30, 29, 41, 29 }, { 88, 8, 18, 68 },
			{ 72, 62, 21, 38 }, { 21, 91, 57, 52 }, { 5, 18, 42, 66 },
			{ 86, 58, 36, 45 }, { 35, 51, 88, 51 }, { 17, 66, 27, 42 },
			{ 30, 2, 36, 3 }, { 46, 41, 94, 64 }, { 65, 53, 37, 16 },
			{ 80, 64, 13, 67 }, { 96, 50, 23, 82 } };

	public final static int[][] RESULT_DATAS = { { 3, 26, -41, -30 },
			{ 58, -10, 1, 16 }, { -13, -2, -45, -30 }, { 45, 35, 64, 83 },
			{ -39, 72, -42, -8 }, { -85, -38, 13, -45 }, { -54, 51, -29, 85 },
			{ -12, -63, -51, -11 }, { -44, -58, 3, 20 }, { 4, -16, 16, 1 },
			{ -7, 55, -13, -64 }, { 72, -49, 25, 12 }, { -5, 13, -44, 50 },
			{ -5, 72, 21, 97 }, { 50, 40, -30, -60 }, { 24, 11, -26, -33 },
			{ 32, 1, -32, -32 }, { 48, 36, 5, -19 }, { 70, -36, 52, -30 },
			{ -27, 33, 19, 36 }, { 9, -46, 52, 32 }, { 18, 32, 0, 7 },
			{ 79, -11, -86, 10 }, { -15, -13, -8, -2 }, { 38, 7, -69, 50 },
			{ -4, -16, -15, -32 }, { 4, 48, -48, -46 }, { 9, 1, 54, -10 },
			{ 7, -35, -37, 72 }, { -56, -64, -64, 14 }, { 24, -5, 12, 16 },
			{ -31, 65, -61, -27 }, { -20, 90, -21, 74 }, { -62, 66, -79, 62 },
			{ -67, 27, -20, -47 }, { 49, -44, 2, 19 }, { 40, 21, 18, -63 },
			{ -9, 22, -42, -63 }, { 3, 59, 41, 36 }, { -80, 78, 14, -30 },
			{ -48, -44, -21, 11 }, { 52, -74, 7, -22 }, { 87, 6, -17, 26 },
			{ -53, 22, 32, -15 }, { 54, 47, 8, 28 }, { -13, -47, 29, -2 },
			{ -6, 25, 5, 32 }, { -6, -30, -31, -13 }, { 1, 3, 60, 13 },
			{ -56, -9, 8, 16 }, { -44, -1, 74, -49 } };
}