package demo.more;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Responsive;
import org.zkoss.chart.Series;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.model.CategoryModel;
import org.zkoss.chart.model.DefaultCategoryModel;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
public class PolarSpiderComposer extends SelectorComposer<Window> {
@Wire
Charts chart;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
chart.getAccessibility().setDescription(
"A spiderweb chart compares the allocated budget against actual spending within an organization. The spider chart has six spokes. Each spoke represents one of the 6 departments within the organization: sales, marketing, development, customer support, information technology and administration. The chart is interactive, and each data point is displayed upon hovering. The chart clearly shows that 4 of the 6 departments have overspent their budget with Marketing responsible for the greatest overspend of $20,000. The allocated budget and actual spending data points for each department are as follows: Sales. Budget equals $43,000; spending equals $50,000. Marketing. Budget equals $19,000; spending equals $39,000. Development. Budget equals $60,000; spending equals $42,000. Customer support. Budget equals $35,000; spending equals $31,000. Information technology. Budget equals $17,000; spending equals $26,000. Administration. Budget equals $10,000; spending equals $14,000.");
chart.getTitle().setX(-80);
chart.getPane().setSize("80%");
XAxis xAxis = chart.getXAxis();
xAxis.setCategories("Sales", "Marketing", "Development", "Customer Support",
"Information Technology", "Administration");
xAxis.setTickmarkPlacement("on");
xAxis.setLineWidth(0);
YAxis yAxis = chart.getYAxis();
yAxis.setGridLineInterpolation("polygon");
yAxis.setLineWidth(0);
yAxis.setMin(0);
Tooltip tooltip = chart.getTooltip();
tooltip.setShared(true);
tooltip.setPointFormat(
"<span style=\"color:{series.color}\">"
+ "{series.name}: <b>${point.y:,.0f}</b><br/>");
Legend legend = chart.getLegend();
legend.setAlign("right");
legend.setVerticalAlign("middle");
legend.setLayout("vertical");
Series series = chart.getSeries();
series.setName("Allocated Budget");
series.setData(43000, 19000, 60000, 35000, 17000, 10000);
series.setPointPlacement("on");
Series series1 = chart.getSeries(1);
series1.setName("Actual Spending");
series1.setData(50000, 39000, 42000, 31000, 26000, 14000);
series1.setPointPlacement("on");
Responsive.Rule rule = new Responsive.Rule();
rule.getCondition().setMaxWidth(500);
rule.getChartOptions().getLegend().setAlign("center");
rule.getChartOptions().getLegend().setVerticalAlign("bottom");
rule.getChartOptions().getLegend().setLayout("horizontal");
rule.getChartOptions().getPane().setSize("70%");
chart.getResponsive().addRule(rule);
}
}