Loading
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 |
|---|---|
|
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. |
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:
{
"chart": {
"dateformat": "dd/mm/yyyy",
"outputdateformat": "hh12:mn ampm",
"caption": "Development Division - Time Shifts",
"subCaption": "At Bakersfield Central",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "00:00:00",
"end": "23:59:59",
"label": "Time"
}
]
},
{
"align": "left",
"category": [
{
"start": "00:00:00",
"end": "02:59:59",
"label": "Midnight"
},
{
"start": "03:00:00",
"end": "05:59:59",
"label": "3 am"
},
{
"start": "06:00:00",
"end": "08:59:59",
"label": "6 am"
},
{
"start": "09:00:00",
"end": "11:59:59",
"label": "9 am"
},
{
"start": "12:00:00",
"end": "14:59:59",
"label": "12 noon"
},
{
"start": "15:00:00",
"end": "17:59:59",
"label": "3 pm"
},
{
"start": "18:00:00",
"end": "20:59:59",
"label": "6 pm"
},
{
"start": "21:00:00",
"end": "23:59:59",
"label": "9 pm"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Employee",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [
{
"label": "John.S",
"id": "EMP121"
},
{
"label": "David.G",
"id": "EMP122"
},
{
"label": "Mary.P",
"id": "EMP123"
},
{
"label": "Andrew.H",
"id": "EMP124"
},
{
"label": "Neil.M",
"id": "EMP125"
}
]
},
"tasks": {
"showlabels": "1",
"task": [
{
"processid": "EMP121",
"start": "08:00:00",
"end": "12:30:00",
"label": "Morning Shift"
},
{
"processid": "EMP121",
"start": "15:00:00",
"end": "19:30:00",
"label": "Evening Shift"
},
{
"processid": "EMP122",
"start": "10:00:00",
"end": "16:30:00",
"label": "Half Day"
},
{
"processid": "EMP123",
"start": "08:00:00",
"end": "12:00:00",
"label": "Morning Shift"
},
{
"processid": "EMP123",
"start": "15:00:00",
"end": "21:30:00",
"label": "Evening Shift"
},
{
"processid": "EMP124",
"start": "08:00:00",
"end": "20:30:00",
"label": "Full time support"
},
{
"processid": "EMP125",
"start": "10:00:00",
"end": "14:30:00",
"label": "Half Day"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "dd/mm/yyyy",
"outputdateformat": "hh12:mn ampm",
"caption": "Development Division - Time Shifts",
"subCaption": "At Bakersfield Central",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [{
"category": [{
"start": "00:00:00",
"end": "23:59:59",
"label": "Time"
}]
}, {
"align": "left",
"category": [{
"start": "00:00:00",
"end": "02:59:59",
"label": "Midnight"
}, {
"start": "03:00:00",
"end": "05:59:59",
"label": "3 am"
}, {
"start": "06:00:00",
"end": "08:59:59",
"label": "6 am"
}, {
"start": "09:00:00",
"end": "11:59:59",
"label": "9 am"
}, {
"start": "12:00:00",
"end": "14:59:59",
"label": "12 noon"
}, {
"start": "15:00:00",
"end": "17:59:59",
"label": "3 pm"
}, {
"start": "18:00:00",
"end": "20:59:59",
"label": "6 pm"
}, {
"start": "21:00:00",
"end": "23:59:59",
"label": "9 pm"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Employee",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [{
"label": "John.S",
"id": "EMP121"
}, {
"label": "David.G",
"id": "EMP122"
}, {
"label": "Mary.P",
"id": "EMP123"
}, {
"label": "Andrew.H",
"id": "EMP124"
}, {
"label": "Neil.M",
"id": "EMP125"
}]
},
"tasks": {
"showlabels": "1",
"task": [{
"processid": "EMP121",
"start": "08:00:00",
"end": "12:30:00",
"label": "Morning Shift"
}, {
"processid": "EMP121",
"start": "15:00:00",
"end": "19:30:00",
"label": "Evening Shift"
}, {
"processid": "EMP122",
"start": "10:00:00",
"end": "16:30:00",
"label": "Half Day"
}, {
"processid": "EMP123",
"start": "08:00:00",
"end": "12:00:00",
"label": "Morning Shift"
}, {
"processid": "EMP123",
"start": "15:00:00",
"end": "21:30:00",
"label": "Evening Shift"
}, {
"processid": "EMP124",
"start": "08:00:00",
"end": "20:30:00",
"label": "Full time support"
}, {
"processid": "EMP125",
"start": "10:00:00",
"end": "14:30:00",
"label": "Half Day"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to set the input time format:
| Attribute Name | Description |
|---|---|
|
It is used to specify the starting time for a task. This attribute can be used with the |
|
It is used to specify the ending time for a task. This attribute can be used with the |
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:
{
"chart": {
"caption": "Development Division - Work Schedule",
"subcaption": "Week 2 - (21st July to 25th July)",
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "7/21/2014 00:00:00",
"end": "7/21/2014 23:59:59",
"label": "Monday"
},
{
"start": "7/22/2014 00:00:00",
"end": "7/22/2014 23:59:59",
"label": "Tuesday"
},
{
"start": "7/23/2014 00:00:00",
"end": "7/23/2014 23:59:59",
"label": "Wednesday"
},
{
"start": "7/24/2014 00:00:00",
"end": "7/24/2014 23:59:59",
"label": "Thursday"
},
{
"start": "7/25/2014 00:00:00",
"end": "7/25/2014 23:59:59",
"label": "Friday"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Employee",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [
{
"label": "John S.",
"id": "EMP121"
},
{
"label": "David G.",
"id": "EMP122"
},
{
"label": "Mary P.",
"id": "EMP123"
},
{
"label": "Andrew H.",
"id": "EMP124"
},
{
"label": "Neil M.",
"id": "EMP125"
}
]
},
"tasks": {
"showlabels": "1",
"task": [
{
"processid": "EMP121",
"start": "7/21/2014 09:30:00",
"end": "7/21/2014 17:00:00",
"label": "Logo-I"
},
{
"processid": "EMP121",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "Logo-II"
},
{
"processid": "EMP121",
"start": "7/23/2014 14:00:00",
"end": "7/24/2014 16:30:00",
"label": "Website template"
},
{
"processid": "EMP122",
"start": "7/21/2014 10:00:00",
"end": "7/25/2014 14:30:00",
"label": "PHP Blueprint"
},
{
"processid": "EMP123",
"start": "7/21/2014 10:00:00",
"end": "7/21/2014 15:30:00",
"label": "Testing Specification"
},
{
"processid": "EMP123",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:00:00",
"label": "Testing tool research"
},
{
"processid": "EMP123",
"start": "7/23/2014 09:30:00",
"end": "7/25/2014 16:30:00",
"label": "Testing tool integration"
},
{
"processid": "EMP124",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "QA"
},
{
"processid": "EMP124",
"start": "7/23/2014 09:00:00",
"end": "7/23/2014 16:30:00",
"label": "QA"
},
{
"processid": "EMP124",
"start": "7/24/2014 09:30:00",
"end": "7/25/2014 14:30:00",
"label": "QA"
},
{
"processid": "EMP125",
"start": "7/25/2014 15:00:00",
"end": "7/25/2014 16:59:00",
"label": "Weekly Meet"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Development Division - Work Schedule",
"subcaption": "Week 2 - (21st July to 25th July)",
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [{
"category": [{
"start": "7/21/2014 00:00:00",
"end": "7/21/2014 23:59:59",
"label": "Monday"
}, {
"start": "7/22/2014 00:00:00",
"end": "7/22/2014 23:59:59",
"label": "Tuesday"
}, {
"start": "7/23/2014 00:00:00",
"end": "7/23/2014 23:59:59",
"label": "Wednesday"
}, {
"start": "7/24/2014 00:00:00",
"end": "7/24/2014 23:59:59",
"label": "Thursday"
}, {
"start": "7/25/2014 00:00:00",
"end": "7/25/2014 23:59:59",
"label": "Friday"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Employee",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [{
"label": "John S.",
"id": "EMP121"
}, {
"label": "David G.",
"id": "EMP122"
}, {
"label": "Mary P.",
"id": "EMP123"
}, {
"label": "Andrew H.",
"id": "EMP124"
}, {
"label": "Neil M.",
"id": "EMP125"
}]
},
"tasks": {
"showlabels": "1",
"task": [{
"processid": "EMP121",
"start": "7/21/2014 09:30:00",
"end": "7/21/2014 17:00:00",
"label": "Logo-I"
}, {
"processid": "EMP121",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "Logo-II"
}, {
"processid": "EMP121",
"start": "7/23/2014 14:00:00",
"end": "7/24/2014 16:30:00",
"label": "Website template"
}, {
"processid": "EMP122",
"start": "7/21/2014 10:00:00",
"end": "7/25/2014 14:30:00",
"label": "PHP Blueprint"
}, {
"processid": "EMP123",
"start": "7/21/2014 10:00:00",
"end": "7/21/2014 15:30:00",
"label": "Testing Specification"
}, {
"processid": "EMP123",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:00:00",
"label": "Testing tool research"
}, {
"processid": "EMP123",
"start": "7/23/2014 09:30:00",
"end": "7/25/2014 16:30:00",
"label": "Testing tool integration"
}, {
"processid": "EMP124",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "QA"
}, {
"processid": "EMP124",
"start": "7/23/2014 09:00:00",
"end": "7/23/2014 16:30:00",
"label": "QA"
}, {
"processid": "EMP124",
"start": "7/24/2014 09:30:00",
"end": "7/25/2014 14:30:00",
"label": "QA"
}, {
"processid": "EMP125",
"start": "7/25/2014 15:00:00",
"end": "7/25/2014 16:59:00",
"label": "Weekly Meet"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to set the output date format:
| Attribute Name | Description |
|---|---|
|
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., 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 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? |
|---|---|
|
Numeric Date |
|
Numeric Month |
|
Numeric year (2 digits only) |
|
Numeric year (4 digits) |
|
Hour in 24 hour format - Numeric |
|
Hour in 12 hour format - Numeric |
|
Minute |
|
Second |
|
When using 12 hour format, this specifies whether it’s AM or PM |
|
Month Name Long (Full) |
|
Month Name Short |
|
Week Day Name (Long) |
|
Week Day Name (short) |
|
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 |
|
March 21 2007 |
|
21-Mar-07 |
|
3/7/2007 |
|
21-03 |
|
Friday, 21st March 07 |
|
21-7-2007 13:11:20 |
|
21-7-2007 1:11:20 PM |
|
1:11:20 PM |
|
The output format is not restricted to the examples listed above. Using the tokens, you can build your own custom date format templates.