amcharts Mult-section floating bar chart

HTML

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>

JavaScript

var chart;

var chartData = [{
    name: "John",
    startTime: 8,
    endTime: 11,
    startTime2: 15,
    endTime2: 18,
    color: "#FF0F00"},
{
    name: "Joe",
    startTime: 10,
    endTime: 13,
    color: "#FF9E01"},
{
    name: "Susan",
    startTime: 11,
    endTime: 18,
    color: "#F8FF01"},
{
    name: "Eaton",
    startTime: 15,
    endTime: 19,
    color: "#04D215"}];


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "name";
    chart.rotate = true;
    chart.columnWidth = 0.9;
    chart.startDuration = 1;

    // AXES
    // Category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0.1;
    categoryAxis.axisAlpha = 0;
    categoryAxis.gridPosition = "start";

    // Value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridAlpha = 0.1;
    valueAxis.axisAlpha = 0;
    valueAxis.unit = ":00";
    valueAxis.stackType = "3d";
    chart.addValueAxis(valueAxis);

    // GRAPH                          
    var graph = new AmCharts.AmGraph();
    graph.valueField = "endTime";
    graph.openField = "startTime";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.colorField = "color";
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);
    
    var graph2 = new AmCharts.AmGraph();
    graph2.valueField = "endTime2";
    graph2.openField = "startTime2";
    graph2.type = "column";
    graph2.lineAlpha = 0;
    graph2.colorField = "color";
    graph2.fillAlphas = 0.8;
    chart.addGraph(graph2);



    // WRITE                  
    chart.write("chartdiv");
    chart.addListener("changed", syncCursor);
});



function syncCursor(e){
cosnole.log(e);
}