title: How to add a click event in a Bar Chart
body: <p>I have a bar chart in my View.I want to add a click event in that bar chart i.e when i click on any of the bar of that bar column the corresponding information that showing on the bar should be in an alert.i have to call the event from my controller. here is my code...
  this is my view where i have the bar</p>
  
  <pre><code>var baseColor = 'rgb(0,0,0)';
  
  var colors = ['url(#v-1)',
  'url(#v-2)',
  'url(#v-3)',
  'url(#v-4)',
  'url(#v-5)'];
  
  Ext.define('Ext.chart.theme.Fancy', {
  extend: 'Ext.chart.theme.Base',
  
  constructor: function(config) {
      this.callParent([Ext.apply({
          axis: {
              fill: baseColor,
              stroke: baseColor
          },
          axisLabelLeft: {
              fill: baseColor
          },
          axisLabelBottom: {
              fill: baseColor
          },
          axisTitleLeft: {
              fill: baseColor
          },
          axisTitleBottom: {
              fill: baseColor
          },
          colors: colors
      }, config)]);
  }
  });
  
  var bar=Ext.define('Gamma.view.BarColumnChart', {
  extend : 'Ext.chart.Chart',
  alias : 'widget.barColumnChart',
  id: 'barColumnChart',
  height:300,
  width:Ext.getBody().getViewSize().width*0.6,
  
  
  xtype : 'chart',
  theme : 'Fancy',
  animate : {
      easing : 'bounceOut',
      duration : 750
  },
  store : 'BarColumn',
  background : {
      fill : 'none'
  },
  gradients : [ {
      'id' : 'v-1',
      'angle' : 0,
      stops : {
          0 : {
              color : 'rgb(212, 40, 40)'
          },
          100 : {
              color : 'rgb(117, 14, 14)'
          }
      }
  }, {
      'id' : 'v-2',
      'angle' : 0,
      stops : {
          0 : {
              color : 'rgb(180, 216, 42)'
          },
          100 : {
              color : 'rgb(94, 114, 13)'
          }
      }
  }, {
      'id' : 'v-3',
      'angle' : 0,
      stops : {
          0 : {
              color : 'rgb(43, 221, 115)'
          },
          100 : {
              color : 'rgb(14, 117, 56)'
          }
      }
  }, {
      'id' : 'v-4',
      'angle' : 0,
      stops : {
          0 : {
              color : 'rgb(45, 117, 226)'
          },
          100 : {
              color : 'rgb(14, 56, 117)'
          }
      }
  }, {
      'id' : 'v-5',
      'angle' : 0,
      stops : {
          0 : {
              color : 'rgb(187, 45, 222)'
          },
          100 : {
              color : 'rgb(85, 10, 103)'
          }
      }
  } ],
  axes : [ {
      type : 'Numeric',
      position : 'left',
      fields : [ 'count' ],
      minimum : 0,
      maximum : 3000,
      label : {
          renderer : Ext.util.Format.numberRenderer('0,0')
      },
      grid : {
          odd : {
              stroke : '#555'
          },
          even : {
              stroke : '#555'
          }
      }
  }, {
      type : 'Category',
      position : 'bottom',
      fields : [ 'source' ]
  } ],
  series : [ {
      type : 'column',
      axis : 'left',
      highlight : true,
      label : {
          display : 'insideEnd',
          'text-anchor' : 'middle',
          field : 'count',
          orientation : 'horizontal',
          fill : '#fff',
          font : '12px Arial'
      },
      renderer : function(sprite, storeItem, barAttr, i, store) {
          barAttr.fill = colors[i % colors.length];
          return barAttr;
      },
  
  
      style : {
          opacity : 0.95
      },
      xField : 'source',
      yField : 'count'
  } ]
  
  
  });
  </code></pre>
  
  <p>and here is my controller from where i have to call the event ....</p>
  
  <pre><code>   init : function() {
      this.control({
  
    //'BarColumn': getStore(BarColumn),
  
  
      'barColumnChart':{
  
        click:function(){
  
  
        }
  
      }
  
  
  });
  </code></pre>
  
  <p>please anyone help me...</p>