Gantt Chart (6.0+)

html:
<div class="gantt" ></div>

javas script:
//sandbox: http://jsfiddle.net/vL8pP/
//documentation: http://taitems.github.io/jQuery.Gantt/

//get required css
$("<link/>", { "rel": "stylesheet", "type": "text/css", "href": "http://taitems.github.io/jQuery.Gantt/css/style.css" }).appendTo("head");

//get required gantt js library
$.getScript("http://taitems.github.io/jQuery.Gantt/js/jquery.fn.gantt.js",main)

//gantt data
ganttData = [{
        name: "a",
        desc: "Test",
        values: [{
            from: Date.parse("6/1/2014"), //Date(123456)
            to: Date.parse("7/1/2014"),
            label: "Task 1"
            ,customClass: "ganttRed"
        },{
            from: Date.parse("7/2/2014"),
            to: Date.parse("7/25/2014"),
            label: "Task 2"
            ,customClass: "ganttGreen"
        }]
    },{
        name: "b",
        desc: "Test",
        values: [{
            from: Date.parse("7/1/2014"),
            to: Date.parse("7/15/2014"),
            label: "Task 1"
            ,customClass: "ganttBrown"
        },{
            from: Date.parse("9/2/2014"),
            to: Date.parse("9/11/2014"),
            label: "Task 2"
            ,customClass: "myGanttGray"
        }]
    }]


//startup and render gantt chart
function main(){
$(".gantt").gantt({
source: ganttData,
navigate: "buttons",
scale: "weeks"
});
}

If you want your underlying data table to drive your gantt, then you would need to create an iron python script to parse your data by looping your (filtered) rows into a "ganttData" string document property. The ganttData string should contain a proper JSON.

To parse your ganttData string extracted from your data table, you have to make it available at the html so javascript can read it.

If your json string is no longer than 65535 characters (because Spotfire truncates your document property when using property controls), you can use a document property like this:

<!--Spotfire Label Property Control with ganttData JSON string--><div id='ganttData' style='display:none'>
  <SpotfireControl id="e7b0d2c7f34845..." />
</div>

The string value of your Spotfire Label Property Control JSON string value:

[{"name":"a","desc":"Test","values":[{"from":"/Date(1401598800000)/","to":"/Date(1404190800000)/","label":"Task 1","customClass":"ganttRed"},{"from":"/Date(1404277200000)/","to":"/Date(1406264400000)/","label":"Task 2","customClass":"ganttGreen"}]},{"name":"b","desc":"Test","values":[{"from":"/Date(1404190800000)/","to":"/Date(1405400400000)/","label":"Task 1","customClass":"ganttBrown"},{"from":"/Date(1409634000000)/","to":"/Date(1410411600000)/","label":"Task 2","customClass":"myGanttGray"}]}]

Once you have your ganttData injected in the html markup, you can just get the contents by:

var ganttData = $("#ganttData").text();

//Make sure your source attribute value (in red) corresponds to your Spotfire Label Property Control id
function main(){
$(".gantt").gantt({
source: JSON.parse(ganttData),
navigate: "buttons",
scale: "weeks"
});
}