How to disable chart legend clicking filter behavior?

[adriand_hbe]

Hi everyone,

I've been working for some time to try and remove the click event behavior on my chart legends. The default functionality for the legends on pie charts or series charts, is that if you click one of the legend items, it will remove it from your chart display. If you click on it again, it will return it back. For example, see the below chart with legend.

piechart.png
This is my current chart render code:

function showPieChart (elemId, storeData, wid, hei, style, isPercentage) {
	Ext.BLANK_IMAGE_URL = '/newui_assets/images/x.gif';
	Ext.require('Ext.chart.*');
	
	var seriesColors = ["#ba999e", "#5e6668", "#c4bfa6", "#7ea9cc", "#dee3e6", "#937c5d"];
	var chartStyles = chartStylesNormal;
	var labelStyles = labelStylesNormal;
	var legendPosition = 'bottom';
	
	if (style == "mini") {
		chartStyles = chartStylesMini;
		labelStyles = labelStylesMini;
		legendPosition = 'right';
	}
	
	Ext.define('Ext.chart.theme.themeNormal', {                                     
        extend: 'Ext.chart.theme.Base',                                       
 
        constructor: function(config) {                                       
            this.callParent([Ext.apply({                                      
                colors: seriesColors
            }, config)]);
        }                                                                     
    });
	
	Ext.onReady(function(){		
		Ext.create('Ext.chart.Chart', {
			renderTo: elemId,
			width: wid,
			height: hei,
			animate: true,
			store: storeData,
			shadow:false,
			theme: 'themeNormal',
			legend: {
        		boxStrokeWidth: 0,
        		position: legendPosition,
        		labelFont: 'normal 9px Arial'
        	},
			series: [{
				type: 'pie',
				field: 'count',
				showInLegend: true,
				tips: {
					trackMouse: true,
					dismissDelay: 0,
					width: 140,
					height: 28,layout: 'fit',
					renderer: function(storeItem, item) {
            			this.setTitle(storeItem.get('count') + ((isPercentage)?"%":"") + " " + storeItem.get('name') + ((storeItem.get('count')>1)?"s":""));
            		}
				},
				highlight: {
					segment: {
						margin: 5
					}
				}
			}]
		});
		
        //Ext.Array.forEach(Ext.query(".x-hide-visibility"), function (item) { item.setAttribute("class", "x-hide-display"); }); 
	});
}

I tried to use this fix which was suggested by someone else:

Ext.each(Ext.chart.legend.items, function(item) {
		item.un("mousedown", item.events.mousedown.listeners[0].fn);
	})

However, I got the following error when I tried that:
Uncaught TypeError: Cannot read property 'items' of undefined

Any help is really appreciated.

Thanks!

[scottmartin]

You need to reference the actual chart, not the chart class

// does not return instance
Ext.each(Ext.chart.legend.items, function(item) {..});

This seems to work for me:

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',   'data': 10 },
        { 'name': 'metric two',   'data':  7 },
        { 'name': 'metric three', 'data':  5 },
        { 'name': 'metric four',  'data':  2 },
        { 'name': 'metric five',  'data': 27 }
    ]
});

var chart = Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 350,
    animate: true,
    store: store,
    theme: 'Base:gradients',
    legend: {
        position: 'right'
    },
    series: [{
        type: 'pie',
        angleField: 'data',
        showInLegend: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
                // calculate and display percentage on hover
                var total = 0;
                store.each(function(rec) {
                    total += rec.get('data');
                });
                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
            }
        },
        highlight: {
            segment: {
                margin: 20
            }
        },
        label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }]
});

Ext.each(chart.legend.items, function(item) {
    item.un("mousedown", item.events.mousedown.listeners[0].fn);
})

Regards,
Scott

[adriand_hbe]

Thanks for the help Scott. That did the trick.

I was previously just rendering my chart as such:

Ext.create('Ext.chart.Chart', {
renderTo: elemId,
width: wid,
height: hei,
...

However, once I added your change:

var chart = Ext.create('Ext.chart.Chart', { renderTo: elemId,
width: wid,
height: hei,
...

I was able to reference the chart.

Worked perfectly.

[reg.phipps]

Using Architect Version: 2.2.2 how would I add this code Ext.each(chart.legend.items, function(item) {.... to a project