Psycometric Results

author(s): Kondal

by Kondal Durgam

HTML

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

<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

$(function() {
  var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'pie'
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: '',
      },
      colors: ['#19326b', '#aae3ff'],
      tooltip: { enabled: false },
      plotOptions: {
        pie: {
          shadow: false,
          borderWidth: 0,
          states:{
           hover: {
          		enabled:false
        		}
          }
          
        }
      },
 

      series: [{
        name: '',
        data: [
          ['Total', 100],
          ['Achieved', 76]
        ],
        size: '100%',
        innerSize: '90%',
        showInLegend: false,
        dataLabels: {
          enabled: false
        },
      }]
    },
    // using 

    function(chart) { // on complete

      var xpos = '10%';
      var ypos = '53%';
      var circleradius = 102;

      // Render the circl
      // Render the text 
      chart.renderer.text('<span style="color: black">76/100<br>Students</span>', 200, 200).css({
        width: circleradius * 2,
        fontSize: '25px',
        textAlign: 'center'
      }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
      }).add();
    });
});