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
            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.
autoClipNullData String Specifies the time unit for auto clipping.
autoClipMultiplier Number Specifies the multiplier for autoclipping.

Style Time Axis

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

new FusionCharts({
    "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 FusionCharts({
    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 FusionCharts({
  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 FusionCharts({
  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 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: {},
      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.
outputTimeFormat Object An object to specify the date-time format for the tooltip.

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 dataSource 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
        connectNullData: " " //Set the value to `true` to connect null data
        showGridband: " ", //Set the value to `1` 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 FusionCharts({
    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 FusionCharts({
  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 FusionCharts({
  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 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.

Plot Color Configuration

You can specify a custom color for each data plot. Specify your custom palette for data plots by providing a list of hex colors using the paletteColors attribute.

{
    name: "Date",
    type: "date",
    format: "%-d/%-m/%Y"
  },
  {
    name: "Low",
    paletteColor: "#2600EE",
    type: "number"
  },
  {
    name: "High",
    paletteColor: "#2632EE",
    type: "number"
  },
  {
    name: "Mean",

    type: "number"
  }
Attributes Type Description
paletteColor Array(String) Allows you to specify your custom list of hex colors for the data items.

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.

Reference Zone

To configure the reference zone of the chart, you can create the referenceZone object under yAxis object.

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

Customize Tooltip content

You can customize the tooltip's content using toolText object under tooltip object.

"dataSource": {
    "tooltip": {
        "enabled": "true",
        "toolText": "<b>$bin</b><br>$series.0.plotIdentifier $series.0.name: $series.0.dataValue<br>$series.1.plotIdentifier $series.1.name: <b>$series.1.dataValue</b>"
    }
}
Attribute Type Description
xx xx Description here.
xx xx Description here.
xx xx Description here.

Output Time Format

To specify the date-time format for a specific time unit, create a outputTimeFormat object under xaxis object.

new FusionCharts({
  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 FusionCharts({
  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,
        }],
            position: 'bottom', 
            alignment: 'start'
    }
  }
});

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.
position String This attribute lets you set the position of the legend, possible values are: bottom, top, right, and left.
alignment String This attribute lets you set the alignment of the legend, possible values are: start, end, and middle.

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.

Standard Range Selector

To configure the standard range selector of the chart, you can create the standardRangeSelector object under extensions object.

new FusionCharts({
  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 FusionCharts({
  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 FusionCharts({
  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 FusionCharts({
  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 FusionCharts({
  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 FusionCharts({
  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 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, CSV, PDFs, SVG, XLS 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

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