morris.js donut hover

by richardwo

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="morrischart" style="height: 250px; width: 250px; float: left">
        </div>
        <div id="morrisdetails-item" class="morris-hover morris-default-style" style="position:static;
    float: left;
            ">
            <div class="morris-hover-row-label">2010 Q4</div>
            <div class="morris-hover-point">this is a test</div>
        </div>

JavaScript

var donut = new Morris.Donut({
        data: [
            {label: 'complete', value:50},
            {label: 'late', value:20},
            {label: 'delayed', value:30}
        ],
        colors: [
            '#00A33D',
            '#C31929',
            '#FFA536'
        ],
        element: 'morrischart',
    });
    for(i = 0; i < donut.segments.length; i++) {
        donut.segments[i].handlers['hover'].push( function(i){
            $('#morrisdetails-item .morris-hover-row-label').text(donut.data[i].label);
            $('#morrisdetails-item .morris-hover-point').text(donut.data[i].value);
        });
    }