Gantt Chart-XML:

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Customize hovering effect for processes 

Attributes:
    # hoverBandcolor
    # hoverBandAlpha   

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

JavaScript

FusionCharts.ready(function () {
      function JSMethod(myVar) {
     alert("hello");
 }
     var cnstrctnPlan = new FusionCharts({
         type: 'gantt',
         renderAt: 'chart-container',
         width: '750',
         height: '500',
         dataFormat: 'xml',
         dataSource: '<chart dateformat="dd/mm/yyyy" ganttwidthpercent="70" gridborderalpha="0" showtasknames="1" ganttPaneDuration="3" ganttPaneDurationUnit="m" palettethemecolor="453269" showborder="0">\
  <categories>\
    <category start="1/5/2014" end="31/5/2014" name="2014" fontsize="16" />\
    <category start="1/6/2014" end="31/6/2014" name="2014" fontsize="16" />\
    <category start="1/7/2014" end="31/7/2014" name="2014" fontsize="16" />\
  </categories>\
  <categories isbold="1">\
    <category start="1/5/2014" end="31/5/2014" name="May" link="j-JSMethod-5,Month" />\
    <category start="1/6/2014" end="30/6/2014" name="Jun" link="j-JSMethod-6,Month" />\
    <category start="1/7/2014" end="31/7/2014" name="Jul" link="j-JSMethod-7,Month" />\
  </categories>\
  <processes headertext="Products" headeralign="left" bgcolor="453269" headerbgcolor="453269" fontcolor="FFFFFF" headerfontcolor="FFFFFF" isbold="1" headerfontsize="18" align="left">\
    <process name="A" id="1" fontsize="11" link="j-JSMethod-A,Product" />\
    <process name="B" id="2" fontsize="11" link="j-JSMethod-B,Product" />\
    <process name="C" id="3" fontsize="11" link="j-JSMethod-C,Product" />\
    <process name="D" id="4" fontsize="11" link="j-JSMethod-D,Product" />\
    <process name="E" id="5" fontsize="11" link="j-JSMethod-E,Product" />\
  </processes>\
  <tasks>\
    <task hovertext="High, 12" processid="1" id="1" start="20/5/2014" end="31/5/2014" color="FF0000" alpha="60" toppadding="85%" height="25%" width="75%" link="j-JSMethod-A,Alerts,5,high" />\
    <task hovertext="Low, 2" processid="1" id="1" start="1/5/2014" end="9/5/2014" color="4ACF46" alpha="60" valign="top" height="25%" toppadding="10%" width="25%"...