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



<window apply="demo.bar.ColumnStackedGroupedComposer">
	<charts id="chart" type="column" title="Olympic Games all-time medal table, grouped by continent"/>
</window>

package demo.bar;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.chart.YAxis;
import org.zkoss.json.JavaScriptValue;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class ColumnStackedGroupedComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

    public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.getXAxis().setCategories("Gold", "Silver", "Bronze");

		Series series0 = chart.getSeries();
		series0.setName("Norway");
		series0.setData(148, 133, 124);
		series0.setStack("Europe");

		Series series1 = chart.getSeries(1);
		series1.setName("Germany");
		series1.setData(102, 98, 65);
		series1.setStack("Europe");

		Series series2 = chart.getSeries(2);
		series2.setName("United States");
		series2.setData(113, 122, 95);
		series2.setStack("North America");

		Series series3 = chart.getSeries(3);
		series3.setName("Canada");
		series3.setData(77, 72, 80);
		series3.setStack("North America");

		YAxis yAxis = chart.getYAxis();
		yAxis.setAllowDecimals(false);
		yAxis.setMin(0);
		yAxis.setTitle("Count medals");
		
		chart.getTooltip().setFormatter(new JavaScriptValue("function () {\n"
				+ "return '<b>' + this.x + '</b><br/>' +\n"
				+ "    this.series.name + ': ' + this.y + '<br/>' +\n"
				+ "    'Total: ' + this.point.stackTotal;\n"
				+ "}"));
		
		chart.getPlotOptions().getColumn().setStacking("normal");
    }
}