PDA

View Full Version : How to get the value of a column of a bar chart with an on click event ??



Jeet Chatterjee
4 May 2013, 2:21 AM
I have a bar column chart in a container. I made this chart using MVC. Now I want to add a click event on the chart so that when I click on the column of the chart, the value of the corresponding column will be displayed. This event should be placed in the controller... But, I cant do this.. please help me... This is my view .


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',
title:'barChart',
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',
seriesId: 'col',
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'
} ]
});


and this is my controller

Ext.define('Gamma.controller.ControlFile', {

extend : 'Ext.app.Controller',

//define the stores
stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
//define the models
models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
//define the views
views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],


init : function() {

this.control({

})
}
});

slemmon
6 May 2013, 12:30 PM
The series itself has an itemclick event that is raised when one of the items on the series is clicked (in this case a bar from the chart).

You can place a listener directly on the series like this:


listeners: {
itemclick: function (param) {
console.log(param.storeItem.get(param.yField));
}
}


If you want to manage the event from your controller you're going to have to either fire a custom even on itemclick and fire it against the chart or perhaps the controller itself or you can relay the series events to the chart and then just listen to itemclick on the chart itself.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.Observable-method-relayEvents

vinod.k461
28 Aug 2013, 2:15 AM
in Controller u add like this:

Ext.getCmp("coll").on("click",function(e){

Ext.getCmp("coll").series.get(0).addEvents("itemclick");

Ext.getCmp("coll").series.get(0).on("itemclick",function(a){

var t=a.storeItem.get("name");
alert("name");
});


});



here coll means- the chart id



:):)=;=;