My contemplations and diurnal novelties are publicized here


The solution is simple; all you need to do is to put these lines after the chart is rendered. You can view the live example here

Ext.each(

Ext.getCmp(‘chartCmpConversion’)

.legend.items, function(item) {

item.un(“mousedown”, item.events.mousedown.listeners[0].fn);

})

But, where to place this code can become troublesome. So I pasted the whole code to generate a pie chart below.

<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.onReady(function () {

var data =generateData(6, 20);
if(data.length>0)
{
store1.loadData(data);
var donut = false,
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,
tips: {
trackMouse: true,
width: 140,
height: 28,
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
}
}
}]
}
});

Ext.each(
Ext.getCmp(‘chartCmpConversion’)
.legend.items, function(item) {
item.un(“mousedown”, item.events.mousedown.listeners[0].fn);
})

}
});

</script>
<div id=“conversionChart”>
<div id=“conversionChartInner”>
</div>
</div>

References:-

  1. http://stackoverflow.com/questions/6468786/extjs4-pie-chart-problem?s=38106945-6332-41d9-8c9e-1650038acb46
  2. http://www.sencha.com/forum/showthread.php?152086-Disable-Legend-Click-Event-for-ExtJs-Charts&p=852967#post852967
About these ads

Comments on: "How to make legend non-clickable in Ext js pie chart" (1)

  1. this doesn’t work in extjs 4.2 :( any workarounds that you can think of?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 3,082 other followers

%d bloggers like this: