Hi,
I have a use case where iot sensors are publishing data in real time through mqtt pub-sub mechanism. I have a vaadin UI and I want to show the sensor data in a gauge display in real time. For example, I initialize the gauge with a default value, then as and when i receive updated values through mqtt callback, i want to refresh the gauge to display the current value. I tried doing it, but the gauge display is not changing. I am initializing the chart as follows in the UI class -
private static Chart gaugeChart = (Chart) drawGaugeChart (0);
inside init() I am adding it to the main layout
VerticalLayout v = new VerticalLayout();
v.addComponent(gaugeChart);
Here is the drawGaugeChart() method -
public static Component drawGaugeChart(Integer value) {
System.out.println(" drawGaugeChart called with = "+ value);
final Chart chart = new Chart();
chart.setWidth(500, Unit.PIXELS);
final Configuration configuration = chart.getConfiguration();
configuration.getChart().setType(ChartType.SOLIDGAUGE);
configuration.getTitle().setText("Wind Speed");
Pane pane = new Pane();
pane.setCenter("50%", "85%");
pane.setSize("140%");
pane.setStartAngle(-90);
pane.setEndAngle(90);
configuration.addPane(pane);
configuration.getTooltip().setEnabled(false);
Background bkg = new Background();
bkg.setBackgroundColor(new SolidColor("#eeeeee"));
bkg.setInnerRadius("60%");
bkg.setOuterRadius("100%");
bkg.setShape("arc");
bkg.setBorderWidth(0);
pane.setBackground(bkg);
YAxis yaxis = configuration.getyAxis();
yaxis.setLineWidth(0);
yaxis.setTickInterval(200);
yaxis.setTickWidth(0);
yaxis.setMin(0);
yaxis.setMax(300);
yaxis.setTitle("");
yaxis.getTitle().setY(-70);
yaxis.setLabels(new Labels());
yaxis.getLabels().setY(16);
Stop stop1 = new Stop(0.1f, SolidColor.GREEN);
Stop stop2 = new Stop(0.5f, SolidColor.YELLOW);
Stop stop3 = new Stop(0.9f, SolidColor.RED);
yaxis.setStops(stop1, stop2, stop3);
PlotOptionsSolidgauge plotOptions = new PlotOptionsSolidgauge();
plotOptions.setTooltip(new SeriesTooltip());
plotOptions.getTooltip().setValueSuffix(" mph");
DataLabels labels = new DataLabels();
labels.setY(5);
labels.setBorderWidth(0);
labels.setUseHTML(true);
labels.setFormat("<div style=\"text-align:center\"><span style=\"font-size:25px;\">{y}</span><br/>"
+ " <span style=\"font-size:12pxg\">km/h</span></div>");
plotOptions.setDataLabels(labels);
configuration.setPlotOptions(plotOptions);
ListSeries series = new ListSeries("Speed", 80);
if (value > 0) {
series = new ListSeries("Speed", value);
}
configuration.setSeries(series);
chart.drawChart(configuration);
return chart;
}
On the mqttCallback() function, I am calling UI.drawGaugeChart(Integer.parseInt(value)); I can see the chart is getting configured with the updated value in ListSeries; however it’s not refreshing the page. Is there a trick to call the init() method again on the UI class to re-add the component to the layout? Or is there another way of doing this? Please help. Thanks