1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    19
    Vote Rating
    0
    alabs is on a distinguished road

      0  

    Default ExtJS 4 Smart legend extension, how to restrict width of legend

    ExtJS 4 Smart legend extension, how to restrict width of legend


    I'm using Smart legend extension to break the legend into 2 columns if too many categories are in.

    But some legend have really lengthy text which will cause the legend to take up too much space and cause the chart to render really small. Is there any way to fix this issue?


    Attached Images

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    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


    Perhaps you could truncate your string using:
    http://docs.sencha.com/ext-js/4-1/#!...ethod-ellipsis

    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    19
    Vote Rating
    0
    alabs is on a distinguished road

      0  

    Default


    Hi Scott,

    Will you be able to advise how truncation method should be applied?

    Here is a sample of my code:
    Code:
    merchant1 = new Ext.chart.Chart({
                width: 900,
                height: 400,
                animate: true,
                store: storeMerchants,
                renderTo: Ext.Element.get('pie_merchant1'),
                shadow: false,
                legend: false,
                insetPadding: 0,
                theme: 'PieGraphs',
                series: [{
                    type: 'pie',
                    field: 'amount',
                    showInLegend: true,
                    highlight: {
                      segment: {
                        margin: 20
                      }
                    },
                    label: {
                        field: 'merchantname',
                        display: 'none',
                        color:"#ccc",
                        orientation:"horizontal",
                        minMargin:100,
                        contrast: false,
                        font: 'Helvetica,Arial,Verdana,sans-serif'
                    },
                    animate: true,
                    listeners: {
                                itemmouseup: function(item) {
                                        monthName=item.storeItem.data.merchantname;
                                        alert("You have clicked on: " + monthName);
                                        Ext.Element.get('reset-container').removeCls('visible-zero')
                                }
                        },
                    
                    tips: {
                         trackMouse: true,
                         width:140,
                         anchor:'bottom',
                         anchorToTarget:true,
                         mouseOffset :[-40,0],
                         renderer: function(storeItem, item) {                            
                         this.setTitle('<p style="min-width:200px;padding-left:5px;padding-top:5px">' + storeItem.get('merchantname') + '<br/> <b>Amount: </b><span>' + numberWithCommas(storeItem.get('amount')) + '.<sup>00 SGD</sup></span></p>');    
                        
                        }
                    
                          }
                }]
            });
            
            Ext.each(merchant1.legend.items, function(item) {
                item.un("mousedown", item.events.mousedown.listeners[0].fn);
            });
    
            legend = merchant1.legend = Ext.create('Ext.ux.chart.SmartLegend', {
                position:       'left',
                chart:          merchant1,
                rebuild:        true,
                boxStrokeWidth: 0
            });
            
            merchant1.legend.redraw();
            merchant1.redraw();

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    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 should be able to use the 'load' listener on the store and alter the data at that point.

    Scott.

  5. #5
    Sencha User Jeegnesh's Avatar
    Join Date
    Feb 2013
    Location
    Khedbrahma
    Posts
    30
    Vote Rating
    0
    Jeegnesh is on a distinguished road

      0  

    Default


    very good example but,
    My code Like this

    me.chart = new Ext.create('Ext.chart.Chart', {
    width: me.width, height: me.height,
    store: chartStore, animate: me.animate,
    shadow: me.shadow,
    legend: true,
    backGround: me.backGround,
    axes: me.axes, series: me.series
    });

    legend = me.chart.legend = new Ext.create('Ext.ux.chart.SmartLegend', {
    position: 'bottom',
    chart: me.chart,
    rebuild: true,
    boxStrokeWidth: 1
    });


    me.chart.legend.redraw();
    me.chart.redraw();

    then it give me error of

    Microsoft JScript runtime error: Unable to get value of the property 'add': object is null or undefined

    on this line

    box = me.boxSprite = me.chart.surface.add(Ext.apply({ . .of ext-all-debug.js file