create an interactive table while rotating the piechart

Question

All, Recently I had posted a question Rotating a donut chart in javascript after it is rendered that was answered and am currently using it in my app. But now we need to take this one step further and hook this donut spinning chart (high chart) to update/highlight the corresponding row on a table. Basically here's the layout. We have a donut chart on top that can spin (right now it spins in clockwise, ideally, it should spin in both directions) and a table at the bottom which is basically the data displayed on the donut. So now when the user rotates the donut the bottom piece of the donut should correspond and highlight the appropriate row in the table below. So potentially, if the bottom of the donut says IE7, then the row IE7 should get highlighted and so on.

I have a sample fiddle created here http://jsfiddle.net/skumar2013/hV9aw/1/ for reference. Can somebody share some ideas/samples on how to go about doing this? As always thanks for your help in advance.

$(function () {
    $('#mouseMoveDiv').mousemove(function () {
        var theChart = $('#container').highcharts();
        var currStartAngle = theChart.series[0].options.startAngle;
        console.log('currStartAngle: ' + currStartAngle);
        var newStartAngle = currStartAngle + 5;
        if (newStartAngle > 359) {
            newStartAngle = 5;
        }
        console.log(newStartAngle);
        theChart.series[0].update({
            startAngle: newStartAngle
        });
    });

    var chart = new Highcharts.Chart({
        chart: {
            spacingTop: 50,
            spacingBottom: 50,
            spacingLeft: 50,
            spacingRight: 50,
            height: 500,
            width: 500,
            renderTo: 'container',
            type: 'pie'
        },

        title: {
            text: 'Interactive Pie Chart'
        },

        plotOptions: {
            pie: {
                center: ["50%", "50%"],
                startAngle: 90,
                animation: false,
                innerSize: '30%'
            }
        },

        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
            ]
        }]
    });
});

    <Title>Interactive pie/donut chart</Title>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="mouseMoveDiv">
    <div id="container" style="height: 500px; width: 500px"></div>
    </div>
    <table border='1' width='100%'>
    <tr>
        <td>Firefox</td>
        <td>44.2%</td>
    </tr>
    <tr>
        <td>IE7</td>
        <td>26.6%</td>
    </tr>
    <tr>
        <td>IE6</td>
        <td>20%</td>
    </tr>
    <tr>
        <td>Chrome</td>
        <td>3.1%</td>
    </tr>
    <tr>
        <td>Other</td>
        <td>5.4%</td>
    </tr>
    </table>

Answer 1

I've come up with working code, fiddle here, but I'm not sure why :)

    var someData = theChart.series[0].data; // the pie data
    var N = someData.length;
    var closest = [10,-1];
    for (var i = 0; i < N; i++){
        var center = someData[i].angle; // seems to be the center of the pie slice in radians
        var dis = Math.abs(center - 1.5795); // 1.5796 seems to be the center bottom of the pie in radians?
        if (dis < closest[0]){
            closest = [dis, i]; // find the closest slice to the bottom 
        }
    }
    // color the corresponding row
    if (closest[1] != lastHighlight){
        var someRows = $('#dataTable tr');
        someRows.eq(lastHighlight).css('backgroundColor','white');
        someRows.eq(closest[1]).css('backgroundColor','yellow');
        lastHighlight = closest[1];
    }

I'm making some assumptions here about highcharts calculations:

1. that series.data[i].angle is the angle of the pie slice in radians.
2. the angle of the bottom, center of the "donut" is π / 2 radians. In a regular coordinate system it should be (3 * π) / 2, so not sure why highcharts orientates this way.

With these assumptions my code appears to work.