Highcharts Demo

author(s): Torstein Hønsi

by Fusher

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; width: 500"></div>
<div>
    <span>IE6 mouse over: </span>
    <span id="s1"></span><br/>
    <span>Chrome mouse over: </span>
    <span id="s2"></span><br/>
    <span>Other mouse over: </span>
    <span id="s3"></span>
</div>

JavaScript

var s1 = 0;
var s2 = 0;
var s3 = 0;

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie',
        animation: false
    },

    plotOptions: {
        pie: {
            innerSize: 80
        },
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        if (this.state != 'select') this.select();
                        if (this.name == 'IE6') {
                            s1++;
                        } else if(this.name == 'Chrome') {
                            s2++;
                        } else if(this.name == 'Other') {
                            s3++;
                        };
                        $('#s1').text(s1);
                        $('#s2').text(s2);
                        $('#s3').text(s3);
                    },
                    mouseOut: function() {
                        if (this.state == 'select') this.select();
                    }
                }
            }
        }
    },
    series: [{
        data: [
            ['Firefox', 44.2],
            ['IE7', 26.6],
            ['IE6', 20],
            ['Chrome', 3.1],
            ['Other', 5.4]
            ]}]
});