Choose an item

Attributes

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

Time Axis

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. 
new FusionCharts({
    type: 'timeseries',
    ...
    dataSource: {
        xAxis {
            plot: ' ', //Column Name
            timemarker: [{
                // Attributes of Time Marker
            }]
        }
    },
});

Time Markers

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. 
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
                // 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.
                }
            }]
        }
    },
});

Y Axes

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. 
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
        }],
    }
})

Reference Lines

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. 
new FusionCharts({
    type: 'timeseries',
    ...
    dataSource: {
        referenceLine: [{
            'label': ' ', //Label of the reference line
            'value': ' ' //Value of the reference line
        }],
    }
})

Data Markers

Attribute Type Description
seriesName String This attribute specifies the name of the series on which the data marker will be displayed. If the series is specified as a combination of a series name as well as a measure name, it should be in <series_name>-<measure_name> format.
time String Sets the time on which the data marker will be shown. Corresponds to the start of the given date/time.
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. 
new FusionCharts({
    type: 'timeseries',
    ...
    dataSource: {
        dataMarker: [{
            seriesName: ' ', //Name of the series
            time: ' ', //Time on which the data marker will be shown
            identifier: ' ', //Defines a character to be shown
            timeFormat: ' ', //Format of the date
            tooltext: ' ' //Text in the tooltip
        }]
    }
})

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.
enableNavigator Boolean Enables/disables the time navigator.
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) Palette attribute allows to select a palette theme that applies to chart background, canvas, font and tool-tips, it does not change the colors of data items (i.e., column, line, pie etc.). 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.
showToolTip Boolean Whether to show tool tip on chart.
exportEnabled Boolean Whether the chart will allow exporting to images, PDFs, SVG or XLS.
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 XLS 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.
%c Locale’s date and time, such as %x and %X.
%d Zero-padded day of the month as a decimal number [01,31].
%e Space-padded day of the month as a decimal number [1,31]. %e is equivalent to %_d.
%f Microseconds as a decimal number [000000, 999999].
%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 Milliseconds according to UNIX epoch.
%q Quarter of the year starting from January [Q1, Q2, Q3, Q4].
%s Seconds according to UNIX epoch.
%S Second as a decimal number [00, 61].
%u Weeday starts from Monday(ISO 8601) as a decimal number [1,7].
%U Sunday-based week of a year as a decimal number [00,53]. All days in a new year preceding the first Sunday will be considered as week 0.
%V ISO 8601 week of the year as a decimal number [01, 53]. Weeks start on Monday and are numbered from 01 for the first week and 52 or 53 for the last week. Week 1 is the first week where four or more days fall within the new year. Basically, week 01 is the first week of the year that contains a Thursday; or, the week that has 4 January in it.
%w Sunday-based weekday as a decimal number [0,6].
%W Monday-based week of the year as a decimal number [00,53]. All days in a new year preceding the first Monday will be considered as week 0.
%x Locale’s date. Example: %-m/%-d/%Y.
%X Locale’s time. Example: %-I:%M:%S %p.
%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 (%)

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
};