Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container"></div>

JavaScript

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        plotOptions: {
            pie: {
                innerSize: '60%'
            }
        },
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    },
                                     
    function(chart) { // on complete
        
        var xpos = '50%';
        var ypos = '50%';
        var circleradius = 100;
    
    // Render the circle
    chart.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#ddd',
    }).add();

    // Render the text 
 
    text = chart.renderer.text("My Text").css({textAlign: 'center'});
    textBBox = text.getBBox();
    x = chart.plotLeft + (chart.plotWidth  * 0.5) - (textBBox.width  * 0.5);
    y = chart.plotTop  + (chart.plotHeight * 0.5) - (textBBox.height * 0.5);
    text.attr({x: x, y: y}).add();
        
    });
});