<?xml version="1.0" encoding="UTF-8"?>
<window apply="demo.gauges.SolidGaugeComposer">
<style>
.mmm {
white-space: normal;
}
.mmm > div {
width: 300px;
height: 200px;
display: inline-block;
}
</style>
<div sclass="mmm">
<charts id="speedChart" type="solidgauge" title="" />
<charts id="rmpChart" type="solidgauge" title="" />
</div>
<timer id="timer" delay="2000" running="true" repeats="true" />
</window>
package demo.gauges;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Pane;
import org.zkoss.chart.PaneBackground;
import org.zkoss.chart.Series;
import org.zkoss.chart.Stop;
import org.zkoss.chart.Theme;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.chart.plotOptions.PlotOptions;
import org.zkoss.zk.ui.Component;
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.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
public class SolidGaugeComposer extends SelectorComposer<Window> {
@Wire
Charts speedChart;
@Wire
Charts rmpChart;
EventListener themeChangeListener = new EventListener() {
public void onEvent(Event event) throws Exception {
Component target = event.getTarget();
if (target instanceof Charts) {
Charts chart =(Charts) target;
setDatalabelsFormat(chart);
}
}
};
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
initSpeedChart();
initRmpChart();
speedChart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, themeChangeListener);
rmpChart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, themeChangeListener);
}
public Charts initChart(Charts chart) {
Pane pane = chart.getPane();
Tooltip tooltip = chart.getTooltip();
YAxis yaxis = chart.getYAxis();
PlotOptions options = chart.getPlotOptions();
Series s0 = chart.getSeries(0);
pane = initGaugePane(pane);
yaxis = initYAxis(yaxis);
options = initPlotOptions(options);
chart.getExporting().setEnabled(false);
tooltip.setEnabled(false);
return chart;
}
public void initSpeedChart() {
speedChart = initChart(speedChart);
YAxis yaxis = speedChart.getYAxis();
Series s0 = speedChart.getSeries();
Tooltip tooltip = speedChart.getTooltip();
yaxis.setMin(0);
yaxis.setMax(200);
yaxis.setTitle("speed");
speedChart.getCredits().setEnabled(false);
s0.setName("Speed");
s0.setData(new Integer[] {80});
setDatalabelsFormat(speedChart);
tooltip.setValueSuffix("km/h");
}
public void initRmpChart() {
rmpChart = initChart(rmpChart);
YAxis yaxis = rmpChart.getYAxis();
Series s0 = rmpChart.getSeries();
Tooltip tooltip = rmpChart.getTooltip();
yaxis.setMin(0);
yaxis.setMax(5);
yaxis.setTitle("RPM");
s0.setName("RPM");
s0.setData(new Double[] {1.0});
setDatalabelsFormat(rmpChart);
tooltip.setValueSuffix("revolutions/min");
}
public Pane initGaugePane(Pane pane) {
PaneBackground b0 = new PaneBackground();
List backgrounds = new ArrayList();
pane.setCenter(new String[] {"50%", "85%"});
pane.setSize("140%");
pane.setStartAngle(-90);
pane.setEndAngle(90);
b0.setBackgroundColor("#EEE");
b0.setInnerRadius("60%");
b0.setOuterRadius("100%");
b0.setShape("arc");
backgrounds.add(b0);
pane.setBackground(backgrounds);
return pane;
}
public YAxis initYAxis(YAxis yaxis) {
yaxis.setStops(
// new Stop(0.1, "#558F3B"),
new Stop(0.1, "rgba(255,0,0,0.4)"),
new Stop(0.5, "#DDDF0D"),
new Stop(0.9, "#DF5353")
);
yaxis.setLineWidth(0);
yaxis.setMinorTickInterval((String) null);
yaxis.setTickPixelInterval(400);
yaxis.setMinorTickWidth(0);
yaxis.setTickWidth(0);
yaxis.getTitle().setY(-70);
yaxis.getLabels().setY(16);
return yaxis;
}
public PlotOptions initPlotOptions(PlotOptions options) {
DataLabels labels = options.getSolidGauge().getDataLabels();
labels.setY(5);
labels.setBorderWidth(0);
labels.setUseHTML(true);
return options;
}
public int getRandomInt(int min, int max) {
int range = max - min + 1;
return (int) (min + Math.floor(Math.random() * range));
}
public void setDatalabelsFormat(Charts chart) {
Theme theme = chart.getTheme();
String format = "";
String titleColor = (Theme.DARK_UNICA.equals(theme) || Theme.DARK_BLUE.equals(theme)
|| Theme.DARK_GREEN.equals(theme) || Theme.GRAY.equals(theme)) ? "white" : "black";
if (chart.getId().equals("speedChart")) {
format = "<div style='text-align:center'><span style='font-size:25px;color:"
+ titleColor + "'>{y}</span><br/>"
+ "<span style='font-size:12px;color:silver'>km/h</span></div>";
} else if (chart.getId().equals("rmpChart")) {
format = "<div style='text-align:center'><span style='font-size:25px;color:"
+ titleColor + "'>{y:.1f}</span><br/>"
+ "<span style='font-size:12px;color:silver'>* 1000 / min</span></div>";
}
if (!format.equals("")) {
chart.getSeries().getDataLabels().setFormat(format);
}
}
// Add some life
@Listen("onTimer = #timer")
public void updateData() {
int inc = (int) Math.round((Math.random() - 0.5) * 40);
int oldSpeed = speedChart.getSeries().getPoint(0).getY().intValue();
int newSpeed = oldSpeed + inc;
if (newSpeed < 0 || newSpeed > 200) {
newSpeed = oldSpeed - inc;
}
double dub = Math.random() - 0.5;
double oldRmp = rmpChart.getSeries().getPoint(0).getY().doubleValue();
double newRmp = oldRmp + dub;
if (newRmp < 0 || newRmp > 5) {
newRmp = oldRmp - dub;
}
speedChart.getSeries().setData(new Integer[] {newSpeed});
rmpChart.getSeries().setData(new Double[] {newRmp});
}
}