CODEWITHSUNDEEP
javascriptextjschartslegend
RaviPatidar
RaviPatidar

Reputation: 1486

extjs pie chart all legend showing same color

I am using extjs 4.2 pie chart and having multiple records in my store. i want to show legend color same as of the each slice color. currently each legend color is same in my production version but in my development version this is working correct. here is my code.

development snapshot

development snapshot

production snapshot

production snapshot

{
        xtype: 'piechartattendancereport',
        itemId: 'studentattandencesummeryvise',
        title: 'Attendance Summary',
        width : 450,
        minHeight : 240,
        store: 'mystore.store.attendance.PendingAttendanceGridStore',
        countField: 'totalDays',
        valueField: 'programName'
    }




Ext.define('myapp.view.PieChartAttendanceReport', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.piechartattendancereport',
    animate: true,
    shadow: true,
    legend: {
        position: 'right'
    },
    insetPadding: 30,
    theme: 'Base:gradients',
    initComponent: function() {
        var this$ = this;
        var countField = !isNullOrEmpty(this.countField)?this.countField:'number';
        var valueField = !isNullOrEmpty(this.valueField)?this.valueField:'category';
        var showLegend = (!isNullOrEmpty(this.legendField)&& this.legendField)?true:false;
        var chartStore = null;
        if(!isNullOrEmpty(this.store)){
            chartStore = Ext.create(this.store);
        }else{
            chartStore = Ext.create('Ext.data.JsonStore',{
                fields: ['number', 'category'],
                data: [{
                    number :0,
                    category : 'Category'
                }]
            });
        }
        Ext.apply(this$, {
            store: chartStore,
            series: [{
                type: 'pie',
                field: countField,
                showInLegend: true,
                donut: false,
                tips: {
                    trackMouse: true,
                    //width: 300,
                    height: 28,
                    layout: 'fit',
                    renderer: function(storeItem, item) {
                        var total = 0;
                        chartStore.each(function(rec) {
                            total += rec.get(countField);
                        });
                        var tipTitle = storeItem.get(valueField) + ': ' + storeItem.get(countField);
                        var length = (tipTitle.length)* 10;
                        this.setWidth(length);
                        this.setTitle(tipTitle);
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: valueField,
                    display: 'rotate',
                    contrast: true,
                    font: '15px Arial',
                    renderer: function(value, label, storeItem, item, i, display, animate, index) {
                        var text;
                        if(storeItem.get(countField)!= undefined ||  storeItem.get(countField)!= null){
                            if(storeItem.get(countField) == 0){
                                text = '';
                            }else{
                                text = storeItem.get("Present")+ '%' ;
                                if(text.length > 12){
                                    text = text.substring(0, 10) + '..';
                                }
                            }

                        }else{
                            text = value;
                        }
                        label.setAttributes({
                            text: text
                        }, true);
                        return text;
                    }
                }
            }]
        });

        this$.callParent(arguments);
    }
});

Upvotes: 3

Views: 939

Answers (1)

FieryCat
FieryCat

Reputation: 1885

Try to change label.setAttributes to

label.setAttribute('text': text);

Because third parameter avoidCopy has a note that the content of object may be destroyed.

Also it can be a result of JS error, try to check console logs. I would suggest to use typeof instead of comparing with undefined:

if (typeof storeItem.get(countField) !== 'undefined' ||  storeItem.get(countField) != null) {

Upvotes: 2

Related Questions