TimelineHistogram
Widget

This view displays histograms for the provided store records.

A ScaleColumn is also added automatically.

To create a standalone histogram, simply configure it with a Store instance:

const store = new Store({
    data : [
        {
            id            : 'r1',
            name          : 'Record 1',
            // data used to render a histogram for this record
            histogramData : [
                { value1 : 200, value2 : 100 },
                { value1 : 150, value2 : 50 },
                { value1 : 175, value2 : 50 },
                { value1 : 175, value2 : 75 }
            ]
        },
        {
            id            : 'r2',
            name          : 'Record 2',
            // data used to render a histogram for this record
            histogramData : [
                { value1 : 100, value2 : 100 },
                { value1 : 150, value2 : 125 },
                { value1 : 175, value2 : 150 },
                { value1 : 175, value2 : 75 }
            ]
        }
    ]
});

const histogram = new TimelineHistogram({
    appendTo  : 'targetDiv',
    startDate : new Date(2022, 11, 26),
    endDate   : new Date(2022, 11, 30),
    store,
    // specify series displayed in the histogram
    series : {
        value1 : {
            type  : 'bar',
            field : 'value1'
        },
        value2 : {
            type  : 'bar',
            field : 'value2'
        }
    },
    columns : [
        {
            field : 'name',
            text  : 'Name'
        }
    ]
});

Providing histogram data

There are two basic ways to provide histogram data:

the data can be provided statically in a record field configured as dataModelField:

const store = new Store({
    data : [
        {
            id   : 11,
            name : 'John Smith',
            // data used to render a histogram for this record
            hd   : [
                { weight : 200, price : 100 },
                { weight : 150, price : 105 },
                { weight : 175, price : 90 },
                { weight : 175, price : 95 }
            ]
        }
    ]
});

const histogram = new TimelineHistogram({
    dataModelField : 'hd',
    series : {
        weight : {
            type : 'bar'
        },
        price : {
            type : 'outline'
        }
    },
    ...
});

the data can be collected dynamically with the provided getRecordData function:

const histogram = new TimelineHistogram({
    dataModelField : 'hd',
    series : {
        weight : {
            type : 'bar'
        },
        price : {
            type : 'outline'
        }
    },
    ...
    async getRecordData(record) {
        // we get record histogram data from the server
        const response = await fetch('https://some.url/to/get/data?' + new URLSearchParams({
            // pass the record identifier and the time span we need data for
            record    : record.id,
            startDate : DateHelper.format(this.startDate),
            endDate   : DateHelper.format(this.endDate),
        }));
        return response.json();
    }
});

Please check "Timeline histogram" guide for more details.

Configs

Configs are options you supply in a configuration object when creating an instance of this class

resourceTimeRangeRenderer : Function

FROM-FEATURE
An empty function by default, but provided so that you can override it. This function is called each time a resource time range is rendered into the schedule. It's called with resourceTimeRangeRecord, resourceRecord, and renderData params.

You should never modify any records inside this method.

By default, the DOM markup of a resource time range bar includes placeholders for 'cls' and 'style'. The cls property is a DomClassList which will be added to the main element. The style property is an inline style declaration for the main element.

IMPORTANT: When returning content, be sure to consider how that content should be encoded to avoid XSS (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as the event's name. The function encodeHtml as well as xss can be helpful in these cases.
```
resourceTimeRangeRenderer({ resourceTimeRangeRecord, resourceRecord, renderData }) {
    renderData.style = 'color:white'; // You can use inline styles too.

    // Property names with truthy values are added to the resulting elements CSS class.
    renderData.cls.isModified = resourceTimeRangeRecord.isModified;

    // Or, you can treat it as a string, but this is less efficient, especially
    // if your renderer wants to *remove* classes that may be there.
    renderData.cls += ' extra-class';

    return StringHelper.xss`${DateHelper.format(resourceTimeRangeRecord.startDate, 'YYYY-MM-DD')}:
    ${resourceTimeRangeRecord.name}`;
}
```
Added by the ResourceTimeRanges feature, only available when that feature is enabled.
Parameters
- detail : Object
  
  An object containing the information needed to render a ResourceTimeRangeModel.
- resourceTimeRangeRecord : ResourceTimeRangeModel
  
  The resource time range record.
- resourceRecord : ResourceModel
  
  The resource record.
- renderData : Object
  
  An object containing details about the event rendering.
Returns

String/DomConfig/DomConfig[]
:

A simple string, or a DomConfig object describing the markup

Properties

Properties are getters/setters or publicly accessible variables on this class

isTimelineHistogram : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TimelineHistogram class, or subclass thereof.

isTimelineHistogram : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TimelineHistogram class, or subclass thereof.

Functions

Functions are methods available for calling on the class

showContextMenu( event, alignSpec )
: Promise

ASYNC

Shows the context menu.
resolveResourceTimeRangeRecord( rangeElement )
: ResourceTimeRangeModel

FROM-FEATURE

Returns a resource time range record from the passed element

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
getElementFromResourceTimeRangeRecord( record )
: HTMLElement

FROM-FEATURE

Returns the element for the passed resource time range record, if rendered into DOM.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
split( options )
: Promise

ASYNC

FROM-FEATURE
Split the grid into two or four parts.
- Splits into two when passed direction : 'vertical', direction : 'horizontal' or atColumn or atRecord.
- Splits into four when passed direction : 'both' or atColumn and atRecord.
```
// Split horizontally (at the row in the center of the grid)
await grid.split({ direction : 'horizontal' });

// Split both ways by a specific column and record
await grid.split({
   atRecord : grid.store.getById(10),
   atColumn : grid.columns.get('city')
});
```
To return to a single grid, call unsplit.

Note that this function is callable directly on the grid instance.

Added by the Split feature, only available when that feature is enabled.
unsplit( )
: Promise

ASYNC

FROM-FEATURE

Remove splits, returning to a single grid.

Note that this function is callable directly on the grid instance.

Added by the Split feature, only available when that feature is enabled.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

timeRangeHeaderClick

Fired on the owning Scheduler or Gantt widget when a click happens on a time range header element
timeRangeHeaderDblClick

Fired on the owning Scheduler or Gantt widget when a double click happens on a time range header element
timeRangeHeaderContextMenu

Fired on the owning Scheduler or Gantt widget when a right click happens on a time range header element
beforePan

PREVENTABLE

FROM-FEATURE

Fires on the owning Scheduler or Gantt widget before pan starts. Return false to prevent the operation.

Added by the Pan feature, only available when that feature is enabled.
contextMenuItem

This event fires on the owning widget when an item is selected in the context menu.
contextMenuToggleItem

This event fires on the owning widget when a check item is toggled in the context menu.
resourceMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This event fires on the owning scheduler before the context menu is shown for a resource. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the ResourceMenu feature, only available when that feature is enabled.
resourceMenuShow

FROM-FEATURE

This event fires on the owning scheduler after the context menu is shown for a resource.

Added by the ResourceMenu feature, only available when that feature is enabled.
resourceMenuItem

FROM-FEATURE

This event fires on the owning scheduler when an item is selected in the context menu.

Added by the ResourceMenu feature, only available when that feature is enabled.
resourceMenuToggleItem

FROM-FEATURE

This event fires on the owning grid when a check item is toggled in the context menu.

Added by the ResourceMenu feature, only available when that feature is enabled.
resourceTimeRangeMouseDown

FROM-FEATURE

Triggered for mouse down ona resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
resourceTimeRangeMouseUp

FROM-FEATURE

Triggered for mouse up ona resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
resourceTimeRangeClick

FROM-FEATURE

Triggered for click on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
resourceTimeRangeDblClick

FROM-FEATURE

Triggered for double-click on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
resourceTimeRangeContextMenu

FROM-FEATURE

Triggered for right-click on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
resourceTimeRangeMouseOver

FROM-FEATURE

Triggered for mouse over on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
resourceTimeRangeMouseOut

FROM-FEATURE

Triggered for mouse out of a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
gridRowBeforeDragStart

PREVENTABLE

FROM-FEATURE

Fired before dragging starts, return false to prevent the drag operation.

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDragStart

FROM-FEATURE

Fired when dragging starts.

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDrag

FROM-FEATURE

Fired while the row is being dragged, in the listener function you have access to context.insertBefore a grid / tree record, and additionally context.parent (a TreeNode) for trees. You can signal that the drop position is valid or invalid by setting context.valid = false;

Added by the RowReorder feature, only available when that feature is enabled.
gridRowBeforeDropFinalize

ASYNC

PREVENTABLE

FROM-FEATURE

Fired before the row drop operation is finalized. You can return false to abort the drop operation, or a Promise yielding true / false which allows for asynchronous abort (e.g. first show user a confirmation dialog).

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDrop

FROM-FEATURE

Fired after the row drop operation has completed, regardless of validity

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDragAbort

FROM-FEATURE

Fired when a row drag operation is aborted

Added by the RowReorder feature, only available when that feature is enabled.
split

FROM-FEATURE

Fires when splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
unsplit

FROM-FEATURE

Fires when un-splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
headerMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This event fires on the owning Grid before the context menu is shown for a header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
headerMenuShow

FROM-FEATURE

This event fires on the owning Grid after the context menu is shown for a header

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
headerMenuItem

FROM-FEATURE

This event fires on the owning Grid when an item is selected in the header context menu.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
headerMenuToggleItem

FROM-FEATURE

This event fires on the owning Grid when a check item is toggled in the header context menu.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
timeAxisHeaderMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This event fires on the owning Scheduler or Gantt widget before the context menu is shown for the time axis header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
timeAxisHeaderMenuShow

FROM-FEATURE

This event fires on the owning Scheduler or Gantt widget after the context menu is shown for a header

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
timeAxisHeaderMenuItem

FROM-FEATURE

This event fires on the owning Scheduler or Gantt widget when an item is selected in the header context menu.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
currentTimelineUpdate

FROM-FEATURE

Fires on the owning Scheduler/Gantt when the line indicating the current time is updated (see currentTimeLineUpdateInterval).

Added by the TimeRanges feature, only available when that feature is enabled.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onTimeRangeHeaderClick

Called on the owning Scheduler or Gantt widget when a click happens on a time range header element
onTimeRangeHeaderDblClick

Called on the owning Scheduler or Gantt widget when a double click happens on a time range header element
onTimeRangeHeaderContextMenu

Called on the owning Scheduler or Gantt widget when a right click happens on a time range header element
onBeforePan

PREVENTABLE

FROM-FEATURE

Called on the owning Scheduler or Gantt widget before pan starts. Return false to prevent the operation.

Added by the Pan feature, only available when that feature is enabled.
onContextMenuItem

This handler is called on the owning widget when an item is selected in the context menu.
onContextMenuToggleItem

This handler is called on the owning widget when a check item is toggled in the context menu.
onResourceMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This handler is called on the owning scheduler before the context menu is shown for a resource. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the ResourceMenu feature, only available when that feature is enabled.
onResourceMenuShow

FROM-FEATURE

This handler is called on the owning scheduler after the context menu is shown for a resource.

Added by the ResourceMenu feature, only available when that feature is enabled.
onResourceMenuItem

FROM-FEATURE

This handler is called on the owning scheduler when an item is selected in the context menu.

Added by the ResourceMenu feature, only available when that feature is enabled.
onResourceMenuToggleItem

FROM-FEATURE

This handler is called on the owning grid when a check item is toggled in the context menu.

Added by the ResourceMenu feature, only available when that feature is enabled.
onResourceTimeRangeMouseDown

FROM-FEATURE

Called for mouse down ona resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
onResourceTimeRangeMouseUp

FROM-FEATURE

Called for mouse up ona resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
onResourceTimeRangeClick

FROM-FEATURE

Called for click on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
onResourceTimeRangeDblClick

FROM-FEATURE

Called for double-click on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
onResourceTimeRangeContextMenu

FROM-FEATURE

Called for right-click on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
onResourceTimeRangeMouseOver

FROM-FEATURE

Called for mouse over on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
onResourceTimeRangeMouseOut

FROM-FEATURE

Called for mouse out of a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Added by the ResourceTimeRanges feature, only available when that feature is enabled.
onGridRowBeforeDragStart

PREVENTABLE

FROM-FEATURE

Called before dragging starts, return false to prevent the drag operation.

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDragStart

FROM-FEATURE

Called when dragging starts.

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDrag

FROM-FEATURE

Called while the row is being dragged, in the listener function you have access to context.insertBefore a grid / tree record, and additionally context.parent (a TreeNode) for trees. You can signal that the drop position is valid or invalid by setting context.valid = false;

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowBeforeDropFinalize

ASYNC

PREVENTABLE

FROM-FEATURE

Called before the row drop operation is finalized. You can return false to abort the drop operation, or a Promise yielding true / false which allows for asynchronous abort (e.g. first show user a confirmation dialog).

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDrop

FROM-FEATURE

Called after the row drop operation has completed, regardless of validity

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDragAbort

FROM-FEATURE

Called when a row drag operation is aborted

Added by the RowReorder feature, only available when that feature is enabled.
onSplit

FROM-FEATURE

Called when splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
onUnsplit

FROM-FEATURE

Called when un-splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
onHeaderMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This handler is called on the owning Grid before the context menu is shown for a header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
onHeaderMenuShow

FROM-FEATURE

This handler is called on the owning Grid after the context menu is shown for a header

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
onHeaderMenuItem

FROM-FEATURE

This handler is called on the owning Grid when an item is selected in the header context menu.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
onHeaderMenuToggleItem

FROM-FEATURE

This handler is called on the owning Grid when a check item is toggled in the header context menu.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
onTimeAxisHeaderMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This handler is called on the owning Scheduler or Gantt widget before the context menu is shown for the time axis header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
onTimeAxisHeaderMenuShow

FROM-FEATURE

This handler is called on the owning Scheduler or Gantt widget after the context menu is shown for a header

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
onTimeAxisHeaderMenuItem

FROM-FEATURE

This handler is called on the owning Scheduler or Gantt widget when an item is selected in the header context menu.

Added by the TimeAxisHeaderMenu feature, only available when that feature is enabled.
onCurrentTimelineUpdate

FROM-FEATURE

Called on the owning Scheduler/Gantt when the line indicating the current time is updated (see currentTimeLineUpdateInterval).

Added by the TimeRanges feature, only available when that feature is enabled.

TimelineHistogram
Widget

Providing histogram data

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Inheritance tree9

Mixins26

Features13

Contents

TimelineHistogram Widget

Providing histogram data

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Inheritance tree9

Mixins26

Features13

Contents

TimelineHistogram
Widget