docs: function() {
  
              var self = this;
  
              // calculate the location and offset.
  
              // the largest rectangle that can be inscribed in a 
              // circle is a square.
  
              // calculate the offset for the center of the chart.
              var offset = $('#' + self.getGenericId('svg')).offset();
              var top = offset['top'] + self.options.diameter / 2;
              var left = offset['left'] + self.options.diameter / 2;
  
              // the center circle's the diameter is a third of the 
              // self.options.diameter.
              var centerRadius = self.options.diameter / 6;
              var squareX = Math.sqrt(centerRadius * centerRadius / 2);
  
              // top and left for the explanation div.
              top = top - squareX;
              left = left - squareX - 25;
  
              // the main explanation div.
              $('#' + self.getGenericId('explanation'))
                .css('position', 'absolute')
                .css('text-align', 'center')
                // The z-index property specifies the z-order of a 
                // positioned element and its descendants. 
                // When elements overlap, z-order determines 
                // which one covers the other. 
                // An element with a larger z-index 
                // generally covers an element with a lower one.
                // FIXME: seems we need use class to utilize the 
                // -1 z-index, which will help position 
                // the explanation div under the circle.
                .css('z-index', '-1')
                // it turns out the bootstrap panel has something
                // to do with the z-index.
                // In general the z-index should work fine.
                //.attr('class', 'bs-explanation')
                // set the border, most time is for debugging..
                .css('border', '0px solid black')
                .css('width', '180px')
                .css('top', top + 'px')
                .css('left', left + 'px');
  
              $('#' + self.getGenericId('pageviews'))
                .css('font-size', '2.5em')
                .css('color', '#316395');
  
              $('#' + self.getGenericId('percentage'))
                .css('font-size', '1.5em')
                .css('color', '#316395');
  
              $('#' + self.getGenericId('date'))
                .css('font-weight', 'bold');
  
              $('#' + self.getGenericId('group'))
                .css('font-weight', 'bold');
          }