Syncing gauge chart (clock) with 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/gauge.js"></script>
<div id="chartdiv2"></div>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 60%;
height : 300px;
float: left;
}
#chartdiv2 {
width : 39%;
height : 300px;
float: left;
}
JavaScript
/**
* Floating chart
*/
var chart = AmCharts.makeChart("chartdiv", {
"theme": "dark",
"type": "serial",
"dataProvider": [{
"name": "John",
"startTime": 8,
"endTime": 11,
"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"
}],
"valueAxes": [{
"unit": ":00",
"axisAlpha": 0,
"gridAlpha": 0.1,
"guides": [{
"value": 0,
"above": true,
"lineColor": "#c00",
"lineThickness": 3,
"lineAlpha": 0.5
}]
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]:00<br>ends at [[endTime]]:00",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime"
}],
"rotate": true,
"columnWidth": 1,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0.1,
"position": "left"
}
});
/**
* Clock
*/
var chartClock = AmCharts.makeChart("chartdiv2", {
"type": "gauge",
"theme": "none",
"startDuration": 0.3,
"axes": [{
"axisAlpha": 0.3,
"endAngle": 360,
"endValue": 12,
"minorTickInterval": 0.2,
"showFirstLabel": false,
"startAngle": 0,
"axisThickness": 1,
"valueInterval": 1,
"labelOffset": 5,
"inside": false,
"bands": [{
"color": "#FF0F00",
"endValue": 11,
"startValue": 8,
"innerRadius": "80%",
"alpha": 0.8
}, {
"color":...