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.
charts 3.1.0-beta1 bug?
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
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
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);
}
}
}
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.
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.
Hi George,
https://dev.vaadin.com/ticket/19845 was fixed and will be merged soon, it should be released soon.