<?xml version="1.0" encoding="UTF-8"?>
<window apply="demo.area.AreaRangeLineComposer">
<charts id="chart" title="July temperatures in Nesbyen, 2022"/>
</window>
package demo.area;
import demo.util.TimeUtil;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Color;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Marker;
import org.zkoss.chart.Series;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.plotOptions.AreaRangePlotOptions;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
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;
public class AreaRangeLineComposer extends SelectorComposer<Window> {
@Wire
Charts chart;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
chart.setSubtitle("Source: " +
"<a href=\"https://www.yr.no/nb/historikk/graf/1-113585/Norge/Viken/Nesbyen/Nesbyen?q=2022-07\"" +
"target=\"_blank\">YR</a>");
chart.getXAxis().setType("datetime");
chart.getXAxis().getAccessibility().setRangeDescription("Range: Jul 1st 2022 to Jul 31st 2022.");
chart.getYAxis().setTitle("");
Tooltip tooltip = chart.getTooltip();
tooltip.setCrosshairs(true);
tooltip.setShared(true);
tooltip.setValueSuffix("°C");
SeriesPlotOptions series = chart.getPlotOptions().getSeries();
series.setPointStart(TimeUtil.getUTCDate(2022, 6, 1));
series.setPointIntervalUnit("day");
Series series1 = chart.getSeries();
series1.setName("Temperature");
for (Double[] val : AreaRangeLineData.getAverages()) {
series1.addPoint(val[0]);
}
series1.setZIndex(1);
final Color color = chart.getColors().get(0);
Marker marker = series1.getMarker();
marker.setFillColor("white");
marker.setLineWidth(2);
marker.setLineColor(color);
Series series2 = chart.getSeries(1);
series2.setName("Range");
for (Double[] val : AreaRangeLineData.getRanges()) {
series2.addPoint(val[0], val[1]);
}
series2.setType("arearange");
series2.setLineWidth(0);
series2.setLinkedTo(":previous");
series2.setColor(color);
series2.setFillOpacity(0.3);
series2.getMarker().setEnabled(false);
series2.setZIndex(0);
chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
public void onEvent(Event event) throws Exception {
final String color = chart.getColors().get(0).stringValue();
chart.getSeries().getMarker().setLineColor(color);
chart.getSeries(1).getPlotOptions().setColor(color);
}
});
}
}
package demo.area;
public class AreaRangeLineData {
private static Double[][] ranges = {
{13.7, 25.6},
{13.3, 21.8},
{11.2, 19.9},
{7.9, 17.3},
{4.9, 20.6},
{5.1, 16.8},
{9.3, 21.1},
{11.1, 20.5},
{8.9, 18.4},
{4.6, 23.2},
{11.5, 26.0},
{8.6, 23.4},
{9.8, 22.2},
{8.1, 18.2},
{5.9, 20.2},
{4.5, 20.2},
{8.9, 19.8},
{11.1, 22.1},
{7.9, 26.7},
{15.9, 28.6},
{14.9, 27.5},
{9.5, 26.0},
{11.5, 22.4},
{8.6, 21.1},
{12.9, 21.7},
{13.6, 20.9},
{9.6, 23.9},
{8.6, 22.7},
{7.5, 25.7},
{5.5, 24.3},
{10.4, 21.2} },
averages = {
{18.1},
{17.1},
{15.2},
{12.7},
{13.3},
{10.6},
{15.6},
{16.1},
{14.0},
{15.3},
{17.5},
{17.5},
{15.3},
{13.9},
{13.7},
{13.8},
{14.0},
{15.8},
{18.6},
{21.5},
{19.8},
{17.6},
{16.8},
{15.6},
{16.7},
{16.3},
{17.2},
{16.0},
{16.9},
{16.1},
{14.5}};
public static Double[][] getRanges() {
return ranges;
}
public static Double[][] getAverages() {
return averages;
}
}