<?xml version="1.0" encoding="UTF-8"?>
<window apply="demo.combo.ComboMultiAxesComposer">
<charts id="chart" zoomType="xy" subtitle="Source: WorldClimate.com"
title="Average Monthly Weather Data for Tokyo" />
</window>
package demo.combo;
import org.zkoss.chart.AxisLabels;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Legend;
import org.zkoss.chart.PlotData;
import org.zkoss.chart.Responsive;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.impl.PlotEngineImpl;
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.getTitle().setAlign("left");
chart.getSubtitle().setAlign("left");
chart.getXAxis().setCategories(WeatherData.getCategories());
chart.getXAxis().setCrosshair(true);
// 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);
chart.getTooltip().setShared(true);
Legend legend = chart.getLegend();
legend.setLayout("vertical");
legend.setAlign("left");
legend.setX(80);
legend.setVerticalAlign("top");
legend.setY(55);
legend.setFloating(true);
legend.setBackgroundColor("rgba(255,255,255,0.25)");
setYAxisesColor();
initSeries();
Responsive.Rule rule = chart.getResponsive().getRule();
rule.getCondition().setMaxWidth(500);
PlotData chartOptions = rule.getChartOptions();
Legend legend1 = chartOptions.getLegend();
legend1.setFloating(false);
legend1.setLayout("horizontal");
legend1.setAlign("center");
legend1.setVerticalAlign("bottom");
legend1.setX(0);
legend1.setY(0);
YAxis chartOptionsYAxis = chartOptions.getYAxis(0);
AxisLabels yAxisLabels = chartOptionsYAxis.getLabels();
yAxisLabels.setAlign("right");
yAxisLabels.setX(0);
yAxisLabels.setY(-6);
chartOptionsYAxis.setShowLastLabel(false);
YAxis chartOptionsYAxis1 = chartOptions.getYAxis(1);
AxisLabels yAxisLabels1 = chartOptionsYAxis1.getLabels();
yAxisLabels1.setAlign("left");
yAxisLabels1.setX(0);
yAxisLabels1.setY(-6);
chartOptionsYAxis1.setShowLastLabel(false);
chartOptions.getYAxis(2).setVisible(false);
}
private void initSeries() {
Series rainfall = new Series();
rainfall.setName("Rainfall");
rainfall.setType("column");
rainfall.setYAxis(1);
rainfall.setData(WeatherData.getRainfall());
rainfall.getTooltip().setValueSuffix(" mm");
chart.addSeries(rainfall);
Series pressure = new Series();
pressure.setName("Sea-Level Pressure");
pressure.setType("spline");
pressure.setYAxis(2);
pressure.setData(WeatherData.getPressure());
pressure.getMarker().setEnabled(false);
pressure.setDashStyle("shortdot");
pressure.getTooltip().setValueSuffix(" mb");
chart.addSeries(pressure);
Series temperature = new Series();
temperature.setName("Temperature");
temperature.setType("spline");
temperature.setData(WeatherData.getTemperature2());
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[] themeColors = ThemeColors.getThemeColors(Theme.DEFAULT);
String color1 = themeColors[0];
String color2 = themeColors[1];
String color3 = themeColors[2];
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, precipitation, temperature, temperature2, 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};
precipitation = new Double[] {
27.6, 28.8, 21.7, 34.1, 29.0, 28.4, 45.6, 51.7, 39.0,
60.0, 28.6, 32.1};
temperature = new Double[] {
-13.6, -14.9, -5.8, -0.7, 3.1, 13.0, 14.5, 10.8, 5.8,
-0.7, -11.0, -16.4};
temperature2 = 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[] getPrecipitation() {
return precipitation;
}
public static Number[] getTemperature() {
return temperature;
}
public static Number[] getTemperature2() {
return temperature2;
}
public static Number[] getPressure() {
return pressure;
}
public static String[] getCategories() {
return categories;
}
}