ZK Charts Drill Down Example

Note: You need ZK EE License for this.

Video Demo

Maven

	<dependency>
			<groupId>org.zkoss.chart</groupId>
			<artifactId>zkcharts</artifactId>
			<version>2.0.0</version>
		</dependency>

The following code  is from my project. You can check  the code for details.

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<zk>
	<window id="chartReceiptdaily" height="100%"
		contentStyle="overflow:auto;"
		viewModel="@id('vm') @init('com.product.webapp.charts.ChartReceiptDailyVM')"
		apply="org.zkoss.bind.BindComposer">
		<panel id="panel" title="Filter" framable="true" border="normal"
			collapsible="true" open="true">
			<panelchildren>
				<separator />
				<vgrid>
					<columns>
						<column hflex="min"></column>
						<column hflex="min"></column>
						<column hflex="min"></column>
						<column hflex="1"></column>
						<column hflex="1"></column>
					</columns>
					<rows>
						<row>
							<hbox hflex="1">
								<vlayout>
									<flabel value="Month" />
									<EnumDrpDown labelFormat="2"
										showDesc="false" hflex="1" dropDownType="1" id="monthnames"
										EnumType="monthnames" name="monthnames"
										value="@bind(vm.billingCond.monthName)" />
								</vlayout>
							</hbox>
							<vlayout>
								<hbox>
									<vlayout>
										<flabel value="Year" />
										<intbox format="####"
											value="@bind(vm.billingCond.year)" maxlength="4"
											placeholder="YYYY" />
									</vlayout>
								</hbox>
							</vlayout>
							<vlayout>
								<flabel value="Location" />
								<hbox>
									<ftextbox hflex="1"
										sclass="highlightText" ctrlKeys="#del"
										onCtrlKey="@command('onClearLookupValues',type='location')"
										onFocus="@command('onFocusLookupValues',target=self)"
										onDoubleClick="@command('jumpToScreen',code=self.value,screenNum=101)"
										value="@bind(vm.billingCond.locationCode)" name="location" />
									<toolbarbutton
										sclass="gridToolbarButton" image="/images/smallsearch.png"
										onClick="@command('OnLookUp',type='location')" />
								</hbox>
							</vlayout>
							<vlayout>
								<dlabel></dlabel>
								<fbutton label="Apply" id="search"
									onClick="@command('onApplyCondition',action=1)">
								</fbutton>
							</vlayout>
						</row>
					</rows>
				</vgrid>
				<separator />
			</panelchildren>
		</panel>
		<div visible="@bind(not vm.showTitle)">
			<separator></separator>
			<separator></separator>
			<separator></separator>
		</div>


		<div id="divchart"></div>
		<separator></separator>
		<div align="center">
			<flabel sclass="screenheaderlabel"
				visible="@bind(not vm.showingDetail)"
				value="Click on the Totals to view Summary by Receipt Payment Mode." />
			<fbutton label="Go Back" visible="@bind(vm.showingDetail)"
				onClick="@command('goBack')">
			</fbutton>
			<separator></separator>
		</div>

		<separator></separator>
		<separator></separator>

		<panel width="65%">
			<panelchildren>
				<separator></separator>
				<listbox id="" mold="paging" sclass="mylist" 
					height="400px" selectedItem="@bind(vm.selectedData)"
					model="@load(vm.dataList)">
					<listhead sizable="true">
						<listheader label="@bind(vm.colCaption)"
							hflex="1" sort="auto(data)" />
						<listheader label="Receipts" hflex="1"
							sort="auto(count)" />
						<listheader label="Billed Amount" hflex="1"
							sort="auto(amount)" align="right" />
					</listhead>
					<template name="model" var="p1">
						<listitem>
							<listcell label="@load(p1.data)" />
							<listcell label="@load(p1.count)" />
							<listcell
								label="@load(c:formatNumber(p1.amount, '#,###.00'))" />
						</listitem>
					</template>
					<listfoot>
						<listfooter>
							<label value="Grand Total" />
						</listfooter>

						<listfooter>
							<label value="@bind(vm.totalCount)" />
						</listfooter>
						<listfooter>
							<label
								value="@bind(c:formatNumber(vm.totalAmount, '#,###.00'))" />
						</listfooter>
					</listfoot>
				</listbox>
			</panelchildren>
		</panel>
		<separator></separator>
		<separator></separator>
	</window>
</zk>

ViewModel

package com.product.webapp.charts;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Iterator;
import java.util.List;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.chart.Chart;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvent;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.plotOptions.PiePlotOptions;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.CategoryModel;
import org.zkoss.zul.SimpleCategoryModel;
import org.zkoss.zul.SimpleSingleValueCategoryModel;
import org.zkoss.zul.Window;

@SuppressWarnings("unchecked")
public class ChartReceiptDailyVM extends BaseChartVM {

	@Wire("#chartReceiptdaily")
	private Window win;
	private CategoryModel model;
	private String theme;
	private boolean showingDetail = false;
	private String colCaption = "";

	public String getColCaption() {
		return colCaption;
	}

	public void setColCaption(String colCaption) {
		this.colCaption = colCaption;
	}

	public boolean isShowingDetail() {
		return showingDetail;
	}

	public void setShowingDetail(boolean showingDetail) {
		this.showingDetail = showingDetail;
	}

	@AfterCompose
	public void initSetup(@ContextParam(ContextType.VIEW) Component view,
			@ExecutionArgParam("theme") String theme) {
		Selectors.wireComponents(view, this, false);
		super.initSetup(win);
		this.theme = theme;
		Calendar now = Calendar.getInstance();
		int year = now.get(Calendar.YEAR);
		String[] monthName = { "January", "February", "March", "April", "May",
				"June", "July", "August", "September", "October", "November",
				"December" };
		String month = monthName[now.get(Calendar.MONTH)];
		billingCond.setYear(year);
		billingCond.setMonthName(month);
		onApplyCondition(0);
	}

	@Command
	public void goBack() {
		onApplyCondition(0);
	}

	@SuppressWarnings("rawtypes")
	@Command
	public void onApplyCondition(@BindingParam("action") Integer action) {
		if (action == 1)
			this.showTitle = false;
		billingCond.setChargeSummaryType("ReceiptDaily");
		billingCond.setDay(null);
		showingDetail = false;
		colCaption = "Day";
		divchart.getChildren().clear();
		chart = new Charts();
		chart.setType("column");
		chart.setParent(divchart);
		chart.setTitle("Patient Receipts Daily Summary");
		chart.setSubtitle("Click on the Totals to view Summary by Receipt Payment Mode");
		chart.addEventListener("onPlotClick", new onPlotSelect());
		List<Object> results = billingReportService
				.getPatientReceiptSummary(billingCond);
		if (results.size() == 0)
			Clients.showNotification("No Data found for the given condition.",
					Clients.NOTIFICATION_TYPE_INFO, null, "middle_center", 1100);

		dataList = new ArrayList<ChartDataList>();
		this.totalAmount = BigDecimal.ZERO;
		model = new SimpleCategoryModel();
		Integer week = 0;
		BigDecimal amount = BigDecimal.ZERO;
		Long noOfReceipts = (long) 0;
		String data = "";
		for (Iterator it = results.iterator(); it.hasNext();) {
			Object[] row = (Object[]) it.next();
			week = (Integer) row[0];
			amount = (BigDecimal) row[1];
			noOfReceipts = (Long) row[2];
			data = "Day-" + week;
			dataList.add(new ChartDataList(data, noOfReceipts, amount, null));
			model.setValue("Practice", week, amount);
			totalAmount = totalAmount.add(amount);
			totalCount = totalCount + noOfReceipts;
		}
		chart.getXAxis().setMin(0);
		chart.getXAxis().getTitle().setText("Day");

		chart.getYAxis().setMin(0);
		chart.getYAxis().getTitle().setText("Receipt Amount ");

		Tooltip tooltip = chart.getTooltip();
		tooltip.setHeaderFormat("<span style=\"font-size:10px\">{point.key}</span><table>");
		tooltip.setPointFormat("<tr><td style=\"color:{series.color};padding:0\">{series.name}: </td>"
				+ "<td style=\"padding:0\"><b> $ {point.y:.1f} </b></td></tr>");
		tooltip.setFooterFormat("</table>");
		tooltip.setShared(true);
		tooltip.setUseHTML(true);
		chart.getPlotOptions().getColumn().setPointPadding(0.2);
		chart.getPlotOptions().getColumn().setBorderWidth(0);
		chart.getLegend().setEnabled(false);
		chart.setModel(model);
		super.onSelectChartTheme(this.theme);
		BindUtils.postNotifyChange(null, null, this, "*");
	}

	@SuppressWarnings("rawtypes")
	class onPlotSelect implements org.zkoss.zk.ui.event.EventListener {
		@Override
		public void onEvent(Event event) throws Exception {
			showPaymentDetails((Integer) ((ChartsEvent) event).getCategory());
		}
	}

	@SuppressWarnings("rawtypes")
	private void showPaymentDetails(Integer day) {
		SimpleSingleValueCategoryModel model;
		billingCond.setChargeSummaryType("paymentMode");
		billingCond.setDay(day);
		colCaption = "Mode";
		showingDetail = true;
		divchart.getChildren().clear();
		chart = new Charts();
		chart.setType("pie");
		chart.setParent(divchart);
		chart.setTitle("Receipt By Payment Mode");
		List<Object> results = billingReportService
				.getPatientReceiptSummary(billingCond);
		dataList = new ArrayList<ChartDataList>();
		this.totalAmount = BigDecimal.ZERO;
		this.totalCount = 0L;
		model = new SimpleSingleValueCategoryModel();
		for (Iterator it = results.iterator(); it.hasNext();) {
			Object[] row = (Object[]) it.next();
			dataList.add(new ChartDataList((String) row[0], (Long) row[1],
					(BigDecimal) row[2], (String) row[0]));
			model.setValue((Comparable<?>) row[0], (Number) row[2]);
			totalAmount = totalAmount.add((BigDecimal) row[2]);
			totalCount = totalCount + (Long) row[1];
		}
		chart.setModel(model);
		Chart chartOptional = chart.getChart();
		chartOptional.setPlotBorderWidth(0);
		chartOptional.setBackgroundColor("");
		chart.getTooltip().setPointFormat(
				"{series.name}: <b>{point.percentage:.1f}%</b>");
		PiePlotOptions plotOptions = chart.getPlotOptions().getPie();
		plotOptions.setAllowPointSelect(true);
		plotOptions.setCursor("pointer");
		plotOptions.getDataLabels().setEnabled(true);
		plotOptions.setShowInLegend(true);
		super.onSelectChartTheme(this.theme);
		BindUtils.postNotifyChange(null, null, this, "*");
	}
}

Java class to store the results

package com.product.webapp.charts;

import java.math.BigDecimal;

public class ChartDataList {

	private String data;
	private Long count;
	private BigDecimal amount;
	private String monthName;

	public String getMonthName() {
		return monthName;
	}

	public void setMonthName(String monthName) {
		this.monthName = monthName;
	}

	public ChartDataList(String data, Long count, BigDecimal amount) {
		this.data = data;
		this.count = count;
		this.amount = amount;
	}

	public ChartDataList(String data, Long count, BigDecimal amount,
			String monthName) {
		this.data = data;
		this.count = count;
		this.amount = amount;
		this.monthName = monthName;
	}

	public String getData() {
		return data;
	}

	public void setData(String data) {
		this.data = data;
	}

	public Long getCount() {
		return count;
	}

	public void setCount(Long count) {
		this.count = count;
	}

	public BigDecimal getAmount() {
		return amount;
	}

	public void setAmount(BigDecimal amount) {
		this.amount = amount;
	}

}