Updating flow charts

Flow
1

I recently started using Charts 6.x with Vaadin 10 and I cannot get the charts to update after the initial drawing. No matter what I do, the old series hangs around and everything is getting updated. The tricks from previous releases of Charts like drawChart etc. are not available. Clearing the series is not an option because the lists are unmodifiable.

Any examples of chart (Vaadin 10 and Charts 6.x) updates that I can use to get some idea?

2

Hi Guru,

I cannot get the charts to update after the initial drawing

Please can you give more information about the kind of update you’re trying to do or if possible a code sample?

No matter what I do, the old series hangs around and everything is getting updated

I guess you’re trying to dynamically remove an entire series (not just the points on it)?

The tricks from previous releases of Charts like drawChart etc. are not available

There is a Chart.drawChart(boolaen) method, if set to true it will reset the chart configuration.

Clearing the series is not an option because the lists are unmodifiable

DataSeries allows you to dynamically add, remove and update points. It also provides a clear method but you would need to call chart.drawChart() after calling dataSeries.clear().

Any examples of chart (Vaadin 10 and Charts 6.x) updates that I can use to get some idea?

Here is an example which adds a new point to a data series every second: https://charts.demo.vaadin.com/SplineUpdatingEachSecond

3 
Chart chart = new Chart();
Configuration configuration = chart.getConfiguration();

int[] data = new int[]
 {20, 12, 34, 23, 65, 8, 4, 7, 76, 19, 20, 8};
List<DataSeriesItem> dataSeriesItems = IntStream.range(0, data.length)
        .mapToObj(e -> new DataSeriesItem(e, data[e]
))
        .collect(toList());

DataSeries series = new DataSeries();
series.setData(dataSeriesItems);
configuration.addSeries(series);

Button addPoint = new Button("Add Point", e -> {
    DataSeries dataSeries = (DataSeries) configuration.getSeries().get(0);
    dataSeries.add(new DataSeriesItem(dataSeries.size(), RANDOM.nextInt(100)));
});

Button updateRandomPoint = new Button("Update Random Point", e -> {
    DataSeries dataSeries = (DataSeries) configuration.getSeries().get(0);
    if (dataSeries.size() > 0) {
        DataSeriesItem point = dataSeries.get(RANDOM.nextInt(dataSeries.size()));
        point.setY(RANDOM.nextInt(100));
        dataSeries.update(point);
    }
});

Button removeLastPoint = new Button("Remove Last Point", e -> {
    DataSeries dataSeries = (DataSeries) configuration.getSeries().get(0);
    if (dataSeries.size() > 0) {
        dataSeries.remove(dataSeries.get(dataSeries.size() - 1));
    }
});

Button clearSeries = new Button("Clear Points", e -> {
    DataSeries dataSeries = (DataSeries) configuration.getSeries().get(0);
    dataSeries.clear();
    chart.drawChart();
});

add(chart, addPoint, updateRandomPoint, removeLastPoint, clearSeries);
4

My apologies. My IDE was probably acting up last night and didn’t resolve drawChart when I tried to use it. This morning it seems fine.

I will revisit everything and give an update.

Thanks, Sayo!

5

For anyone looking for a solution about how to remove a whole series (and not just an item from a series):

chart.drawChart(true); // true for parameter "resetConfiguration"

did the trick for me.

Eg. you get all chart series List<Series> series = chart.getConfiguration().getSeries(), filter that list according to your needs and reset the filtered list again chart.getConfiguration().setSeries(filteredSeries);. After that add the line from above and the removed/filtered series should disappear from the chart (Vaadin 14.4, all Java obviously). Bummer there’s no “removeSeries” functionality…