- Back to Docs
- Get Started
- Integrations
- Configuring your Charts
- List of Charts
- Chart Attributes
- API
- Options & Properties
- Methods
- Events
- Other References
- Concepts
- Browser and Technology Support
- Change Log
- License Activation
Timeseries Chart Attributes
Time Axis
The xAxis
object is used to configure components of Time Axis. You can create the xAxis
object under dataSource
.
new FroalaCharts({ type: 'timeseries', dataSource: { xAxis { plot: ' ', //Column Name showTimeSpanMarkerTooltipAt: , // Crosslines on time span markers timemarker: [{ // Attributes of Time Marker }], binning: { }, //Multipliers for each time unit outputTimeFormat: { }, //date/time format initialInterval: { } //the spread of the active window } }, });
Attribute | Type | Description |
---|---|---|
plot |
String | Defines the column, which will be plotted along this axis. |
showTimeSpanMarkerTooltipAt |
Number | Specifies how to show the time span marker tooltip. Valid values are [1,0] |
timeMarker |
Array(Time Marker Configuration) | Array of TimeMarkerConfigs that will be shown along the axis. |
binning |
Object | An object to specify multipliers for each time unit in an array format. |
outputTimeFormat |
Object | An object to specify the date-time format for a specific time unit. |
initialInterval |
Object | An object to set the initial spread of the active window. |
Style Time Axis
You can add style to the x-Axis components using style
object under xaxis
object.
new FroalaCharts({ "type": 'timeseries', "dataSource": { xAxis { "plot": ' ', //Column Name "style": { "tick-mark": {}, //SVGStyle | String "tick-mark-major": {}, //SVGStyle | String "tick-mark-minor": {}, //SVGStyle | String "label": {}, //SVGStyle | String "label-major": {}, //SVGStyle | String "label-minor": {}, //SVGStyle | String "label-context": {} //SVGStyle | String } } }, });
Attribute | Type | Description |
---|---|---|
tick-mark |
SVGStyle | Styles both major and minor ticks. |
tick-mark-major |
SVGStyle | Styles the major tick of the time axis. |
tick-mark-minor |
SVGStyle | Styles the minor tick of the time axis. |
label |
SVGStyle | Styles the labels of major and minor ticks on time axis. |
label-major |
SVGStyle | Styles the labels of major ticks on time axis. |
label-minor |
SVGStyle | Styles the labels of minor ticks on time axis. |
label-context |
SVGStyle | Styles the contextual label of the time axis. |
Binning
To add multipliers for each time unit you can create a binning
object under xaxis
object.
new FroalaCharts({ type: 'timeseries', dataSource: { xAxis: { binning: { "year": [Array of multipliers] // Ex - [1,2,3,5,10] "month": [Array of multipliers] // Ex - [1,2,3,4,6] "day": [Array of multipliers] // Ex - [1,2,3,5,6,10,15] "hour": [Array of multipliers] // Ex - [1,2,3,4,6,8,12] "minute": [Array of multipliers] // Ex - [1,2,3,4,5,6,10,12,15,20,30] "second": [Array of multipliers] // Ex - [1,2,3,4,5,6,10,12,15,20,30] "millisecond": [Array of multipliers] // Ex - [10,20,50,100,200,250,500] } }, } });
Attribute | Type | Description |
---|---|---|
year |
Array | An array to specify the year's multipliers. |
month |
Array | An array to specify the month's multipliers. Valid multipliers are: [1, 2, 3, 4, 6]. |
day |
Array | An array to specify the days's multipliers. Valid multipliers are: [1, 2, 3, 5, 6, 10, 15]. |
hour |
Array | An array to specify the hour's multipliers. Valid multipliers are: [1, 2, 3, 4, 6, 8, 12]. |
minute |
Array | An array to specify the minute's multipliers. Valid multipliers are: [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]. |
second |
Array | An array to specify the second's multipliers. Valid multipliers are: [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]. |
millisecond |
Array | An array to specify the millisecond's multipliers. Valid multipliers are: [10, 20, 50, 100, 200, 250, 500]. |
Output Time Format
To specify the date-time format for a specific time unit, create a outputTimeFormat
object under xaxis
object.
new FroalaCharts({ type: "timeseries", dataSource: { xAxis: { outputTimeFormat: { year: " ", //%Y - 2018 month: " ", //%B, %Y - September, 2018 day: " ", //%B %-d, %Y - November 11, 2018 hour: " ", //%b %-d, %Y, %-I %p - Nov 5, 2018, 4 PM minute: " ", //%b %-d, %Y, %-I:%-M %p - Nov 5, 2018, 4:24 PM second: " ", //%b %-d, %Y, %-I:%-M:%-S %p - Nov 5, 2018, 4:25:30 PM millisecond: " " //%b %-d, %Y, %-I:%-M:%-S:%-L %p- Nov 29, 2017, 4:29:12.075 PM } } } });
Attribute | Type | Description |
---|---|---|
year |
String | Sets the format of the data bin where the time unit is year. |
month |
String | Sets the format of the data bin where the time unit is month. |
day |
String | Sets the format of the data bin where the time unit is day. |
hour |
String | Sets the format of the data bin where the time unit is hour. |
minute |
String | Sets the format of the data bin where the time unit is minute. |
second |
String | Sets the format of the data bin where the time unit is second. |
millisecond |
String | Sets the format of the data bin where the time unit is millisecond. |
Initial Interval
To set the initial spread of the active window of the time navigator create a initialInterval
object under xaxis
object.
new FroalaCharts({ type: "timeseries", dataSource: { xAxis: { initialInterval: { from: "2016-01-01 12:00:00", to: "2016-01-31 12:00:00" } } } });
Attribute | Type | Description |
---|---|---|
from |
String | Sets the value from where you want the active window to start. |
to |
String | Sets the value upto which you want your active window to be displayed. |
Time Markers
To configure the time marker of the chart you can create the timemarker
object under xaxis
object.
new FroalaCharts({ type: 'timeseries', dataSource: { xAxis { plot: ' ', //Column Name timemarker: [{ // Attributes of Time Marker start: ' ', //Start Date end: ' ', //End Date label: ' ', //Label of the Time Axis timeFormat: ' ', //Time format type: 'full', // Full time marker // Define the frequency, at which the cyclic time marker will be repeated. repeat { unit: ' ', //Defines the time unit for the time marker. multiplier: ' ', //Defines the multiplier of the time unit. type: ' ' //Renders the time marker from top to bottom of the canvas } }] } }, });
Attribute | Type | Description |
---|---|---|
label |
String | Sets the label of the time marker. |
start |
String | Sets the start time of the marker. Corresponds to the start of the date/time. |
end |
String | Sets the end time of the marker. If this is attribute is not specified, the marker is represented as a line and not as a band. Corresponds to the end of the given date/time. |
timeFormat |
String | Sets the date/time format and specifies the start and end values for the time marker. |
unit |
String | Defines the time unit for the time marker. |
multiplier |
Number | Sets the multiplier of the time unit. Default is 1. |
type |
String | Setting this attribute to full will render the time marker (instance & band) from top to bottom (vertically) of the canvas. |
Style Time Marker Componemts
You can add style to the time marker components using style
object under timemarker
object.
new FroalaCharts({ type: 'timeseries', dataSource: { xAxis { timemarker: [{ "style": { "marker": { }, // Affects style of marker box, line and notch "marker:hover": { }, // Affects hover style of marker box, line and // notch "marker-box": { }, "marker-box:hover": { }, "marker-line": { }, "marker-line:hover": { }, "marker-notch": { }, "marker-notch:hover": { }, "text": { }, "text:hover": { } } }] } }, });
Attribute | Type | Description |
---|---|---|
marker |
SVGStyle | Styles the marker box, line, and notch. |
marker:hover |
SVGStyle | Styles the marker box, line and notch when hovered. |
marker-box |
SVGStyle | Styles the marker box of the time marker. |
marker-box:hover |
SVGStyle | Styles the marker box of the time marker when hovered. |
marker-line |
SVGStyle | Styles the marker line of the time marker. |
marker-line:hover |
SVGStyle | Styles the marker line of the time marker when hovered. |
marker-notch |
SVGStyle | Styles the notch of the time marker. |
marker-notch:hover |
SVGStyle | Styles the notch of the time marker when hovered. |
text |
SVGStyle | Styles the text of the time marker. |
text:hover |
SVGStyle | Styles the text of the time marker when hovered. |
Time Navigator
To configure the time navigator of the chart, you can create the navigator
object under dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { navigator: { enabled: Boolean, scrollbar: {}, window: {}, label: {}, //SVGStyle | String "label-background": {}, //SVGStyle | String height: Number } } });
Attribute | Type | Description |
---|---|---|
enabled |
Boolean | Enables the time navigator of the chart. |
scrollbar |
Object | An object in which you can customize the scroll bar of the time navigator. |
window |
Object | An object in which you can customize the window of the time navigator. |
label |
String | Styles the label of the window in time navigator. |
label-background |
String | Styles the label background of the windoe in time navigator. |
height |
Number | An attribute to set the height of the time naviagator. You can also set the ratio with respect height of the canvas using canvasHeightProportion attribute where the fourth ratio will represent the height of the time navigator. |
Style Time Navigator Components
Time Navigator of a time-series chart can be divided into two sub-sections:
- Window
- Scroll Bar
You can add style to the time marker components using style
object under window
and scrollbar
object.
new FroalaCharts({ type: "timeseries", dataSource: { navigator: { enabled: Boolean, scrollbar: { style: { button: {}, //SVGStyle | String arrow: {}, //SVGStyle | String scroller: {}, //SVGStyle | String grip: {}, //SVGStyle | String track: {} //SVGStyle | String } }, window: { style: { handle: {}, //SVGStyle | String "handle-grip": {}, //SVGStyle | String mask: {} //SVGStyle | String } } } } });
Attribute | Type | Description |
---|---|---|
button |
SVGStyle | Styles the buttons present on the left and right most corner of the scroll bar. |
arrow |
SVGStyle | Styles the arrows present inside the buttons of the scroll bar. |
scroller |
SVGStyle | Styles the scroller of the scroll bar. |
grip |
SVGStyle | Styles the grip of the scroll bar. |
track |
SVGStyle | Styles the track of the scroll bar. |
handle |
SVGStyle | Styles the handle element of the scroll bar window. |
handle-grip |
SVGStyle | Styles the handle-grip of the handle element. |
mask |
SVGStyle | Styles the mask of the scroll bar window. |
Y Axes
To configure the y-axis of the chart you can create the yAxis
object under dataSource
object.
new FroalaCharts({ type: "timeseries", dataSource: { yAxis: [ { plotType: " ", //To set the plot type out the 'plot' object min: " ", //Minimum value of the axis max: " ", //Maximum value of the axis format: { //Measures prefix: " ", suffix: " " }, plot: { //Column header for the measure which is plotted against the Y Axis }, type: " ", //Plot type to render the chart title: " ", //Title of the axis aggregation: " " //Aggregate Function connectNullData: " " //Set the value totrue
to connect null data showGridband: " ", //Set the value to1
to show Grid Band defaultFormat: " ", //Default Format of the number round: " " //Round of the y-axis value } ] } });
Attribute | Type | Description |
---|---|---|
plot |
String, Array of Strings, Array of Objects | It maps to the column header for the measure which is plotted against the Y Axis. If it's an array of strings, all the strings are plotted against the same axis. If its an array of objects, the developer can additionally specify the type of the plot as well as the aggregation strategy used to represent the measure. |
plotType |
String | This attribute sets the type of the the data plot to render the chart. By default the type is a line. It controls the plot type for all names specified. |
min |
Number | This attribute sets the minimum value of the axis. The value of this attribute is ignored when the value is greater than the minimum value of the data plotted against the axis. |
max |
Number | This attribute sets the maximum value of the axis. The value of this attribute is ignored when the value is less than the maximum value of the data plotted against the axis. |
format |
String | This attribute sets the configuration of the measures plotted on the axis. If you set the formatter function, the provided prefix and suffix properties are ignored. |
title |
String | Allows you to rename the title of the axis. If not specified, the axis title will be the same as the column name joined by hyphens. |
aggregation |
String | Allows you to specify alternative aggregation strategies for the measures being plotted. It controls the aggregation strategy for all plots specified. |
type |
String | This attribute sets the type of the the data plot to render the chart. It is used when you want to specify the chart type under plot object. |
connectNullData |
Boolean | Connects the null data for line and area plots. |
showGridband |
Boolean | Horizontal bands running along with the canvas. |
defaultFormat |
Boolean | Disable the default formatting of the y-axis values to display the raw data. |
round |
Boolean | Round off the y-axis values. |
Style Connecting Lines
You can add style for connecting lines of null data using two methods:
- Under
yAxis
Object - Under global
plotConfig
object
new FroalaCharts({ type: "timeseries", dataSource: { "yAxis": [{ "plot": [{ "type": "area", "style": { "plot.null": { } //SVGStyle | String, "line.null": { } //SVGStyle | String, "area.null": { } //SVGStyle | String } }] }], "plotConfig": { "line": { "style": { "plot.null": { } //SVGStyle | String, "line.null": { } //SVGStyle | String } }, "area": { "style": { "plot.null": { } //SVGStyle | String, "line.null": { } //SVGStyle | String, "area.null": { } //SVGStyle | String } } } } });
Attributes | Type | Description |
---|---|---|
plot.null |
SVGStyle | Styles the connecting line of the plots in the canvas. |
line.null |
SVGStyle | Styles the connecting line of the line plots in the canvas. |
area.null |
SVGStyle | Styles the connecting line of the area plots in the canvas. |
Caption
To configure the caption of the chart, you can create the caption
object under dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { caption: { text: " ", //String position: " " //String | Default Value: Left } } });
Attributes | Type | Description |
---|---|---|
text |
String | Caption of the chart |
position |
String | Sets the position of the caption. The values can be: left, right or center. |
Sub-caption
To configure the sub-caption of the chart, you can create the subCaption
object under dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { subcaption: { text: " ", //String position: " " //String | Default Value: Left } } });
Attributes | Type | Description |
---|---|---|
text |
String | Sub-caption of the chart |
position |
String | Sets the position of the sub-caption. The values can be: left, right or center. |
Plot Configuration
To configure the plot of the chart, you can create the plotConfig
object under dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { plotConfig: { generic: { connectNullData: " " //Set the value to true to connect null data } //Style too be applied across the chart } } });Specific Data Plots
new FroalaCharts({ type: "timeseries", dataSource: { plotConfig: { style: { line: { connectNullData: " " //Set the value to true to connect null data } //Style too be applied only to line data plots } } } });
Attributes | Type | Description |
---|---|---|
generic |
Object | Style specified within this object is applied across the chart. |
connectNullData |
Boolean | Connects the null data for line and area plots. |
Crossline
You can add style to the crossline using style
object under crossline
object.
new FroalaCharts({ type: "timeseries", dataSource: { crossline: { style: { line: {}, //SVGStyle | String tag: {}, //SVGStyle | String label: {}, //SVGStyle | String "vertical-line": {}, //SVGStyle | String "vertical-tag": {}, //SVGStyle | String "vertical-label": {}, //SVGStyle | String "horizontal-line": {}, //SVGStyle | String "horizontal-tag": {}, //SVGStyle | String "horizontal-label": {} //SVGStyle | String } } } });
Attribute | Type | Description |
---|---|---|
line |
SVGStyle | Styles the line of the crossline. |
tag |
SVGStyle | Styles the tag of the crossline. |
label |
SVGStyle | Styles the label of the crossline. |
vertical-line |
SVGStyle | Styles the vertical line of the crossline. |
vertical-tag |
SVGStyle | Styles the tag of the vertical line of the crossline. |
vertical-label |
SVGStyle | Styles the label of the vertical line of the crossline. |
horizontal-line |
SVGStyle | Styles the horizontal line of the crossline. |
horizontal-tag |
SVGStyle | Styles the tag of the horizontal line of the crossline. |
horizontal-label |
SVGStyle | Styles the label of the horizontal line of the crossline. |
Reference Lines
To configure the reference line of the chart, you can create the referenceLine
object under dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { referenceLine: [ { label: " ", //Label of the reference line value: " " //Value of the reference line } ] } });
Attribute | Type | Description |
---|---|---|
label |
String | The label which gets displayed when you hover the reference lines. |
value |
Number | This attribute specifies the value at which the reference line is drawn. |
Reference Zone
To configure the reference zone of the chart, you can create the referenceZone
object under yAxis
object.
new FroalaCharts({ type: "timeseries", dataSource: { yAxis: [ { // Reference Zone referenceZone: [ { label: " ", //Label of the reference zone valueMax: " ", //Max value of the reference zone valueMin: " " //Min value of the reference zone } ] } ] } });
Attribute | Type | Description |
---|---|---|
label |
String | The label which gets displayed when you hover the reference zone. |
valueMax |
Number | This attribute specifies the max value upto which you want to create a reference zone. |
valueMin |
Number | This attribute specifies the min value from where you want to create a reference zone. |
Style Reference Zone
Reference zone of a time-series chart can be styled using style
object under referenceZone
object.
new FroalaCharts({ type: "timeseries", dataSource: { yAxis: [ { // Reference Zone referenceZone: [ { label: " ", //Label of the reference zone valueMax: " ", //Max value of the reference zone valueMin: " ", //Min value of the reference zone style: { marker: {}, //Style | String "marker:hover": {}, //Style | String "marker-zone": {}, //Style | String "marker-zone:hover": {}, //Style | String "marker-tag": {}, //Style | String text: {}, //Style | String "marker-text": {}, //Style | String "marker-notch": {}, //Style | String "marker-notch:hover": {}, //Style | String "marker-notch:hover": {}, //Style | String "marker-notch-connector": {}, //Style | String "marker-notch-connector:hover": {} //Style | String } } ] } ] } });
Tooltip
To configure the tooltip of the chart, you can create the tooltip
object under the dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { tooltip: { enabled: "0", // Disables the Tooltip outputTimeFormat: {} //date/time format } } });
Attribute | Type | Description |
---|---|---|
enabled |
Boolean | Setting this attribute to 1 enables the visibility of the tooltip for the chart. |
outputTimeFormat |
Object | An object to specify the date-time format for a specific time unit. |
Style Tooltip Components
You can add style to the tooltip using style
object under tooltip
object.
new FroalaCharts({ type: "timeseries", dataSource: { tooltip: { enabled: Boolean, style: { container: {}, //HTMLStyle | String text: {}, //HTMLtyle | String header: {}, //HTMLStyle | String body: {} //HTMLStyle | String } } } });
Attribute | Type | Description |
---|---|---|
container |
HTMLStyle | Customizes the containing box of the tooltip. |
text |
HTMLStyle | Customizes the text of the tooltip. |
header |
HTMLStyle | Customizes the header at the top of the tooltip. |
body |
HTMLStyle | Customizes all the text other than the header text. |
Output Time Format
To specify the date-time format for a specific time unit, create a outputTimeFormat
object under xaxis
object.
new FroalaCharts({ type: "timeseries", dataSource: { xAxis: { outputTimeFormat: { year: " ", //%Y - 2018 month: " ", //%B, %Y - September, 2018 day: " ", //%B %-d, %Y - November 11, 2018 hour: " ", //%b %-d, %Y, %-I %p - Nov 5, 2018, 4 PM minute: " ", //%b %-d, %Y, %-I:%-M %p - Nov 5, 2018, 4:24 PM second: " ", //%b %-d, %Y, %-I:%-M:%-S %p - Nov 5, 2018, 4:25:30 PM millisecond: " " //%b %-d, %Y, %-I:%-M:%-S:%-L %p- Nov 29, 2017, 4:29:12.075 PM } } } });
Attribute | Type | Description |
---|---|---|
year |
String | Sets the format of the data bin where the time unit is year. |
month |
String | Sets the format of the data bin where the time unit is month. |
day |
String | Sets the format of the data bin where the time unit is day. |
hour |
String | Sets the format of the data bin where the time unit is hour. |
minute |
String | Sets the format of the data bin where the time unit is minute. |
second |
String | Sets the format of the data bin where the time unit is second. |
millisecond |
String | Sets the format of the data bin where the time unit is millisecond. |
Legend
To configure the legend of the chart, you can create the legend
object under the dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { legend: { enabled: '1', //Enable / Disable legend item: [{ value: 'Series A' // name of visible legend item initiallyhidden: 1, // boolean attribute (default 0) to control the visibility of plot }, { value: 'Series B' initiallyhidden: 0, }] } } });
Attribute | Type | Description |
---|---|---|
enabled |
Boolean | This attribute lets you show/hide the legend, when included under the legend object. |
initiallyhidden |
Object | This attribute lets you keep the legend hidden when the chart is initially rendered. |
Data Markers
To configure the data marker of the chart, you can create the dataMarker
object under the dataSource
.
new FroalaCharts({ type: "timeseries", dataSource: { dataMarker: [ { time: " ", //Time on which the data marker will be shown value: " ", //Specifies the y-axis label on which the data marker will be applied identifier: " ", //Defines a character to be shown timeFormat: " ", //Format of the date tooltext: " " //Text in the tooltip } ] } });
Attribute | Type | Description |
---|---|---|
time |
String | Sets the time on which the data marker will be shown. Corresponds to the start of the given date/time. |
value |
String | Sets the y-axis label on which the data marker will be applied. |
timeFormat |
String | Sets the format of the date to specify the time for the marker. |
type |
String | Sets the type of the marker. Example, flag . |
identifier |
Character | This attribute defines a character to be shown within the data marker. |
tooltext |
String | The text specified in this attribute is displayed in the tooltip when you hover over the data marker. |
Standard Range Selector
To configure the standard range selector of the chart, you can create the standardRangeSelector
object under extensions
object.
new FroalaCharts({ type: "timeseries", dataSource: { extensions: { standardRangeSelector: { enabled: "1" //Enable or diable the standard range selector } } } });
Attribute | Type | Description |
---|---|---|
enabled |
Boolean | Setting this attribute to 1 enables the visibility of the standard range selector in the chart. |
Style Standard Range Selector
You can add style to the Standard Range Selector using style
object under standardRangeSelector
object.
new FroalaCharts({ type: "timeseries", dataSource: { extensions: { standardRangeSelector: { style: { "button-text": {}, //Object | String "button-background": {}, //Object | String "button-text:hover": {}, //Object | String "button-background:hover": {}, //Object | String "button-text:active": {}, //Object | String "button-background:active": {}, //Object | String separator: {} //Object | String } } } } });
Attribute | Type | Description |
---|---|---|
button-text |
String | Styles the button text of the standard range selector. |
button-background |
String | Styles the background of the button in standard range selector. |
button-text:hover |
String | Styles the button text of the standard range selector when hovered. |
button-text:active |
String | Styles the button text of the standard range selector when active. |
button-background:active |
Character | Styles the background of the button when active. |
separator |
String | Styles the separator | of the dates in standard range selector. |
Custom Range Selector
To configure the custom range selector of the chart, you can create the customRangeSelector
object under extensions
object.
new FroalaCharts({ type: "timeseries", dataSource: { extensions: { customRangeSelector: { enabled: "1" //Enable or diable the custom range selector } } } });
Attribute | Type | Description |
---|---|---|
enabled |
Boolean | Setting this attribute to 1 enables the visibility of the custom range selector in the chart. |
Style Custom Range Selector
You can add style to the Custom Range Selector using style
object under customRangeSelector
object.
new FroalaCharts({ type: "timeseries", dataSource: { extensions: { customRangeSelector: { style: { "title-text": {}, //Object | String "title-icon": {}, //Object | String "title-text:hover": {}, //Object | String "title-icon:hover": {}, //Object | String "title-text:active": {}, //Object | String "title-icon:active": {}, //Object | String container: {}, //Object | String label: {}, //Object | String "button-apply": {}, //Object | String "button-cancel": {}, //Object | String "button-apply:hover": {}, //Object | String "button-cancel:hover": {}, //Object | String select: {}, //Object | String input: {} //Object | String } } } } });
Attribute | Type | Description |
---|---|---|
title-text |
String | Styles the title text of the custom range selector. |
title-icon |
String | Styles the title of the icon in custom range selector. |
title-text:hover |
String | Styles the title text of the custom range selector when hovered. |
title-icon:hover |
String | Styles the title of the icon in custom range selector when active. |
title-text:active |
Character | Styles the title text of the custom range selector when active. |
title-icon:active |
String | Styles the title of the icon in custom range selector when active. |
container |
String | Styles the container of the custom range selector. |
label |
String | Styles the label of the custom range selector. |
button-apply |
String | Styles the apply buttom of the custom range selector. |
button-cancel |
String | Styles the cancelled button of the custom range selector. |
button-apply:hover |
String | Styles the apply button of the custom range selector when hovered. |
button-cancel:hover |
String | Styles the cancelled button of the custom range selector when hovered. |
select |
String | Styles the select icon of the custom range selector. |
input |
String | Styles the input box of the custom range selector. |
Predictive Data
To apply the date from where you want to specify the predictive data for the chart, you can create a prediction
object under extensions
object.
new FroalaCharts({ type: "timeseries", dataSource: { extensions: { prediction: { date: " " //The Predictive Data starts from this date } } } });
Attribute | Type | Description |
---|---|---|
date |
Date/Time format | Sets the start date of the predictive data in the chart. |
Style Predictive Data
You can add style to the predictive data in the chart using style
object under prediction
object.
new FroalaCharts({ type: "timeseries", dataSource: { extensions: { prediction: { style: { plot: {}, //SVGStyle | String line: {}, //SVGStyle | String area: {}, //SVGStyle | String column: {}, //SVGStyle | String anchor: {}, //SVGStyle | String bear: {}, //SVGStyle | String bull: {} //SVGStyle | String } } } } });
Attribute | Type | Description |
---|---|---|
plot |
String | Styles all the plots with predictive data in the canvas. |
line |
String | Styles the line plot with predictive data in the canvas. |
area |
String | Styles the area plot with predictive data in the canvas. |
column |
String | Styles the column plot with predictive data in the canvas. |
anchor |
String | Styles the anchors with predictive data in the canvas. |
bear |
String | Styles the bear with predictive data in the canvas. |
bull |
String | Styles the bull with predictive data in the canvas. |
Chart Configuration and Root JSON Attributes
Attribute | Type | Description |
---|---|---|
type |
Number | Sets the chart type. |
width |
Number | Sets the width of the chart canvas. |
height |
Number | Sets the height of the chart canvas. |
animation |
Boolean | This attribute gives you the option to control animation in your charts. If you do not want to animate any part of the chart, set this as 0. |
animationDuration |
Number | This attribute sets the animation duration, if animation is set to 1. |
paletteColors |
Array(String) | Using paletteColors attribute, you can specify your custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., paletteColors: #FF0000 , #0372AB , #FF5904 . |
clickURL |
String | The entire chart can now act as a hotspot. Use this URL to define the hotspot link for the chart. The link can be specified in FroalaCharts Link format. |
hasRTLText |
Boolean | This attribute, when set to 1, indicates to the chart that the text (rendered on the chart) may contain RTL characters and the textual display has to be managed accordingly. |
showPrintMenuItem |
Boolean | Whether to show "Print Chart" item in the context menu of the chart? Even if you opt to hide the item in context menu, you can still opt to invoke print() JavaScript method of the chart to print the same. |
exportEnabled |
Boolean | Whether the chart will allow exporting to images, PDFs, SVG or XLSX. |
exportAction |
String | In case of server-side exporting, the action specifies whether the exported image will be sent back to client as download, or whether it'll be saved on the server. |
exportHandler |
String | In case of server side exporting, this refers to the path of the server-side export handler (the ready-to-use scripts that we provide). |
exportFormats |
String | Lets you configure what output formats to allow for export of chart, in the export context menu, and also customize the label for each menu item. The attribute value should be a pipe (|) delimited separated key-value pair. Example: exportFormats: 'PNG=Export as High Quality Image|JPG|PDF=Export as PDF File' |
exportAtClientSide |
Boolean | This attribute when set to 1, enables the client-side export feature. |
exportShowMenuItem |
Number | Whether the menu items related to export (e.g., Save as JPEG etc.) will appear in the context menu of chart. |
exportTargetWindow |
String | In case of server-side exporting and when using download as action, this lefts you configure whether the return image, PDF, SVG or XLSX will open in same window (as an attachment for download), or whether it will open in a new window. |
exportFileName |
String | Using this attribute you can specify the name (excluding the extension) of the output (export) file. |
baseChartMessageImageHAlign |
String | This attribute allows to set a custom horizontal alignment for all images displayed as chart messages. Possible values are left , right and middle . |
baseChartMessageImageVAlign |
String | This attribute allows to set a custom vertical alignment for all images displayed as chart messages. Possible values are top , bottom and middle . |
loadMessage |
String | This attribute allows to set the message to be displayed when a chart begins to load. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., loadStartMessageFont, loadStartMessageFontSize, loadStartMessageColor. If message keys are not specified, base cosmetics are used. To display an image as the chart message, prefix I- to the image URL. Alignment and properties of the image can be configured using attributes such as loadMessageHAlign, loadMessageVAlign, loadMessageAlpha and so on. |
loadMessageImageHAlign |
String | If an image is displayed as the chart loadMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle. |
loadMessageImageVAlign |
String | If an image is displayed as the chart loadMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle. |
typeNotSupportedMessage |
String | This attribute allows to set the message to be displayed when the specified chart type is not supported. To display an image as the chart message, prefix I- to the image URL. |
typeNotSupportedMessageImageHAlign |
String | If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle. |
typeNotSupportedMessageImageVAlign |
String | If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle. |
renderErrorMessage |
String | This attribute allows to set the message to be displayed if an error is encountered while rendering the chart. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., renderErrorMessageFont, renderErrorMessageFontSize, renderErrorMessageColor. If message keys are not specified, base cosmetics are used. To display an image as the chart message, prefix I- to the image URL. Alignment and properties of the image can be configured using attributes such as renderErrorMessageHAlign, renderErrorMessageVAlign, renderErrorMessageAlpha and so on. |
renderErrorMessageImageHAlign |
String | If an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle. |
renderErrorMessageImageVAlign |
String | If an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle. |
dataLoadStartMessage |
String | This attribute allows to set the message to be displayed when chart data begins loading. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used. Alignment and properties of the image can be configured using attributes such as dataLoadStartMessageHAlign, dataLoadStartMessageVAlign, dataLoadStartMessageAlpha and so on. To display an image as the chart message, prefix I- to the image URL. |
dataLoadStartMessageImageHAlign |
String | If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle. |
dataLoadStartMessageImageVAlign |
String | If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle. |
dataEmptyMessage |
String | This attribute allows to set the message to be displayed if the data loaded for a chart is empty. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataEmptyMessageFont, dataEmptyMessageFontSize, dataEmptyMessageColor. If message keys are not specified, base cosmetics are used. To display an image as the chart message, prefix I- to the image URL. Alignment and properties of the image can be configured using attributes such as dataEmptyMessageHAlign, dataEmptyMessageVAlign, dataEmptyMessageAlpha and so on. |
dataEmptyMessageImageHAlign |
String | If an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom horizontal alignment for the image. Default Value: baseChartMessageImageHAlign |
dataEmptyMessageImageVAlign |
String | If an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom vertical alignment for the image. Default Value: baseChartMessageImageHAlign |
dataLoadErrorMessage |
String | This attribute allows to set the message to be displayed if an error is encountered while loading chart data. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataLoadErrorMessageFont, dataLoadErrorMessageFontSize, dataLoadErrorMessageColor. If message keys are not specified, base cosmetics are used. Alignment and properties of the image can be configured using attributes such as dataLoadErrorMessageHAlign, dataLoadErrorMessageVAlign, dataLoadErrorMessageAlpha and so on. To display an image as the chart message, prefix I- to the image URL. |
dataLoadErrorMessageImageHAlign |
String | If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom horizontal alignment for the image. Default Value: baseChartMessageImageHAlign |
dataLoadErrorMessageImageVAlign |
String | If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom vertical alignment for the image. Default Value: baseChartMessageImageHAlign |
dataInvalidMessage |
String | This attribute allows to set the message to be displayed if the data to be loaded for the chart is invalid. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataInvalidMessageFont, dataInvalidMessageFontSize, dataInvalidMessageColor. If message keys are not specified, base cosmetics are used. Alignment and properties of the image can be configured using attributes such as dataInvalidMessageHAlign, dataInvalidMessageVAlign, dataInvalidMessageAlpha and so on. To display an image as the chart message, prefix I- to the image URL. |
dataInvalidMessageImageHAlign |
String | If an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom horizontal alignment for the image. Default Value: baseChartMessageImageHAlign |
dataInvalidMessageImageVAlign |
String | If an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom vertical alignment for the image. Default Value: baseChartMessageImageHAlign |
canvasHeightProportion |
String | This attribute allows you to set variable heights to the canvases in a multivariate chart in the form of ratios, i.e., 1:2:1, 1:2:3:4, etc. |
Date/time Format
outputTimeFormat
attribute is used to specify the date-time format of the chart. You can specify the date-time format for a specific time unit using outputTimeFormat
.
List of predefined date/time format is given below:
Date/Time Format | Description |
---|---|
%a |
Abbreviated weekday name. |
%A |
Full weekday name. |
%b |
Abbreviated month name. |
%B |
Full month name. |
%d |
Zero-padded day of the month as a decimal number [01,31]. |
%H |
Hour (24-hour clock) as a decimal number [00,23]. |
%I |
Hour (12-hour clock) as a decimal number [01,12]. |
%j |
Day of a year as a decimal number [001,366]. |
%m |
Month as a decimal number [01,12]. |
%M |
Minute as a decimal number [00,59]. |
%L |
Milliseconds as a decimal number [000, 999]. |
%p |
Can either be AM or PM. |
%q |
The quarter of the year (Q1, Q2, Q3, Q4). |
%Q |
The number of milliseconds elapsed since the UNIX epoch (0, 1, 2,...). |
%s |
The number of seconds elapsed since the UNIX epoch (0, 1, 2,...). |
%S |
Second as a decimal number [00, 61]. |
%y |
A year without century as a decimal number [00,99]. |
%Y |
A year with century as a decimal number [2000, 1999]. |
%Z |
Time Zone offset, such as -0700, -07:00, -07, or Z. |
%% |
A literal percent sign (%). This token might seem useless, but remember that the tokens reserve the % symbol for their own use. This token acts as an escape character to literally allow a % symbol in a date string. |
Example:
unitDefaultFormats = { Year: "%Y", // 2018 Month: "%b %Y", // Jan 2018 Day: "%b %d, %Y", // Jan 01, 2018 Hour: "%b %d, %Y %H hrs", // Jan 01, 2018 23 hrs Minute: "%b %d, %Y %H:%M", // Jan 01, 2018 23:34 Second: "%b %d, %Y %H:%M:%S", // Jan 01, 2018 23:34:26 Millisecond: "%b %d, %Y %H:%M:%S:%L" // Jan 01, 2018 23:34:26:123 };
Paddings
In addition to the tokens listed above, it is often necessary to specify padding within the date/time format. For example - 12/02/2018, 12/ 2/2018 and 12/2/2018 all represent 2nd December 2018. The only difference between the three dates is that the day part of the date string has different padding:
- The first example is padded with a zero.
- The second example has been padded with space.
- The third example has no padding.
To handle the above cases, the padding modifiers are listed below:
Padding | Description |
---|---|
- (Dash) |
No padding (For example, 12/02/2018) |
_ (Underscore) |
Space padding (For example, 12/ 2/2018) |
0 (Zero) |
Zero padding (For example, 12/2/2018) |
The paddings are always placed after every token's % symbol. The default value padding of the date/time format of a time-series chart is 0
.
Apply CSS Transform
Timeseries allows you to resize the chart container of the chart using applyCSSTransform
attribute. The chart is automatically resized when the container is resized. If a tooltip was active at the time of resizing, it is repositioned properly.