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



<window apply="demo.more.PolarSpiderComposer">
  <charts id="chart" type="line" polar="true"
    title="Budget vs spending"/>
</window>

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