PeriodSelector displays date input fields and predefined period buttons.


dateFormatStringDD-MM-YYYYDate format of date input fields. Check this page for possible codes. Note, only numeric date formats are allowed, so don't use MMM or MMMM month format.

Please note that two-digit years (YY) is NOT supported in this setting.
fromTextStringFrom:Text displayed next to "from" date input field.
hideOutOfScopePeriodsBooleantrueSpecifies if period buttons with date range bigger than available data should be hidden.
inputFieldsEnabledBooleantrueSpecifies whether period selector displays "from" and "to" date input fields.
inputFieldWidthNumber100Width of date input fields, in pixels. Works only if period selector is horizontal.
listenersArray[Object]You can add listeners of events using this property. Example: listeners = [{"event":"changed", "method":handleEvent}];
periodsArray[Object]Array of predefined period objects. Period object has 4 properties - period, count, label and selected. Possible period values are: "ss" - seconds, "mm" - minutes, "hh" - hours, "DD" - days, "MM" - months and "YYYY" - years. property "count" specifies how many periods this button will select. "label" will be displayed on a button and "selected" is a boolean which specifies if this button is selected when chart is initialized or not. Example: {period:"DD", count:10, label:"10 days", selected:false}.
periodsTextStringZoom:Text displayed next to predefined period buttons.
positionStringbottomPossible values: "right", "left", "top", "bottom".
selectFromStartBooleanfalseSpecifies whether predefined period buttons should select a period from the beginning or the end of the data.
toTextStringTo:Text displayed next to "to" date input field.
widthNumber180Width of a period selector, when position is "left" or "right".


addListener(type, handler)type - string like 'changed' (listed in 'events' section of this class). handler - function which is called when event happens
removeListener(obj, type, handler)
setDefaultPeriod()Resets the chart zoom to whatever default PeriodSelector button is. Can be used to simulate a click on period buttons buy changing "selected" property of PeriodSelector.periods items.


NameEvent objectDescription
changed{type:"changed", startDate:Date, endDate:Date, predefinedPeriod:periodString, count:Number, event:MouseEvent}Dispatched when dates in period selector input fields are changed or user clicks on one of the predefined period buttons.