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