Timeline - Milliseconds

Hello !

I have datas coming from a sensor (one measure every 50 ms) and I would like to represent them in a Vaadin Timeline.
I can add my values to the graph, this is not the problem. My problem is that the time in the x-value caption doesn’t work, I don’t have any caption.
Actually, I would like a caption starting from 0, and showing every 50 ms. Does someone know how to resolve it ?

Here is my code where I had 10 values, one value every 50ms.

	/** * Creates a graph container with a month of random data */
	public Container.Indexed createGraphDataSource(){
		
		// Create the container
		Container.Indexed container = new IndexedContainer();
			
		// Add the required property ids, we use the default ones here
		container.addContainerProperty(Timeline.PropertyId.TIMESTAMP, 
			Date.class, null);
		container.addContainerProperty(Timeline.PropertyId.VALUE, 
			Float.class, 0f);
		container.addContainerProperty(Timeline.PropertyId.CAPTION, String.class, "Our marker symbol");
			
		// Add some random data to the container
		Calendar cal = Calendar.getInstance();
		cal.add(Calendar.MILLISECOND, -1000);
			
		int i = 0;
		while(i<10){
			// Create  a point in time
			Item item = container.addItem(cal.getTime());
				
			// Set the timestamp property
			item.getItemProperty(Timeline.PropertyId.TIMESTAMP)
				.setValue(cal.getTime());
				
			// Set the value property
			item.getItemProperty(Timeline.PropertyId.VALUE)
				.setValue(i);
			
			item.getItemProperty(Timeline.PropertyId.CAPTION).setValue(cal.getTime().toString());
			
			cal.add(Calendar.MILLISECOND, 50);	
			i++;
		}
			
		return container;		
	}

Waat I would like is something like this :

Thank you for reading !

Sebastian

The reason you are not seeing the horizontal scale is that currently the Vaadin Timeline’s horizontal scale’s minimum unit is a second. For example, if you are between two seconds, for instance the range 00:00:00:100 - 00:00:00:900) you will not see any horizontal scale drawn.

The Timeline always displays a timestamp in the x-axis, you cannot change that currently. However, you can change how it formats that timestamp by using the methods found in the object returned by Timeline.getDateFormats().

Support for the millisecond horizontal scale will be introduced in the upcoming Timeline 1.3 version.

The
Vaadin Timeline 1.3
has now been released which will also support very small value ranges. Try it out and see if it works for you. :slight_smile: