← Back


Component for visualizing periodic data.




Periodic is a component for visualizing recurring data.


The graph is given the maximum value that will be found in the data items e.g. if working with monthly occurrences it would be 31 or with hours in a day then the given value would be 24.

The component works as a layout and can be given Vaadin components that will be added vertically below the graph part of the component. But the main recommendation would be to not use it as a layout.

Data Items and paintables: The base add-on contains 2 item types PeriodicItem and Split. PeriodicItem contains data for one item instance and is drawn to given length and gets the added label.

Split is used to create a visual split (vertical line) with text (inside line not as a bottom label) and contains no data.

Custom Item Implementations can be made

Required on the Server Side: To create your own items all you need to do on the server side if you want to have a periodic data item is to implement the [Periodical] interface. If the item only wants to be drawn then no server side extensions or implementations are needed.

Required on the Client Side: On the client side there are 3 interfaces that can be implemented.

To not have the component evaluate the custom item as any Vaadin component the widget should implement the [PeriodicPaintable] interface.

To get drag events to position the component the [PeriodicMovable] interface should be implemented.

Then if the component is a periodic data item then the [PeriodicalItem] interface should be implemented.

Data estimation:

When having enough data (basically 3 or more periods) the component can when given an Estimate.class implementation fill in empty future items with estimated occurrences.

The existing estimators are Mean and Median that just take the mean or median value of the "empty" and "actual" data in the given set.

Estimation can be much more flexible and targeted for data as the Estimator implementation is given the "actual" data as a int list in the order they come up and the same for the "empty" data. Also the whole dataset is collected for the estimator to use as a EstimateData list that contains the DataType and the length of the data and is in the order they appear.

Estimation is done with the command periodic.estimateOccurrences(Median.class);

Sample code

Periodic periodic = new Periodic();
// Default width is 400px and height is 300px for the graph

// setHeight(String height) only limits the height for layouting with non paintable components


periodic.addComponent(new Split("2014"));

// Note how one of the periods continues from April to May
periodic.addComponent(new PeriodicItem("Apr", 30, new Period("3:7"), new Period("28:30")));
periodic.addComponent(new PeriodicItem("May", 31, new Period("1:3"), new Period("20:26")));
periodic.addComponent(new Split("2015"));

// NOTE: PeriodicItem handles periods as starting from 1:max instead of 0:max-1
package org.percepta.mgrankvi.periodic;

import java.util.Collections;

 * Creates and estimate of future data based on mean of existing data
 * Created by Mikael on 27/03/14.
public class Mean extends Estimate {

    public void calculate() {



    private void emptyMean() {
        empty = 0;
        for (int empt : empties) {
            empty += empt;

        empty -= empties.getFirst();
        empty -= empties.getLast();
        empty = empty / (empties.size() - 2);

    private void actualMean() {
        actual = 0;
        for (int act : actuals) {
            actual += act;
        actual -= actuals.getFirst();
        actual -= actuals.getLast();
        actual = actual / (actuals.size() - 2);

    public int getLengthOfNextEmpty() {
        return empty;

    public int getLengthOfNextPeriod() {
        return actual;



(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.


First version release

Apache License 2.0


Vaadin 7.2+
Google Chrome
Internet Explorer