1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    18
    Vote Rating
    1
    adriand_hbe is on a distinguished road

      0  

    Default How to disable chart legend clicking filter behavior?

    How to disable chart legend clicking filter behavior?


    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:

    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:

    Code:
    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!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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:

    Code:
    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

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    18
    Vote Rating
    1
    adriand_hbe is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    36
    Vote Rating
    1
    reg.phipps is on a distinguished road

      0  

    Default how to add this code to Architect 2

    how to add this code to Architect 2


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

Thread Participants: 2

Tags for this Thread