Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

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

<div>
    <div id="container" style="position:absolute; left:0px; top:0px;"></div>
    <div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>

JavaScript

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
      renderTo: 'container',
      type: 'pie'
    },
    title: {
      
      text: ''
    },
    series: [{
      innerSize: 150,
      size: 200,
      data: [
        ['Open', 20],
        ['Closed', 25],
        ['Open', 30],
        ['Closed', 35],
      ]
    }, {
      innerSize: 100,
      size: 150,
      data: [
        ['NPE', 45],
        ['OpCo', 65],
      ]
    }]
    },
                                     
    function(chart) { // on complete
        var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
        var textY = chart.plotTop  + (chart.plotHeight * 0.5);

        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
        span += '<span style="font-size: 16px">10</span><br>';
        span += '<span style="font-size: 16px">cases</span>';
        span += '</span>';

        $("#addText").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5));
        span.css('top', textY + (span.height() * -0.5));
    });
});