JQPlot Capture Click Event

JQPlot Capture Click Event

by jatinder_singh02

HTML

<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css">
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasOverlay.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.donutRenderer.js"></script>
<div id="mainlabel">Main industry data</div>
<div id="mainchart" ></div>
<div id="detailchart" style="visibility:hidden">
<div id="label" ></div>
<br/>
<div id="graph" style="height: 400px; width: 700px;"></div>
</div>

JavaScript

Array.prototype.average=function(){
    var sum=0;
    var j=0;
    for(var i=0;i<this.length;i++){
        if(isFinite(this[i])){
          sum=sum+parseFloat(this[i]);
           j++;
        }
    }
    if(j===0){
        return 0;
    }else{
        return sum/j;
    }
}
 
Array.prototype.stddev=function(){
    var n = 0;
    var sum = 0.0;
    var sum_sq = 0.0;
    for(var i=0;i<this.length;i++){
        n++;
        sum += this[i];
        sum_sq += this[i]*this[i];
    }
    return Math.sqrt( (sum_sq /n) - Math.pow(sum /n, 2));    
}

Array.prototype.average_t=function(){
    var sum=0;
    var j=0;
    var average_t = [];
    for(var i=0;i<this.length;i++){
        if(isFinite(this[i])){
          sum=sum+parseFloat(this[i]);
          j++;
          average_t[i] = sum/j
        }
    }
    if(j===0){
        return 0;
    }else{
        return average_t;
    }
}

function loadbarchart(myTitle){ 
var data = [15.2,13.0,11.7,12.9,16.9,22.7,26.0,22.7,29.7,
            31.7,21.3,16.7,11.4,6.6,2.7,-5.0,-7.3,-11.3];
var line = data.average_t();
var options= {    
   title:myTitle ,      
   seriesColors: ['darkgreen','orange'],
   series:[{
      renderer: $.jqplot.BarRenderer,                 
      rendererOptions: {          
         barMargin: 5,           
         fillToZero: true               
      },
      pointLabels: {
         show: true,
         formatString: '%.1f',
         seriesLabelIndex:1,
         hideZeros:false
      }
   }],
   axes: {      
      xaxis: {          
         tickRenderer: $.jqplot.CanvasAxisTickRenderer,
         renderer: $.jqplot.CategoryAxisRenderer,
         label: 'Sample #'
      },      
      yaxis: {   
         labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
         padMin: 0,
         pad: 1.1,
         label: 'Temperatures (°C)',
         rendererOptions: { forceTickAt0: true}
      } 
   },    
   negativeSeriesColors:['darkred'],   
   grid:{
      background: '#f8f8f8'
   },   
   canvasOverlay: {
    ...