Setting min/max x-axis in Vaadin Chart not working properly

I have a simple chart implementation where I add and remove sample points dynamically. This is achieved by having the Refresher addon call my refresh() method at regular intervals. Each call to the refresh() method will add new and remove obsolete sample points (points older than startTime).

This works fine if I comment out the two last lines in in refresh() method. That is, new points are added and old points are removed and the chart displays the expected sample points.

However, when I include the calls to setMin() and setMax(), the x-axis freezes. The old points are removed and the new points are added but not visible (outside visible x-axis). I have verified using Wireshark that the JSON ‘addPoint’ and ‘removePoint’ contain the added / removed points. However, the min/max information is not showing up anywhere in the tcp dump (except the first time).

I need to control the x-axis because I have sample series with irregular time intervals and need to shift the x-axis even when new sample points has not been added.

BTW: I am using Vaadin Charts version 1.0.1 and Vaadin version 7.0.4.

I have included relevant parts of the code below.

Note!
Code snippet below was modified to reflect the code in my second post on this thread.


package no.test;

import com.vaadin.addon.charts.Chart;
import com.vaadin.addon.charts.model.*;
import com.vaadin.addon.charts.util.Util;

import java.util.Date;
import java.util.List;

public class SampleChart extends Chart {

	private final Configuration configuration = new Configuration();

	public SampleChart(final SampleChartConfig sampleChartConfig) {

		setSizeFull();

		// Set chart type
		configuration.getChart().setType(ChartType.LINE);

		// Set chart title
		configuration.getTitle().setText(sampleChartConfig.getChartTitle());

		// Set type for x-axis
		configuration.getxAxis().setType(AxisType.DATETIME);

		// Turn chart legend off
		configuration.getLegend().setEnabled(false);

		// Turn animation off
		configuration.getChart().setAnimation(false);

		// For each sample series
		for (SampleSeriesConfig sampleSeriesConfig : sampleChartConfig.getSampleSeriesConfigs()) {

			// Set series title and alignment
			Axis yAxis = configuration.getyAxis();
			yAxis.setTitle(new Title(sampleSeriesConfig.getAxisName()));
			yAxis.getTitle().setVerticalAlign(VerticalAlign.HIGH);

			// Set min / max y-axis value
			yAxis.setMin(sampleSeriesConfig.getAxisMinValue());
			yAxis.setMax(sampleSeriesConfig.getAxisMaxValue());

			// Create sample series
			DataSeries chartSeries = new DataSeries();
			chartSeries.setName(sampleSeriesConfig.getSeriesName());

			// Add series to chart
			configuration.addSeries(chartSeries);
		}

		drawChart(configuration);
	}

	public void refresh(final Date startTime, final Date endTime, final List<SampleDTO> ... sampleSeriesArray) {
		long startExecutionTime = System.currentTimeMillis();

		// For each sample series
		int seriesCount = 0;
		for (List<SampleDTO> sampleSeries : sampleSeriesArray) {
			// Obtain series
			DataSeries chartSeries = (DataSeries)configuration.getSeries().get(seriesCount++);

			// Remove sample points older than startTime
			while (true) {
				DataSeriesItem dataSeriesItem = (chartSeries.size() > 0) ? chartSeries.get(0) : null;

				if ((dataSeriesItem != null) && (Util.toServerDate(dataSeriesItem.getX().longValue()).getTime() < startTime.getTime())) {
					chartSeries.remove(dataSeriesItem);
				} else {
					break;
				}
			}

			// Add sample values for series
			for (SampleDTO sampleDTO : sampleSeries) {
				chartSeries.add(new DataSeriesItem(sampleDTO.getCreated(), sampleDTO.getValue()));
			}

			System.out.println("Refreshed series: title=" + configuration.getTitle().getText() + ", time(ms)=" + (System.currentTimeMillis() - startExecutionTime) + ", points=" + chartSeries.getData().size() + ", seriesCount=" + configuration.getSeries().size());
		}

		// Set start and end time for chart
		configuration.getxAxis().setMin(startTime);
		configuration.getxAxis().setMax(endTime);
	}
}

For anyone willing to help on this, I have provided a complete example. All you need to do is:

  1. Download the attached file (vaadin-charts-dashboard.tgz)
  2. tar xvfz vaadin-charts-dashboard.tgz
  3. cd vaadin-charts-dashboard
  4. mvn clean install
  5. mvn jetty:run
  6. localhost:8080/dashboard (in browser)

It all assumes you have a Java, Maven and a properly configured Maven Proxy.
12922.tgz (12.3 KB)

Hi,

Dynamic changes to axes are not currently supported. So you practically need to redraw the whole chart when you change these after chart.drawChart(). If you have series updates at the same time, you should then use mutation methods that don’t force paint immediately. I’d also disable animation altogether when using this kind of setup.

Highcharts has setExtremes method for axis that can be used on “live charts”. Added an enhancement ticket for that:
http://dev.vaadin.com/ticket/11701

cheers,
matti

I turned animation off for each series (not sufficient to do it on the chart) and added a call to drawChart() at the end of my refresh() and that seems OK for now. Running 4 charts with about 6000 sample points (total) performs quite well.

I verified using Wireshark that all 6000 points are now transferred on each refresh. Hence, having ticket 11701 solved would significantly reduce the amount of information being sent from the server to the browser.

Anyway, again thanks for a good and timely response.

Hi,
can anyone tell me why there is no “getExtremes” method?
I am trying to find out the maximum value of a given yAxis and “yAxis().getMax()” returns null…

Thank you,
Jürgne