Thank you for reporting this bug. We will make it our priority to review this report.
-
Sencha User
How to Heighlight Pie chart Item ( like tap-higjlight) on button click ?
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
-
Sencha User
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
-
Sencha User
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
-
Sencha User
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>
-
Sencha User
I was able to get the item highlight working with the following -
interactions:[
{
type: 'itemhighlight' // tap gesture
}
],
series:[
{
....
highlight:{
segment:{
margin:20
}
},
....
}
]
Posting Permissions
Reply With Quote