FusionCharts - Gallery Example - Gantt chart in JavaSCript
Created using FusionCharts Suite XT - www.fusioncharts.com
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: 'xml',
dataSource:'<chart caption="Construction management of a new store in Denver" subcaption="Planned vs Actual" dateformat="dd/mm/yyyy" outputdateformat="ddds mns yy" ganttwidthpercent="60" ganttpaneduration="40" ganttpanedurationunit="d" plottooltext="$processName{br} $label starting date $start{br}$label ending date $end" legendborderalpha="0" legendshadow="0" useplotgradientcolor="0" showcanvasborder="0" flatscrollbars="1" gridbordercolor="#333333" gridborderalpha="20" slackfillcolor="#e44a00" taskbarfillmix="light+0"><categories bgcolor="#999999"><category start="1/4/2014" end="30/6/2014" label="Months" align="middle" fontcolor="#ffffff" fontsize="12" /></categories><categories bgcolor="#999999" align="middle" fontcolor="#ffffff" fontsize="12"><category start="1/4/2014" end="30/4/2014" label="April" /><category start="1/5/2014" end="31/5/2014" label="May" /><category start="1/6/2014" end="30/6/2014" label="June" /></categories><categories bgcolor="#ffffff" fontcolor="#333333" fontsize="11" align="center"><category start="1/4/2014" end="5/4/2014" label="Week 1" /><category start="6/4/2014" end="12/4/2014" label="Week 2" /><category start="13/4/2014" end="19/4/2014" label="Week 3" /><category start="20/4/2014" end="26/4/2014" label="Week 4" /><category start="27/4/2014" end="3/5/2014" label="Week 5" /><category start="4/5/2014" end="10/5/2014" label="Week 6" /><category start="11/5/2014" end="17/5/2014" label="Week 7" /><category start="18/5/2014" end="24/5/2014" label="Week 8" /><category start="25/5/2014" end="31/5/2014" label="Week 9" /><category start="1/6/2014" end="7/6/2014" label="Week 10" /><category start="8/6/2014" end="14/6/2014" label="Week 11" /><category start="15/6/2014" end="21/6/2014" label="Week 12" /><category start="22/6/2014"...