How to Heighlight Pie chart Item ( like tap-higjlight) on button click ?

**patilsantoshk** · 10 Oct 2011, 3:37 AM

Hi All,

I want to highlight pie-charts item (any one part of pie chart - like tap-highlight) on button click event.

Can anyone please tell me how to achieve this ?

Thanks in advance...

Santosh P

**pgrandmont** · 12 Oct 2011, 7:50 AM

I'm also looking for a solution to highlight slice of a pie chart only on click

What I have right now is a listener in the series section of my chart:

Code:

                    series: [{
                            type: 'pie',
                            field: 'Count',
                            showInLegend: true,
.....
                            highlight: false,
                    listeners: {
                                itemmousedown: function (obj) {
                                    if (storeData.count() > 1) {
                                        Ext.apply(this, {
                                            highlightCfg: {
                                                segment: {
                                                    margin: 20
                                                }
                                            }
                                        });                                        
                                        this.highlightItem(obj);                                        
                                    }
                                }
                            }

but it's not working!

How can I highlight slices on click

PS: I also tryed this.highlightItem() who is supposed to hightlight the whole series, but it's not working!

Thanx

Phil

**patilsantoshk** · 12 Oct 2011, 8:34 PM

Hi Pgrandmont

to achieve your requirement bellow interaction code is sufficient ... please check

interactions: [ { type: 'itemhighlight',
gesture: 'tap' }]

but as per my requirement i want to highlight slice of chart ( like it highlight on tap which is default behaviour) on a xtype:'button' item which is on another panel.

For that i think i need to customize gesture:'tap' but i dont know how do i achive this

i want to achieve this

interactions: [ { type: 'itemhighlight', gesture: 'tap', }]

behavioral on this button

var btnTap = new Ext.Button({
text:'Tap Me',
handler: function(button, event) {
// highlight the chart's respective slice as per index
}
});

Any logical help appreciable .....

Thanks
Santosh P

**newbie_extjs** · 26 Sep 2012, 7:39 AM

There is no intuitive way to do it. But found a way after spending one whole day on it!!!! But the solution is very simple

First off, remove all the event listeners attached to mouseover and mouseout events of legend. I Also removed mousedown event as I didn't want the pie to merge. Then I removed itemmouseover event. attached this behavior to item click and voila!!!

Here's the full code....

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> </title>

<script type='text/javascript' src='http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js'></script>

<style type='text/css'>

</style>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){

}//]]>

</script>

</head>
<body>
<script type="text/javascript">

/////////////////////////////////////
Ext.require(['Ext.data.*']);
Ext.onReady(function() {
window.generateData = function(n, floor){
var data = [];
data.push({ name: 'January' , data1: 1});
data.push({ name: 'February' , data1: 2});
return data;
};
window.store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});

});

////////////////////////////////////
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
Ext.require('Ext.chart.Highlight');

Ext.onReady(function () {

var data =generateData(6, 20);
if(data.length>0)
{
store1.loadData(data);
var donut = false,
clicked_part,
clicked_no,
evnt ,
panel1 = Ext.create('widget.panel', {
height: 200,
width: 245,
renderTo: Ext.get('conversionChartInner'),
layout: 'fit',
items: {
xtype: 'chart',
id: 'chartCmpConversion',
animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 15,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
highlight : false,
tips: {
trackMouse: false,

renderer: function(storeItem, item) {
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
listeners: {
itemclick: function(o){
var obj= Ext.getCmp('chartCmpConversion');

//o. getItemForPoint
alert(o.storeItem.data['name'] + ' &' + o.storeItem.data['data1']);
}
},

}]
}
});

Ext.each(
Ext.getCmp('chartCmpConversion')
.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
item.un("mouseover", item.events.mouseover.listeners[0].fn);
item.un("mouseout", item.events.mouseout.listeners[0].fn);
// item.addListener( "mousedown",evnt);
});
var obj= Ext.getCmp('chartCmpConversion');
evnt=obj.events.mousemove.listeners[0].fn;
obj.un("mousemove", obj.events.mousemove.listeners[0].fn);
obj.addListener( "mousedown",evnt);

}
});

</script>
<div id="conversionChart">
<div id="conversionChartInner">
</div>
</div>

</body>

</html>

**nm1** · 26 Sep 2012, 11:02 AM

I was able to get the item highlight working with the following -

interactions:[
{
type: 'itemhighlight' // tap gesture
}
],

series:[
{
....
highlight:{
segment:{
margin:20
}
},
....
}
]

Thread: How to Heighlight Pie chart Item ( like tap-higjlight) on button click ?

Thread Tools

Search Thread

Display

Unanswered: How to Heighlight Pie chart Item ( like tap-higjlight) on button click ?

Posting Permissions