Configuring Date Formats

FusionCharts Suite XT allows you to configure the input and output date format; you can input the date in one format and output it using a custom format.

In this section, you will be shown how you can:

  • Set input date format

  • Set input time format

  • Configure output date format

Setting Input Date Format

Given below is a brief description of the attribute used to set the input date format:

Attribute Name Description
dateFormat It is used to specify the input date format for all the dates in your JSON data. This is a mandatory attribute to specify and, once specified, all the dates in your JSON data should conform to the format specified herein.
This attribute can take values in any one of the following formats:
mm/dd/yyyy
dd/mm/yyyy
yyyy/mm/dd

Setting Input Time Format

FusionCharts Suite XT makes it mandatory to specify time in the 24-hour format as "hour:mins:secs (hh:mm:ss)" in the JSON/XML data.

The 24-hour clock is a convention of time-keeping in which the day runs from midnight to midnight and is divided into 24 hours, numbered from 0 to 23. A time of the day is written in the 24-hour notation in the form hh:mm (for example 01:23) or hh:mm:ss (for example, 01:23:45), where hh (00 to 23) is the decimal number of full hours that have passed since midnight, mm (00 to 59) is the number of full minutes that have passed since the last full hour, and ss (00 to 59) is the number of seconds since the last full minute. In the 24-hour time notation, the day begins at midnight, 00:00 and the last minute of the day is that which begins at 23:59.

A Gantt chart configured for the input time format looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to set the input time format:

Attribute Name Description
start It is used to specify the starting time for a task. This attribute can be used with the category and the task objects.
end It is used to specify the ending time for a task. This attribute can be used with the category and the task objects.

The data structure needed to set the input time format is given below:

...

Setting the Output Date Format

You can configure the output date format to be different from the input date format.

A Gantt chart with the output date format configured looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to set the output date format:

Attribute Name Description
outputDateFormat It is used to specify the format in which a date will be rendered on the Gantt chart. You can also specify how the dates look on your Gantt chart using this attribute. This attribute takes the output date format in various output date templates(e.g., mns ddds, yyyy).
Here, mns ddds, yyyy is the custom date format template which is applied to output dates to convert our input dates to a more readable format. For example by using this template the date 01/01/2014 with be converted to Jan 1st, 2014.

If you do not explicitly specify the output date format, the chart uses the input date format to render the date on the Gantt chart.

The data structure needed to set the output date format is given below:

...

The output date format template can consist of various pre-defined tokens. You can add those tokens to form up a date format. Currently supported tokens for building the output date format template are:

Token What it represents?
dd Numeric Date
mm Numeric Month
yy Numeric year (2 digits only)
yyyy Numeric year (4 digits)
hh Hour in 24 hour format - Numeric
hh12 Hour in 12 hour format - Numeric
mn Minute
ss Second
ampm When using 12 hour format, this specifies whether it's AM or PM
mnl Month Name Long (Full)
mns Month Name Short
dnl Week Day Name (Long)
dns Week Day Name (short)
ds Suffix for the date (like st, nd, rd, th, etc.)

Given below are a few sample templates of custom output date formats:

Output date format that you need What date format to use?
21st March, 2007 ddds mnl, yyyy
March 21 2007 mnl dd yyyy
21-Mar-07 mns-dd-yy
3/7/2007 mm/dd/yyyy
21-03 dd-mm
Friday, 21st March 07 dnl, ddds mnl yy
21-7-2007 13:11:20 dd-mm-yyyy hh:mn:ss
21-7-2007 1:11:20 PM dd-mm-yyyy hh12:mn:ss ampm
1:11:20 PM hh12:mn:ss ampm

The output format is not restricted to the examples listed above. Using the tokens, you can build your own custom date format templates.

There! You have now seen how you configure the date formats for a Gantt chart.