package demo.combo;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Series;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.SplinePlotOptions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import demo.data.WeatherData;
public class ComboMultiAxesComposer extends SelectorComposer<Window> {
@Wire
Charts chart;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
chart.getXAxis().setCategories(WeatherData.getCategories());
// Primary y Axis
YAxis yAxis1 = chart.getYAxis();
yAxis1.getLabels().setFormat("{value}°C");
yAxis1.setTitle("Temperature");
yAxis1.setOpposite(true);
// Secondary y Axis
YAxis yAxis2 = chart.getYAxis(1);
yAxis2.setGridLineWidth(0);
yAxis2.setTitle("Rainfall");
yAxis2.getLabels().setFormat("{value} mm");
// Third y Axis
YAxis yAxis3 = chart.getYAxis(2);
yAxis3.setGridLineWidth(0);
yAxis3.setTitle("Sea-Level Pressure");
yAxis3.getLabels().setFormat("{value} mb");
yAxis3.setOpposite(true);
setYAxisesColor();
chart.getTooltip().setShared(true);
Legend legend = chart.getLegend();
legend.setLayout("vertical");
legend.setAlign("left");
legend.setX(120);
legend.setVerticalAlign("top");
legend.setY(80);
legend.setFloating(true);
initSeries();
}
private void initSeries() {
Series rainfall = new Series("Rainfall");
rainfall.setType("column");
rainfall.setYAxis(1);
rainfall.setData(WeatherData.getRainfall());
rainfall.getPlotOptions().getTooltip().setValueSuffix(" mm");
chart.addSeries(rainfall);
Series pressure = new Series("Sea-Level Pressure");
pressure.setType("spline");
pressure.setYAxis(2);
pressure.setData(WeatherData.getPressure());
pressure.getMarker().setEnabled(false);
SplinePlotOptions plotOptions2 = new SplinePlotOptions();
plotOptions2.setDashStyle("shortdot");
plotOptions2.getTooltip().setValueSuffix(" mb");
pressure.setPlotOptions(plotOptions2);
chart.addSeries(pressure);
Series temperature = new Series("Temperature");
temperature.setType("spline");
temperature.setData(WeatherData.getTemperature());
temperature.getPlotOptions().getTooltip().setValueSuffix(" °C");
chart.addSeries(temperature);
chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
public void onEvent(Event event) throws Exception {
setYAxisesColor();
}
});
}
private void setYAxisesColor() {
YAxis yAxis1 = chart.getYAxis();
YAxis yAxis2 = chart.getYAxis(1);
YAxis yAxis3 = chart.getYAxis(2);
String color1 = chart.getColors().get(0).stringValue();
String color2 = chart.getColors().get(1).stringValue();
String color3 = chart.getColors().get(2).stringValue();
yAxis1.getLabels().setStyle("color: '" + color3 + "'");
yAxis1.getTitle().setStyle("color: '" + color3 + "'");
yAxis2.getLabels().setStyle("color: '" + color1 + "'");
yAxis2.getTitle().setStyle("color: '" + color1 + "'");
yAxis3.getLabels().setStyle("color: '" + color2 + "'");
yAxis3.getTitle().setStyle("color: '" + color2 + "'");
}
}
package demo.data;
public class WeatherData {
private static String[] categories;
private static Number[] rainfall, temperature, pressure;
static {
categories = new String[] {
"Jan", "Feb", "Mar", "Apr",
"May","Jun", "Jul", "Aug",
"Sep", "Oct", "Nov", "Dec"
};
rainfall = new Double[] {
49.9, 71.5, 106.4, 129.2,
144.0, 176.0, 135.6, 148.5,
216.4, 194.1, 95.6, 54.4};
temperature = new Double[] {
7.0, 6.9, 9.5, 14.5,
18.2, 21.5, 25.2, 26.5,
23.3, 18.3, 13.9, 9.6};
pressure = new Number[] {
1016, 1016, 1015.9, 1015.5,
1012.3, 1009.5, 1009.6, 1010.2,
1013.1, 1016.9, 1018.2, 1016.7};
}
public static Number[] getRainfall() {
return rainfall;
}
public static Number[] getTemperature() {
return temperature;
}
public static Number[] getPressure() {
return pressure;
}
public static String[] getCategories() {
return categories;
}
}