FusionCharts - Gallery Example - Gantt chart in JavaSCript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Saneesh K V

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>
<!-- 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",
                    width: "100%",
                    height: "100%",
                    dataFormat: "json",
                    dataSource: {
                      chart: {
                        dateformat: "mm/dd/yyyy",
                        outputdateformat: "hh:mn",
                        /*caption: "Scanning overview",
                        subcaption: "",*/
                        theme: "fusion",
                        canvasborderalpha: "40",
                        ganttlinealpha: "50",
                        plottooltext: "$PercentComplete complete",
                        slackFillColor: "#e866ec",      
                      },
                      tasks: {
                        color: "#c500da",
                        /*showPercentLabel:1,
                        showLabel:1,*/
                        task: [
                          {
                            processid: "NY_SERVERS",          
                            start: "12/01/2016 04:30:00",
                            end: "12/01/2016 07:30:00",
                            percentcomplete: "47",
                            height: "60%",
                            topPadding: "20%",
                          },
                          {
                            processid: "LA_HOSTS",          
                            start: "12/01/2016 02:30:00",
                            end: "12/01/2016 09:30:00",
                            percentcomplete: "46",
                            height: "60%",
                            topPadding: "20%",
                          },
                          {
                            processid: "BAY_AREA_HOSTS",          
                            start: "12/01/2016 00:30:00",
                            end: "12/01/2016 05:30:00",
                            percentcomplete: "89",
                           ...