Lollipop

A Temporal Lollipop is a way of representing events that consist of some numerical values that occurs over time.

Visually, the lollipop chart consists of a line (or a thin bar) with a circle on top of it. The position of the bar will represent the timestamp of the event and the height of the bar will represent its value.

So, Temporal Lollipop charts are two-dimensional with two axes: one axis for the timestamp of the event, and the other axis for its numerical value. Those numerical values are indicated by the position of the circle on top of the line.

It is particularly useful to show events that occur close in time, but whose duration can generate overlapping drawings if, for example, a timeline were used. Thus allowing us to visualize events very close together, without losing the information about their duration.

This functionality is provided by the live-exploratory-viz plugin. It is available on the marketplace.

Functional description

• The result of the query pipes must have at least one numerical value related to a timestamp:

  => random() as value every 5 sec

The widget works in vertical orientation and also in horizontal orientation.

• As a temporal version of the lollipop chart, the x-axis always refers to a time period (timestamp):

The widget works in real time and also in closed time periods

• We can modify the group colors by inserting the __color variable in the query pipes, like:

  => random() as value every 5 sec => @set value > 0.5 as category => @set value < 0.5 ? '#C0392B', '#607D8B' as __color => value, __color by category

• We can use other symbols besides circles, which can display category information more intuitively. So, we can modify the group markers in the query pipes, inserting the variables __markerSymbol to change the symbol type and __markerRadius to change the symbol size, like:

  => random() as value every 5 sec => @set value > 0.5 as category => @set value < 0.5?'#C0392B', '#607D8B' as __color => @set value < 0.5? 'square', 'diamond' as __markerSymbol => @set 6 as __markerRadius => value, __color, __markerSymbol, __markerRadius by category

• Possible values of __markerSymbol are 'circle', 'square','diamond', 'triangle' and 'triangle-down'.

• For correct group creation, these variables must always be grouped in the query pipes by the by clause, like:

  => value, __markerSymbol,__markerRadius, __color by category

• The categories serve as captions and can be located on bottom, right or hidden.

Bottom Legend

Right Legend

Hidden Legend