<?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.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);

		CategoryModel catmodel = new DefaultCategoryModel();

		catmodel.setValue("Allocated Budget", "Sales", new Integer(43000));
		catmodel.setValue("Allocated Budget", "Marketing", new Integer(19000));
		catmodel.setValue("Allocated Budget", "Development", new Integer(60000));
		catmodel.setValue("Allocated Budget", "Customer Support", new Integer(35000));
		catmodel.setValue("Allocated Budget", "Information Technology",	new Integer(17000));
		catmodel.setValue("Allocated Budget", "Administration", new Integer(17000));
		catmodel.setValue("Actual Spending", "Sales", new Integer(50000));
		catmodel.setValue("Actual Spending", "Marketing", new Integer(39000));
		catmodel.setValue("Actual Spending", "Development", new Integer(42000));
		catmodel.setValue("Actual Spending", "Customer Support", new Integer(31000));
		catmodel.setValue("Actual Spending", "Information Technology",new Integer(26000));
		catmodel.setValue("Actual Spending", "Administration", new Integer(14000));
		chart.setModel(catmodel);

		chart.getTitle().setX(-80);

		chart.getPane().setSize("80%");

		chart.getXAxis().setTickmarkPlacement("on");
		chart.getXAxis().setLineWidth(0);

		YAxis yAxis = chart.getYAxis();
		yAxis.setGridLineInterpolation("polygon");
		yAxis.setLineWidth(0);
		yAxis.setMin(0);

		chart.getTooltip().setShared(true);
		chart.getTooltip().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");

		chart.getPlotOptions().getSeries().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);
    }
}