Gantt Chart XML
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="fusioncharts.widgets.js"></script>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
function JSMethod(myVar) {
alert(myVar);
};
FusionCharts.ready(function () {
var myChart = new FusionCharts({
"type": "gantt",
"dataFormat": "xml",
"renderAt": "chart-container",
"width": "500",
"height": "300",
"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" />\
</tasks>\
<legend>\
<item label="Low" color="#4ACF46" />\
<item label="Medium" color="#FFEE00" />\
<item label="High" color="#FF0000" />\
...