Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

The Gantt chart supports scrolling for both, the data table and the Gantt view pane.

In this section, you will be shown how you can:

Enabling Vertical Scrolling

Vertical scrolling is enabled by default depending on the height of the chart. If the number of processes fit within the height of the chart, vertical scrolling will not appear. You can also manually enable or disable vertical scrolling.

A Gantt chart with vertical scrolling disabled looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Project Plan", "theme": "fint", "useVerticalScrolling": "0", "canvasBorderAlpha": "40" }, "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", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Steps", "headerFontSize": "14", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Project Plan",
        "theme": "fint",
        "useVerticalScrolling": "0",
        "canvasBorderAlpha": "40"
    },
    "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",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "14",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Project Plan",
            "theme": "fint",
            "useVerticalScrolling": "0",
            "canvasBorderAlpha": "40"
        },
        "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",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "14",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 enable/disable vertical scrolling:

Attribute Name Description

useVerticalScrolling

It is used to specify whether a vertical scroll bar will be enabled for the chart. Setting this attribute to 0 will disable the vertical scroll bar, setting it to 1(default) will enable.
By default, the vertical scroll bar appears depending on the height of the chart.

Enabling Scroll for the Data Table

The data table automatically starts to scroll when you add data columns that do not fit in the specified area of the grid.

A Gantt chart with a scroll rendered for the data table looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "captionFontSize": "16", "subcaption": "Project Plan", "theme": "fint", "canvasBorderAlpha": "30" }, "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", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Step", "headerFontSize": "14", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "captionFontSize": "16",
        "subcaption": "Project Plan",
        "theme": "fint",
        "canvasBorderAlpha": "30"
    },
    "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",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Step",
        "headerFontSize": "14",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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",
            "caption": "Social Media Optimization",
            "captionFontSize": "16",
            "subcaption": "Project Plan",
            "theme": "fint",
            "canvasBorderAlpha": "30"
        },
        "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",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Step",
            "headerFontSize": "14",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

As you can see above, the scroll bar for data-grid automatically becomes active when the data in grid cannot fit itself in one screen.

To disable the scrollbar for data-grid, you have three options:

  • Increase the chart width so that the data-grid fits completely in one screen.

  • Set the ganttWidthPercent attribute to a lower value (0-100) for the global chart object. This attribute indicates the percent space (width) the Gantt pane takes. If the Gantt takes lesser space, the grid will get more space and will fit in the full labels.

  • Set the showFullDataTable attribute to ‘0’ (false) for the chart object. This asks the chart to wrap and truncate the data labels and try to squeeze them in the required space (only if possible).

Enabling Scrolling for the Gantt Pane

By default, the Gantt pane never automatically scrolls, unless you explicitly specify it. To enable scrolling for the Gantt pane, you’ll first need to decide the following - “What time frame should be visible in one screen of the Gantt pane?” Once this is decided and specified for the chart, the rest of time frame is shown upon scrolling. For example, you may decide that instead of showing the complete data, you want to see the data for only three months at one time.

A Gantt chart rendered to enable scrolling for the Gantt pane looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Project Plan", "theme": "fint", "canvasBorderAlpha": "30", "ganttPaneDuration": "3", "ganttPaneDurationUnit": "m" }, "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", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "align": "left", "headerText": "Steps", "headerFontSize": "14", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Project Plan",
        "theme": "fint",
        "canvasBorderAlpha": "30",
        "ganttPaneDuration": "3",
        "ganttPaneDurationUnit": "m"
    },
    "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",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "14",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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",
            "caption": "Social Media Optimization",
            "subcaption": "Project Plan",
            "theme": "fint",
            "canvasBorderAlpha": "30",
            "ganttPaneDuration": "3",
            "ganttPaneDurationUnit": "m"
        },
        "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",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "14",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 enable scrolling for the Gantt pane:

Attribute Name Description

ganttPaneDuration

It is used to specify the timeline a Gantt pane will represent at a given point, if you want to enable the scroll. For example, if you want your Gantt pane to show the data for only three months in one screen and then scroll the rest, set the value of this attribute to 3.

ganttPaneDurationUnit

It is used to specify the unit of your chosen duration, if you have opted to scroll through the Gantt pane.The possible values for this attribute are y,m,d, h, mn, and s.

Given below is a brief description of the values that the ganttPaneDurationUnit attribute can take:

Value What it represents?

y

No. of years to display

m

No. of months to display

d

No. of days to display

h

No. of hours to display

mn

No. of minutes to display

s

No. of seconds to display

If the duration specified by you is more than the actual time span of the chart, the scroll bar for the Gantt pane is not displayed.

Configuring Scroll Properties

You can configure several cosmetic properties for the scroll bar.

A Gantt chart with the scroll cosmetic properties configured looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Project Plan", "theme": "fint", "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", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Steps", "headerFontSize": "14", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Project Plan",
        "theme": "fint",
        "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",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "14",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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",
            "caption": "Social Media Optimization",
            "subcaption": "Project Plan",
            "theme": "fint",
            "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",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "14",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 configure scroll cosmetics:

Attribute Name Description

scrollColor

It is used to specify the hex code of the color for the scroll bar, e.g. #CC0000.

scrollPadding

It is used to specify the vertical padding between the scroll bar and the chart canvas.

scrollHeight

It is used to specify the height of the scroll bar.

scrollBtnWidth

It is used to specify the width of the scroll buttons.

scrollBtnPadding

It is used to specify the horizontal padding between the scroll bar and the scroll buttons.

flatScrollBars

It is used to specify whether scroll bars will be rendered as flat scroll bars. Setting this attribute to 0 will render the scroll bars with a gradient effect, setting it 1 (default) will render them as flat scroll bars.

All our previous charts are with flat scrollbars.

If you do not find this attribute in the data do not be surprised, as this attribute is set in the theme, we are using for the fiddles.

Scroll to a Specific Date

For the Gantt chart, you can specify the date from where the chart will initially render.

The Social Media Optimization Gantt chart, that starts from Aug’14, configured to start rendering from Sept’14 looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Project Plan", "theme": "fint", "canvasBorderAlpha": "30", "ganttPaneDuration": "3", "ganttPaneDurationUnit": "m", "scrollToDate": "08/24/2014" }, "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", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Steps", "headerFontSize": "14", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Project Plan",
        "theme": "fint",
        "canvasBorderAlpha": "30",
        "ganttPaneDuration": "3",
        "ganttPaneDurationUnit": "m",
        "scrollToDate": "08/24/2014"
    },
    "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",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "14",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '450',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Project Plan",
            "theme": "fint",
            "canvasBorderAlpha": "30",
            "ganttPaneDuration": "3",
            "ganttPaneDurationUnit": "m",
            "scrollToDate": "08/24/2014"
        },
        "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",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "14",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 date from which the chart will initially render:

Attribute Name Description

scrollToDate

It is used to specify the date to which the chart will automatically scroll at the time of rendering. This attribute works only when the ganttPaneDuration and the ganttPaneDurationUnit attributes are set as per the requirement.

Top