ScheduleJS features two and (soon three) layouts that you can use for any row of your graphics. This article describes what is a layout, how it is used, and what are the differences between these layouts.

What is a Layout?

A layout is a set of tools used to render your activities. Every layout has its specificities. For example, when you set a row layout to be the ChartLayout, you’re telling your graphics that you want to show the data in two dimensions (time and value), express every value held by an activity in proportion with the other activities’ values, and that you need to create a scale to tell the user what does the vertical dimension means in terms of value for an activity.

The requirements

To ensure their activities meet the requirements and to render their data, layouts require:

• Their activities to extend one of the higher-order activity classes (ex: ChartActivity, MutableActivity, …)
• The renderer to also extends a higher-order class corresponding to the layout (ex: ChartActivityRender, ActivityBarRenderer, …)

The GanttLayout

The GanttLayout is the default layout type for a row. It is also the most basic layout as it only covers a single dimension: time. To use the GanttLayout, the only attribute you have to provide to the activity is its start and end time. Alternatively, you can use a GanttLayout in combination with a custom ActivityRenderer to design a way for the user to picture the values it holds.

The ChartLayout

The ChartLayout will let you build activities into the form of a histogram. It attaches a specific value to render the activity height based on it. There are two styles of chart layout:

• The Charts
• The High-Low Charts

The following example shows a High-Low Chart coupled with a regular Chart. The High-Low Chart describes stocks opening and closing values and the spread, while the Chart describes daily volumes.

The AgendaLayout

The AgendaLayout is used to build large rows representing daily activity vertically.

It is only present in our development branch and is not yet available in ScheduleJS 1.3. Expect it to make it soon to production.

Stay tuned for more! Here is a screenshot from our development build:

For the final result, take a look: The Layout types