Results 1 to 3 of 3

Thread: Chart, highlight a bar and hold the color.

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    74

    Default Chart, highlight a bar and hold the color.

    zz7slhsprnopuoui1mpv.jpg

    Code:
        var colors = ['url(#v-1)',
                      'url(#v-2)',
                      'url(#v-3)',
                      'url(#v-4)',
                      'url(#v-5)'];
        
        var baseColor = '#eee';
        
        Ext.define('Ext.chart.theme.Fancy', {
            extend: 'Ext.chart.theme.Base',
            
            constructor: function(config) {
                this.callParent([Ext.apply({
                    axis: {
                        fill: baseColor,
                        stroke: baseColor
                    },
                    axisLabelLeft: {
                        fill: baseColor
                    },
                    axisLabelBottom: {
                        fill: baseColor
                    },
                    axisTitleLeft: {
                        fill: baseColor
                    },
                    axisTitleBottom: {
                        fill: baseColor
                    },
                    colors: colors
                }, config)]);
            }
        });
    
    
        var win = Ext.create('Ext.Panel', {
            width: 1000,
            height: 300,
            hidden: false,
            maximizable: true,
            title: 'Column Chart',
            renderTo: Ext.getBody(),
            enableToggle: true,
            pressed: true,
            layout: 'fit',
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                theme: 'Fancy',
                animate: {
                    easing: 'bounceOut',
                    duration: 750
                },
                store: store,
                background: {
                    fill: 'rgb(17, 17, 17)'
                },
                gradients: [
                {
                    'id': 'v-1',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(212, 40, 40)'
                        },
                        100: {
                            color: 'rgb(117, 14, 14)'
                        }
                    }
                },
                {
                    'id': 'v-2',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(180, 216, 42)'
                        },
                        100: {
                            color: 'rgb(94, 114, 13)'
                        }
                    }
                },
                {
                    'id': 'v-3',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(43, 221, 115)'
                        },
                        100: {
                            color: 'rgb(14, 117, 56)'
                        }
                    }
                },
                {
                    'id': 'v-4',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(45, 117, 226)'
                        },
                        100: {
                            color: 'rgb(14, 56, 117)'
                        }
                    }
                },
                {
                    'id': 'v-5',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(187, 45, 222)'
                        },
                        100: {
                            color: 'rgb(85, 10, 103)'
                        }
                    }
                }],
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['Quantidade'],
                    minimum: 0,
    //                maximum: 100,
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Numero de Processos',
                    grid: {
                        odd: {
                            stroke: '#555'
                        },
                        even: {
                            stroke: '#555'
                        }
                    }
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: 'Range',
                    title: 'Espao temporal'
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                highlightCfg: {
                        fill: '#a2b5ca'
                    },
                label: {
                      display: 'insideEnd',
                      'text-anchor': 'middle',
                      //Numero que aparece em cima da barra
                        field: 'Quantidade',
                        orientation: 'horizontal',
                        fill: '#fff',
                        font: '17px Arial'
                    },
                    renderer: function(sprite, storeItem, barAttr, i, store) {
                        barAttr.fill = colors[i % colors.length];
                        return barAttr;
                    },
                    style: {
                        opacity: 0.95
                    },
    
    
                    listeners: {
                        'itemmousedown': function(item) {
                     	if(!flag) return flag;
                     	flag = false;
                    	var cmp = Ext.getCmp('chartCmp');
                    	     var series = cmp.series.get(0);
                                 index = Ext.Array.indexOf(series.items, item);
                                 selectionModel = grid.getSelectionModel();
                             selectedStoreItem = item.storeItem;
                            var as = selectedStoreItem.data.Range;
                             storeDadosFiltrados.proxy.extraParams.range = as;
                             storeDadosFiltrados.load();
    
    
                         	}
    
    
                    },
                    xField: 'Range',
                    yField: ['Quantidade']
                }]
            },
            renderTo:'grafico'
        });
    
    
    });
    I am selecting the first column, and i don't click it, just with the mouse over it. The higlight color is a variante of blue. But in the code i use itemmousedown, and i don't understand why the bar changed color only by passing by the mouse? how can i put it only highlight only in mouse click?

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    74

    Default

    Anyone?

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    Ahmedabad, India
    Posts
    15

    Default

    Hi saga56,

    you can do like this:

    Code:
    onItemMouseOver: function() {
             return false;
    },
    onItemClick: function(item) {
             if (me.highlight) {             
                 me.highlightItem(item);
             }
    }

    Thanks,y
    Piyush Dholariya

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •