Adding Scroll to Chart
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"
}
]
}
}<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 |
|---|---|
|
It is used to specify whether a vertical scroll bar will be enabled for the chart. Setting this attribute to |
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"
}
]
}
}<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
ganttWidthPercentattribute to a lower value (0-100) for the globalchartobject. 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
showFullDataTableattribute to ‘0’ (false) for thechartobject. 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"
}
]
}
}<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 |
|---|---|
|
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. |
|
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 |
Given below is a brief description of the values that the ganttPaneDurationUnit attribute can take:
| Value | What it represents? |
|---|---|
|
No. of years to display |
|
No. of months to display |
|
No. of days to display |
|
No. of hours to display |
|
No. of minutes to display |
|
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"
}
]
}
}<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 |
|---|---|
|
It is used to specify the hex code of the color for the scroll bar, e.g. #CC0000. |
|
It is used to specify the vertical padding between the scroll bar and the chart canvas. |
|
It is used to specify the height of the scroll bar. |
|
It is used to specify the width of the scroll buttons. |
|
It is used to specify the horizontal padding between the scroll bar and the scroll buttons. |
|
It is used to specify whether scroll bars will be rendered as flat scroll bars. Setting this attribute to |
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"
}
]
}
}<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 |
|---|---|
|
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 |