Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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 will load here..
{ "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" } ] } }
{
    "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

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.

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 will load here..
{ "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" } ] } }
{
    "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

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

Top