Creating Time-based Charts
FusionCharts Suite XT allows you to create both date-based and time-based charts as well as charts that plot both date and time.
In this section, you will be shown how you can create time-based charts and date+time-based charts.
Time Format Required by FusionCharts Suite XT
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.
So, to specify a time in the JSON data, you will have to define a “category” as shown in the code snippet below::
Or, you can define task as shown below:
Time-based Gantt chart
As an example, we will plot a time-based Gantt chart that represents the time shifts for each employee of the development division at Bakersfield Central. The chart’s time span will be one day only. Within that day, we will distribute the chart into time blocks and show each employee’s work time.
The “Development Division - Time Shifts” Gantt chart thus rendered 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"
}
]
}
}<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>If you’re using only time based charts, you can specify 23:59:59 as 24:00:00 for ease of usage.
Creating Date+Time-based Charts
As an example here, we will show the development division’s work schedule over two days.
The date+time-based Gantt chart thus created looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"outputdateformat": "hh:mn",
"caption": "Development Division - Work Schedule",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "7/15/2014 00:00:00",
"end": "7/15/2014 23:59:59",
"label": "Today"
},
{
"start": "7/16/2014 00:00:00",
"end": "7/16/2014 23:59:59",
"label": "Tomorrow"
}
]
},
{
"align": "right",
"category": [
{
"start": "7/15/2014 00:00:00",
"end": "7/15/2014 05:59:59",
"label": "6 am"
},
{
"start": "7/15/2014 06:00:00",
"end": "7/15/2014 11:59:59",
"label": "12 pm"
},
{
"start": "7/15/2014 12:00:00",
"end": "7/15/2014 17:59:59",
"label": "6 pm"
},
{
"start": "7/15/2014 18:00:00",
"end": "7/15/2014 23:59:59",
"label": "Midnight"
},
{
"start": "7/16/2014 00:00:00",
"end": "7/16/2014 05:59:59",
"label": "6 am"
},
{
"start": "7/16/2014 06:00:00",
"end": "7/16/2014 11:59:59",
"label": "12 pm"
},
{
"start": "7/16/2014 12:00:00",
"end": "7/16/2014 17:59:59",
"label": "6 pm"
},
{
"start": "7/16/2014 18:00:00",
"end": "7/16/2014 23:59:59",
"label": "Midnight"
}
]
}
],
"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",
"showstartdate": "1",
"task": [
{
"processid": "EMP121",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 12:30:00",
"label": "Logo A"
},
{
"processid": "EMP121",
"start": "7/15/2014 17:00:00",
"end": "7/15/2014 19:30:00",
"label": "Logo B"
},
{
"processid": "EMP121",
"start": "7/16/2014 09:00:00",
"end": "7/16/2014 19:30:00",
"label": "Website template"
},
{
"processid": "EMP122",
"start": "7/15/2014 10:00:00",
"end": "7/15/2014 20:30:00",
"label": "PHP Blueprint"
},
{
"processid": "EMP122",
"start": "7/16/2014 10:00:00",
"end": "7/16/2014 20:30:00",
"label": "PHP Blueprint"
},
{
"processid": "EMP123",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 12:00:00",
"label": "L1 Support"
},
{
"processid": "EMP123",
"start": "7/16/2014 15:00:00",
"end": "7/16/2014 21:30:00",
"label": "L1 Support"
},
{
"processid": "EMP124",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 20:30:00",
"label": "L2 support"
},
{
"processid": "EMP124",
"start": "7/16/2014 08:00:00",
"end": "7/16/2014 20:30:00",
"label": "L2 support"
},
{
"processid": "EMP125",
"start": "7/15/2014 10:00:00",
"end": "7/15/2014 14:30:00",
"label": "Network Maintenance"
},
{
"processid": "EMP125",
"start": "7/16/2014 12:00:00",
"end": "7/16/2014 14:30:00",
"label": "System OS Updates"
}
]
}
}<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": "mm/dd/yyyy",
"outputdateformat": "hh:mn",
"caption": "Development Division - Work Schedule",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [{
"category": [{
"start": "7/15/2014 00:00:00",
"end": "7/15/2014 23:59:59",
"label": "Today"
}, {
"start": "7/16/2014 00:00:00",
"end": "7/16/2014 23:59:59",
"label": "Tomorrow"
}]
}, {
"align": "right",
"category": [{
"start": "7/15/2014 00:00:00",
"end": "7/15/2014 05:59:59",
"label": "6 am"
}, {
"start": "7/15/2014 06:00:00",
"end": "7/15/2014 11:59:59",
"label": "12 pm"
}, {
"start": "7/15/2014 12:00:00",
"end": "7/15/2014 17:59:59",
"label": "6 pm"
}, {
"start": "7/15/2014 18:00:00",
"end": "7/15/2014 23:59:59",
"label": "Midnight"
}, {
"start": "7/16/2014 00:00:00",
"end": "7/16/2014 05:59:59",
"label": "6 am"
}, {
"start": "7/16/2014 06:00:00",
"end": "7/16/2014 11:59:59",
"label": "12 pm"
}, {
"start": "7/16/2014 12:00:00",
"end": "7/16/2014 17:59:59",
"label": "6 pm"
}, {
"start": "7/16/2014 18:00:00",
"end": "7/16/2014 23:59:59",
"label": "Midnight"
}]
}],
"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",
"showstartdate": "1",
"task": [{
"processid": "EMP121",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 12:30:00",
"label": "Logo A"
}, {
"processid": "EMP121",
"start": "7/15/2014 17:00:00",
"end": "7/15/2014 19:30:00",
"label": "Logo B"
}, {
"processid": "EMP121",
"start": "7/16/2014 09:00:00",
"end": "7/16/2014 19:30:00",
"label": "Website template"
}, {
"processid": "EMP122",
"start": "7/15/2014 10:00:00",
"end": "7/15/2014 20:30:00",
"label": "PHP Blueprint"
}, {
"processid": "EMP122",
"start": "7/16/2014 10:00:00",
"end": "7/16/2014 20:30:00",
"label": "PHP Blueprint"
}, {
"processid": "EMP123",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 12:00:00",
"label": "L1 Support"
}, {
"processid": "EMP123",
"start": "7/16/2014 15:00:00",
"end": "7/16/2014 21:30:00",
"label": "L1 Support"
}, {
"processid": "EMP124",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 20:30:00",
"label": "L2 support"
}, {
"processid": "EMP124",
"start": "7/16/2014 08:00:00",
"end": "7/16/2014 20:30:00",
"label": "L2 support"
}, {
"processid": "EMP125",
"start": "7/15/2014 10:00:00",
"end": "7/15/2014 14:30:00",
"label": "Network Maintenance"
}, {
"processid": "EMP125",
"start": "7/16/2014 12:00:00",
"end": "7/16/2014 14:30:00",
"label": "System OS Updates"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>