Choose an item

Attributes

This article contains the list of attributes of FusionTime. The attributes have been differentiated by FusionTime components.

Time Axis

The xAxis object is used to configure components of Time Axis. You can create the xAxis object under dataSource.

Syntax:

new FusionCharts({
    type: 'timeseries',
    dataSource: {
        xAxis {
                plot: ' ', //Column Name
                timemarker: [{
                    // Attributes of Time Marker
                }]
        }
    },
});
Attribute Type Description
plot String Defines the column, which will be plotted along this axis.
timeMarker Array(Time Marker Configuration) Array of TimeMarkerConfigs that will be shown along the axis.

Style Time Axis Components

You can add style to the x-Axis components using style object under xaxis object.

new FusionCharts({
    "type": 'timeseries',
    "dataSource": {
        xAxis {
                "plot": ' ', //Column Name
                "timemarker": [{
                        "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.

Time Markers

To configure the time marker of the chart you can create the timemarker object under xaxis object.

new FusionCharts({
    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 FusionCharts({
    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 FusionCharts({
  type: "timeseries",
  dataSource: {
    navigator: {
      enabled: Boolean,
      scrollbar: {},
      window: {}
    }
  }
});
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.

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 FusionCharts({
  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 xaxis object.

new FusionCharts({
  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
      }
    ]
  }
});
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.

Plot Configuration

To configure the plot of the chart, you can create the plotConfig object under dataSource.


new FusionCharts({
  type: "timeseries",
  dataSource: {
    plotConfig: {
        generic: {
            connectNullData: " " //Set the value to true to connect null data
        } //Style too be applied across the chart
    }
  }
});



new FusionCharts({
  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 FusionCharts({
  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 FusionCharts({
  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.

Tooltip

To configure the tooltip of the chart, you can create the tooltip object under the dataSource.

new FusionCharts({
  type: "timeseries",
  dataSource: {
    tooltip: {
      enabled: "false" // Disables the Tooltip
    }
  }
});
Attribute Type Description
enabled String Setting this attribute to true enables the visibility of the tooltip for the chart.

Style Tooltip Components

You can add style to the tooltip using style object under tooltip object.

new FusionCharts({
  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.

Data Markers

To configure the data marker of the chart, you can create the dataMarker object under the dataSource.

new FusionCharts({
  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.

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 FusionCharts 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

Date/time Format

outputFormat attribute is used to set the format of the column being grouped. To set the date/time format of the chart, set the value of outputFormat attribute as per your requirement.

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.
%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.