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