<?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.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("top");
	legend.setY(70);
	legend.setLayout("vertical");

	chart.getPlotOptions().getSeries().setPointPlacement("on");

    }
}