FusionCharts - Gantt Chart - Configuring output date format
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Configuring output date format. Roll over on the tasks to see date in custom format.
Attribute:
outputDateFormat
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var timeShiftChart = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"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": "fusion"
},
"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": {
...