Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
refresh vaadin gauge chart data dynamically
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
Hi,
Did you check the angular gauge demo? There's a source tab which shows the implementation of the demo. It's not necesary to create a new component each time, you just need to update the series data:
series.updatePoint(0, newValue);
Hope this helps,
Guille