Vaadin Calendar

BasicEvent event = new BasicEvent(); event.setCaption("My Event"); event.setDescription("My Event Description"); event.setStart(start);

event.setEnd(end);

events.add(event);

}

public void addEvent(CalendarEvent BasicEvent) { events.add(BasicEvent);

}

public List<CalendarEvent> getEvents(Date startDate, Date endDate) {

return events;

}

}

After these changes, the user can move events around as earlier, but dropping an event, the start and end dates are checked by the server. Note that as the server-side must move the event in order for it to render to the place it was dropped. The server can also reject moves by not doing anything when the event is received.

18.9.8. Handling Drag Selection

Drag selection works both in the monthly and weekly views. To listen for drag selection, you can add a RangeSelectListener to the Calendar. There is no default handler for range select.

In the code example below, we create an new event when any date range is selected. Drag selection opens a window where the user is asked for a caption for the new event. After confirming, the new event is be passed to the event provider and calendar is updated. Note that as our example event provider and event classes do not implement the event change interface, we must refresh the Calendar manually after changing the events.

cal.setHandler(new RangeSelectHandler() {

public void rangeSelect(RangeSelectEvent event) { BasicEvent calendarEvent = new BasicEvent(); calendarEvent.setStart(event.getStart()); calendarEvent.setEnd(event.getEnd());

// Create popup window and add a form in it. VerticalLayout layout = new VerticalLayout(); layout.setMargin(true); layout.setSpacing(true);

final Window w = new Window(null, layout);

...

//Wrap the calendar event to a BeanItem

//and pass it to the form

final BeanItem<CalendarEvent> item =

new BeanItem<CalendarEvent>(myEvent);

final Form form = new Form(); form.setItemDataSource(item);

...

layout.addComponent(form);

HorizontalLayout buttons = new HorizontalLayout(); buttons.setSpacing(true);

buttons.addComponent(new Button("OK", new ClickListener() {

Handling Drag Selection

409

Vaadin Calendar

public void buttonClick(ClickEvent event) { form.commit();

//Update event provider's data source provider.addEvent(item.getBean());

//Calendar needs to be repainted cal.requestRepaint(); getMainWindow().removeWindow(w);

}

}));

...

}

});

18.9.9. Resizing Events

The user can resize an event by dragging from both ends to change its start or end time. This offers a convenient way to change event times without the need to type anything. The default resize handler sets the start and end time of the event according to the resize.

In the example below, we set a custom handler for resize events. The handler prevents any event to be resized over 12 hours in length. Note that this does not prevent the user from resizing an event over 12 hours in the client. The resize will just be corrected by the server.

cal.setHandler(new BasicEventResizeHandler() {

private static final long twelveHoursInMs = 12*60*60*1000;

protected void setDates(CalendarEventEditor event, Date start, Date end) {

long eventLength = end.getTime() - start.getTime(); if (eventLength <= twelveHoursInMs) {

super.setDates(event, start, end);

}

}

});

410	Resizing Events

Chapter 19

Vaadin Charts

19.1. Overview ..............................................................................................	411
19.2. Installing Vaadin Charts .......................................................................	413
19.3. Basic Use ............................................................................................	414
19.4. Chart Types .........................................................................................	417
19.5. Chart Configuration .............................................................................	427
19.6. Chart Data ...........................................................................................	429
19.7. Advanced Uses ....................................................................................	432

This chapter provides the documentation of Vaadin Charts version 1.0. Some changes may apply to the final version.

19.1. Overview

Vaadin Charts is a feature-rich interactive charting library for Vaadin. It provides a Chart and a Timeline component. The Chart can visualize oneand two dimensional numeric data in many available chart types. The charts allow flexible configuration of all the chart elements as well as the visual style. The library includes a number of built-in visual themes, which you can extend further.The basic functionalities allow the user to interact with the chart elements in various ways, and you can define custom interaction with click events.The Timeline is a specialized component for visualizing time series, and is described in Chapter 20, Vaadin Timeline.

The data displayed in a chart can be oneor two dimensional tabular data, or scatter data with free X and Y values. Data displayed in range charts has minimum and maximum values instead of singular values.

Book of Vaadin

411

Vaadin Charts

Figure 19.1. Vaadin Charts with Bar, Column, Area, and Pie Charts

This chapter covers the basic use of Vaadin Charts and the chart configuration. For detailed documentation of the configuration parameters and classes, please refer to the JavaDoc API documentation of the library.

In the following basic example, which we study further in Section 19.3, “Basic Use”, we demonstrate how to display one-dimensional data in a column graph and customize the X and Y axis labels and titles.

Chart chart = new Chart(ChartType.BAR); chart.setWidth("400px"); chart.setHeight("300px");

//Modify the default configuration a bit Configuration conf = chart.getConfiguration(); conf.setTitle("Planets");

conf.setSubTitle("The bigger they are the harder they pull"); conf.getLegend().setEnabled(false); // Disable legend

//The data

ListSeries series = new ListSeries("Diameter"); series.setData(4900, 12100, 12800,

6800, 143000, 125000, 51100, 49500);

conf.addSeries(series);

// Set the category labels on the axis correspondingly XAxis xaxis = new XAxis(); xaxis.setCategories("Mercury", "Venus", "Earth",

412

Overview