Gantt Chart- Enable scroll for data table
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Enable scroll for data table in Gantt Chart
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var smoPlan = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"captionFontSize": "16",
"subcaption": "Project Plan",
"theme": "fusion",
"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"
},
{
...