Highcharts Demo

author(s): Torstein Hønsi

HTML

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

 <html>
 <input type="text" tabindex="0"/>
 <button id="rectFocus" >Rectangle</button>
 <div class="col" id="container" tabindex="0"/>
 
 <div class="col" id="container1" tabindex="0"/>
 

 
 
 </html>

CSS

.col    {
    float:left;
    margin: 0px;
    width: 198px;
    height: 152px;
    
}

JavaScript

$(function() {     
 var rectangle;
 var data;
  var i=0;
   var chart = new Highcharts.Chart({
        chart: {
            
            renderTo: 'container',
            events:{
              click: function(event) {
              
                    
                }
            },
            margin: [0, 0, 0, 0],
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0,
            opacity:0
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },
        plotOptions: {
            pie: {
                size:'100%',
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Months',
            point:{
                  events:{
                      click: function (event) { //Start
                      
                     
                      
                         
                      } //End
                  }
              } ,
            data: [
                ['Jan', 50.0],
                ['Feb', 50.8],
                
            ]}]    
    });

   //rectangle = chart.renderer.rect(data.x -2,data.y-2,n.width + 2 //* 2,data.height + 2 * 2,3).css({

    
    var xAxis = chart.xAxis[0],
      yAxis = chart.yAxis[0]
    

rectangle = chart.renderer.rect(0,0,0,0,0).css({
        stroke: 'black',
        strokeWidth: '.5',
        fill: 'black',
        fillOpacity: '.1',
         zIndex: 999
    }).add();
   
   
   $('#rectFocus').keydown(function (event) {
  
        i=0;    
if(event.shiftKey && event.keyCode == 9) 
{
   //alert("shift+tab")
   i=1;
}
                           data = 		                  chart.series[0].data[i].graphic.element.getBBox();
      //  alert(data.x + " : " + data.y)                   
				
       
                    rectangle.attr({
                       // x: xMin +...