Gantt Chart - Scroll to date

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>
<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": {
        "palette": "2",
        "caption": "Construction Timeline",
        "captionFontSize": "14",
        "dateformat": "dd/mm/yyyy",
        "outputdateformat": "ddds mns",
        "showCanvasBorder": "1",
        "canvasBorderAlpha": "30",
        "theme": "fusion"

      },
      "categories": [{
        "category": [{
          "start": "1/5/2014",
          "end": "31/8/2014",
          "label": "Months"
        }]
      }, {
        "category": [{
          "start": "1/5/2014",
          "end": "31/5/2014",
          "label": "May"
        }, {
          "start": "1/6/2014",
          "end": "30/6/2014",
          "label": "June"
        }, {
          "start": "1/7/2014",
          "end": "31/7/2014",
          "label": "July"
        }, {
          "start": "1/8/2014",
          "end": "31/8/2014",
          "label": "August"
        }]
      }],
      "processes": {
        "headertext": "Task",
        "headerfontsize": "14",
        "fontsize": "12",
        "process": [{
          "label": "Terrace",
          "id": "TRC"
        }, {
          "label": "Plumbing",
          "id": "INS"
        }, {
          "label": "Wood Work",
          "id": "WDW"
        }, {
          "label": "Interiors",
          "id": "INT"
        }]
      },
      "tasks": {
        "showlabels": "1",
        "showenddate": "1",
        "task": [{
          "label": "Planned",
          "processid": "TRC",
          "start": "5/5/2014",
          "end": "2/6/2014",
          "id": "5-1",
          "color": "#4567aa",
          "height": "25%",
          "toppadding": "22%"
        }, {
          "label": "Actual",
          "processid": "TRC",
          "start": "10/5/2014",
          "end": "2/6/2014",
          "id": "5",
          "color": "#EEEEEE",
    ...