Multi-segmented floating bar chart
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
body {
font-family: Verdana;
font-size: 12px;
}
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"theme": "none",
"type": "serial",
"dataProvider": [{
"name": "John",
"startTime": 0,
"endTime": 5,
"startTime2": 12,
"endTime2": 14,
"startTime3": 16,
"endTime3": 18,
"color": "#FF0F00"
}, {
"name": "Joe",
"startTime": 0,
"endTime": 5,
"color": "#FF9E01"
}, {
"name": "Susan",
"startTime": 11,
"endTime": 18,
"color": "#F8FF01"
}, {
"name": "Eaton",
"startTime": 8,
"endTime": 11,
"startTime2": 15,
"endTime2": 19,
"color": "#04D215"
}],
"valueAxes": [{
"unit": ":00",
"axisAlpha": 0,
"gridAlpha": 0.1
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]:00<br>ends at [[endTime]]:00",
"xclustered": false,
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime"
}, {
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]:00<br>ends at [[endTime]]:00",
"clustered": false,
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime2",
"type": "column",
"valueField": "endTime2"
}, , {
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]:00<br>ends at [[endTime]]:00",
"clustered": false,
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime3",
"type": "column",
"valueField": "endTime3"
}],
"rotate": true,
"columnWidth": 1,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0.1,
"position": "left"
...