Monday, 27 April 2015

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

}

11 comments:

  1. sir where can i get this code.

    ReplyDelete
  2. Thanks for your nice blog! Recently i’m promoting incontinence, wound care and bandages products named wound care . We’re selling Dignity, Molicare, Hartmann and Attends products.

    ReplyDelete
  3. Good to know about this zk charts drill down example . Thanks for sharing here with us keep updating.

    ReplyDelete
  4. I have read some blogs of you and found some interesting things, so please keep updating like this always.

    ReplyDelete
  5. Such a nice article. This is really helpful in many ways to people. Keep posting and make us aware of such things.

    ReplyDelete
  6. Your approach to this topic is unique and informative. I am writing an article for our school paper and this post has helped me. Thanks.

    Toshiba PVT-375BT

    ReplyDelete
  7. Docbeans is a online healthcare video portal and a trusted source of Health information providing health videos being delivered by experts in medical, health and fitness world.

    ReplyDelete
  8. Microsoft office has a different version, and the entire version has the different setup file. Some of the version is Office 2013, Office 2016 and Office 365 etc. Go to www.office.com/setup and redeem your key. Office Com Setup is one of the most popular productivity programs around. If you have your product key handy, you don't even need a disc to start installing Office just visit office setup help. Norton is one of the most reliable antivirus providers in the market to download visit www.norton.com/setup . There are multiple manufacturers making printers for home and office use with varied range as printer series per the need and affordability of different customers. Printer Tech Support. It has become one of the most useful computer hardware devices that allow people to convert computer generated typescript into a physical printed document.

    ReplyDelete