You are viewing documentation for an older version. For current documentation - click here.

FusionWidgets XT Gantt chart allows you to configure both the input and output date format. This allows you to provide the date and show them on the chart using your own custom format.

Setting Input Date Format

You've already seen how to set the input date format by setting:

<chart dateFormat='mm/dd/yyyy' ... >
{"chart":{"dateformat":"mm/dd/yyyy"... } }

The dateFormat attribute can take any one of these values and all your dates specified in the XML should conform to that format.

  • mm/dd/yyyy
  • dd/mm/yyyy
  • yyyy/mm/dd
Setting Input Time Format

You've already seen how to set the input date format. Now we will see how to se the input time format.

FusionWidgets XT needs you to specify the time necessarily in 24 hour format as hour:mins:secs (hh:mn:ss) in your XML/JSON 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 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 beginning at 23:59.

So, to specify a time in FusionCharts XML, you'll have to use something as under:

<category start='00:00:00' end='23:59:59' label='Day' />
"category":[{ "start":"00:00:00", "end":"23:59:59", "label":"Day" } ]


<task processId='EMP121' start='08:00:00' end='12:30:00' label='Morning Shift'/>
"task":{"processid":"EMP121", "start":"08:00:00", "end":"12:30:00", "label":"Morning Shift"}
Creating date+time based charts

In the above example, we've specified only the time. In this section, we will see how to specify both date and time as the input format.

To do so, the data will be in the following format:

<category start='7/15/2007 00:00:00' end='7/15/2007 23:59:59' label='Today' />
"category":[{ "start":"7/15/2007 00:00:00", "end":"7/15/2007 23:59:59", "label":"Today" } ]


<task processId='EMP121' start='7/15/2007 08:00:00' end='7/15/2007 12:30:00' label='Logo A'/>
"task":{ "processid":"EMP121", "start":"7/15/2007 08:00:00", "end":"7/15/2007 12:30:00", "label":"Logo A" }

The format is dd/mm/yyyy hh:mn:ss. You can customize dd/mm/yyyy to mm/dd/yyyy or yyyy/mm/dd using dateFormat attribute of <chart> element. But, the time always needs to be in hh:mn:ss format in 24 hour format.

Configuring output date format

FusionWidgets XT Gantt chart also allows you to customize the format for dates which are outputted (shown) on the chart. This format can be different from your input format and can accept a lot more types. By default, if you do not specify an explicit output date format, it assumes the same format as input date format.

To set output date format, you use:

<chart dateFormat='mm/dd/yyyy' outputDateFormat='mns ddds, yyyy' ...>
{"chart":{"dateformat":"mm/dd/yyyy", "outputdateformat":"mns ddds, yyyy" ... } }

Here, mns ddds, yyyy is the custom date format template which is applied to output dates. We'll see how to build this template soon. However, when you run this chart, you'll see the dates as under:

As you can see, our input dates have been converted into a more readable format by applying output date format. This is possible using the output date format template.

This template can consist of various pre-defined tokens. You can add those tokens to form up a date format.

Currently supported tokens for building 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.)
Let's quickly see some sample template examples to get a clearer idea of how to build custom output 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
Please note that the output format is not restricted to the examples listed above. Using the tokens, you can build your own custom date format templates.