charts 3.1.0-beta1 bug?

Flow
1

Hello,
I have a dynamic chart that uses PlotOptionsScatter. The following code is called once per second:

DataSeriesItem newItem = new DataSeriesItem(this.lon, this.lat, BLACK);
this.posDataSeries.add(newItem);

// update the previous DataSeriesItem color
DataSeriesItem prevItem = this.posDataSeries.get(this.posDataSeries.size() - 2);
prevItem.setColor(LIGHTGREY);
this.posDataSeries.update(prevItem);

I checked and the color for prevItem is indeed updated correctly from BLACK to LIGHTGREY but the line
this.posDataSeries.update(prevItem);
does not appear update this.posDataSeries with the LIGHTGREY color for prevItem, even if chart.setImmediate(true). This code used to work in charts version 2.1.3

Now, if the chart is redrawn then ALL the prevItem points show the correctly updated LIGHTGREY color. But I don’t want to have to re-draw the chart every second…

Thanks,
-George Soler

2

Hi George,

Just to be sure I get the problem, you are trying to add a new black point to the chart and update the penultimate point color to black, right?

If that’s the case. I didn’t have time to test how it worked with 2.1.3 but I think it should work in 3.1 in the same way.

The only thing I see missing in your snippet are the update immediately and shift arguments in this.posDataSeries.add

Can you try with the following change?

this.posDataSeries.add(newItem, true, false); That’s how it’s done in our
updating example
.

Hope this helps!

Guillermo

3

Thank you Guillermo for the reply.

You are correct, only the most recent point in the series should be black, all other points should be grey.

Here is method updateChart which is called every second.
As you can see, there is already a call to this.posDataSeries.add(newItem, true, true);

import static com.vaadin.addon.charts.model.style.SolidColor.BLACK;
import static com.vaadin.addon.charts.model.style.SolidColor.LIGHTGREY;

static final int SERIES_LEN = 60;  // max num of chart points before rollover

/**
 * Update this Quick View chart with new data.
 *
 * @overrides abstract {@code super.updateChart(RumsAircraft rumsAc)}.
 *
 * @param rumsAc the aircraft that provides the data.
 */
@Override
public void updateChart(RumsAircraft rumsAc)
{
    if (!rumsAc.getIsActivated()) { return; }

    super.callsign = rumsAc.getCallsign();
    super.timestamp = rumsAc.getAcStateCreationTimeStamp();

    this.lat = rumsAc.getLat();
    this.lon = rumsAc.getLon();

    DataSeriesItem newItem = new DataSeriesItem(this.lon, this.lat, BLACK);

    // initialize the data series and draw the position chart
    if (super.counter < SERIES_LEN)
    {
        if (super.counter == 0)
        {
            // calibrate plot axes and draw
            calibrateAxes();
            super.chart.drawChart(super.chartConfig);
        }

        this.posDataSeries.add(newItem);
        if (this.posDataSeries.size() > 1) { updateSeries(); }

        super.counter++;
        return;
    }

    // update the data series
    this.posDataSeries.add(newItem, true, true);
    updateSeries();

    trimDataSeries();  // remove excess invisible points
    super.counter++;
}

/** Update the previous DataSeriesItem, re-calibrate plot axes, and draw. */
private void updateSeries()
{
    // update the previous DataSeriesItem color
    DataSeriesItem prevItem =
        this.posDataSeries.get(this.posDataSeries.size() - 2);
    prevItem.setColor(LIGHTGREY);
    this.posDataSeries.update(prevItem);

    // re-calibrate plot axes and draw
    if (this.lon <= this.minXLon || this.lon >= this.maxXLon ||
        this.lat <= this.minYLat || this.lat >= this.maxYLat)
    {
        calibrateAxes();
        super.chart.drawChart(super.chartConfig);
    }
}

/** Calibrate the position plot axes. */
private void calibrateAxes()
{
    this.minXLon = this.lon - POS_X_AXIS_LIM;
    super.xAxis.setMin(this.minXLon);
    this.maxXLon = this.lon + POS_X_AXIS_LIM;
    super.xAxis.setMax(this.maxXLon);
    this.minYLat = this.lat - POS_Y_AXIS_LIM;
    super.yAxis.setMin(this.minYLat);
    this.maxYLat = this.lat + POS_Y_AXIS_LIM;
    super.yAxis.setMax(this.maxYLat);
}

/**
 * Trim the number of data items in the series by removing the oldest items.
 *
 * @overrides abstract {@code super.trimDataSeries()}.
 */
@Override
public void trimDataSeries()
{
    int numItems = this.posDataSeries.size();
    if (numItems > SERIES_LEN)
    {
        for (int i = 0; i < SERIES_LEN; i++)
        {
            DataSeriesItem item = this.posDataSeries.get(i);
            this.posDataSeries.remove(item);
        }
    }
}
4

Hi George,

Sorry I didn’t have time for this yet. I will try to verify with a simple example using series.add and series.update in the same way you’re using it and let you know how it goes.

5

Hi again,

I was able to test it and agree there’s a problem, actually I’ve noticed that if you hover the point then the color is updated as expected.

I’ve created an issue
https://dev.vaadin.com/ticket/19845
 for Vaadin Charts.

6

Hi George,


https://dev.vaadin.com/ticket/19845
 was fixed and will be merged soon, it should be released soon.