<?xml version="1.0" encoding="UTF-8"?>
<window apply="demo.area.AreaRangeLineComposer">
<charts id="chart" title="July temperatures"/>
</window>
package demo.area;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
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.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.getXAxis().setType("datetime");
chart.getYAxis().setTitle("");
Tooltip tooltip = chart.getTooltip();
tooltip.setCrosshairs(true);
tooltip.setShared(true);
tooltip.setValueSuffix("°C");
chart.setLegend(new Legend());
Series series1 = chart.getSeries();
series1.setName("Temperature");
for (Double[] val : AreaRangeLineData.getAverages()) {
series1.addPoint(val[0], val[1]);
}
series1.setZIndex(1);
final String color = chart.getColors().get(0).stringValue();
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], val[2]);
}
series2.setType("arearange");
AreaRangePlotOptions plotOptions = new AreaRangePlotOptions();
plotOptions.setLineWidth(0);
plotOptions.setLinkedTo(":previous");
plotOptions.setColor(color);
plotOptions.setFillOpacity(0.3);
plotOptions.getMarker().setEnabled(false);
series2.setPlotOptions(plotOptions);
series2.setIndex(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 = {
{ 1246406400000.0, 14.3, 27.7 },
{ 1246492800000.0, 14.5, 27.8 },
{ 1246579200000.0, 15.5, 29.6 },
{ 1246665600000.0, 16.7, 30.7 },
{ 1246752000000.0, 16.5, 25.0 },
{ 1246838400000.0, 17.8, 25.7 },
{ 1246924800000.0, 13.5, 24.8 },
{ 1247011200000.0, 10.5, 21.4 },
{ 1247097600000.0, 9.2, 23.8 },
{ 1247184000000.0, 11.6, 21.8 },
{ 1247270400000.0, 10.7, 23.7 },
{ 1247356800000.0, 11.0, 23.3 },
{ 1247443200000.0, 11.6, 23.7 },
{ 1247529600000.0, 11.8, 20.7 },
{ 1247616000000.0, 12.6, 22.4 },
{ 1247702400000.0, 13.6, 19.6 },
{ 1247788800000.0, 11.4, 22.6 },
{ 1247875200000.0, 13.2, 25.0 },
{ 1247961600000.0, 14.2, 21.6 },
{ 1248048000000.0, 13.1, 17.1 },
{ 1248134400000.0, 12.2, 15.5 },
{ 1248220800000.0, 12.0, 20.8 },
{ 1248307200000.0, 12.0, 17.1 },
{ 1248393600000.0, 12.7, 18.3 },
{ 1248480000000.0, 12.4, 19.4 },
{ 1248566400000.0, 12.6, 19.9 },
{ 1248652800000.0, 11.9, 20.2 },
{ 1248739200000.0, 11.0, 19.3 },
{ 1248825600000.0, 10.8, 17.8 },
{ 1248912000000.0, 11.8, 18.5 },
{ 1248998400000.0, 10.8, 16.1 } },
averages = {
{ 1246406400000.0, 21.5 }, { 1246492800000.0, 22.1 },
{ 1246579200000.0, 23.0 }, { 1246665600000.0, 23.8 },
{ 1246752000000.0, 21.4 }, { 1246838400000.0, 21.3 },
{ 1246924800000.0, 18.3 }, { 1247011200000.0, 15.4 },
{ 1247097600000.0, 16.4 }, { 1247184000000.0, 17.7 },
{ 1247270400000.0, 17.5 }, { 1247356800000.0, 17.6 },
{ 1247443200000.0, 17.7 }, { 1247529600000.0, 16.8 },
{ 1247616000000.0, 17.7 }, { 1247702400000.0, 16.3 },
{ 1247788800000.0, 17.8 }, { 1247875200000.0, 18.1 },
{ 1247961600000.0, 17.2 }, { 1248048000000.0, 14.4 },
{ 1248134400000.0, 13.7 }, { 1248220800000.0, 15.7 },
{ 1248307200000.0, 14.6 }, { 1248393600000.0, 15.3 },
{ 1248480000000.0, 15.3 }, { 1248566400000.0, 15.8 },
{ 1248652800000.0, 15.2 }, { 1248739200000.0, 14.8 },
{ 1248825600000.0, 14.4 }, { 1248912000000.0, 15.0 },
{ 1248998400000.0, 13.6 } };
public static Double[][] getRanges() {
return ranges;
}
public static Double[][] getAverages() {
return averages;
}
}