FusionCharts - Gallery Example - Gantt chart in JavaSCript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<!-- Gantt chart plotting tasks required for constructing a new store (Just completed) in Denver. This is a comparison of how planned estimates fared against the actual and which tasks got delayed. 

-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var cnstrctnPlan = new FusionCharts({
        type: 'gantt',
        renderAt: 'chart-container',
        width: '750',
        height: '500',
        dataFormat: 'json',
        dataSource: 
                   
                   
{
             "chart": {
                  "forceRowHeight": "0"
             },
             "categories": [
             {
                 "category": [
                     { "start": "01/01/2014", "end": "12/31/2014", "label": "2014" },
                     { "start": "01/01/2015", "end": "12/31/2015", "label": "2015" }]
             }],
             "processes": {
                  "headerText": "First Name", "process": [{ "id": "0", "label": "Bob", "height": 130 }, { "id": "1", "label": "Mike", "height": 52 }]
             },
             "dataTable": {
                  "dataColumn": [{ "headerText": "Status", "text": [{ "label": "Active" }, { "label": "Active" }] }]
             },
             "tasks": {
                 "task": [
                     { "start": "05/01/2014", "end": "03/24/2015", "processId": "0", "height": 26, "topPadding": 13 },
                     { "start": "01/23/2015", "end": "03/24/2015", "processId": "0", "height": 26, "topPadding": 52 },
                     { "start": "01/24/2015", "end": "03/24/2015", "processId": "0", "height": 26, "topPadding": 91 },
                     { "start": "02/04/2015", "end": "03/24/2015", "processId": "1", "height": 26, "topPadding": 13 }]
             }
        }
    })
    .render();
});