Gantt Chart - Configure scroll bar properties
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>
<!-- Configure scroll properties
Attribute
# scrollColor
# scrollPadding
# scrollHeight
# scrollBtnWidth
# scrollBtnPadding
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var smoPlan = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Project Plan",
"theme": "fusion",
"scrollShowButtons": "1",
"canvasBorderAlpha": "30",
"ganttPaneDuration": "3",
"ganttPaneDurationUnit": "m",
"scrollColor": "#CCCCCC",
"scrollPadding": "4",
"scrollHeight": "20",
"scrollBtnWidth": "25",
"scrollBtnPadding": "5"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "14",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
...