Results 1 to 6 of 6

Thread: hide pie chart slices with 0 value

  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    29

    Default hide pie chart slices with 0 value

    Hi,

    is there an option or trick to hide Pie chart slices that have a value <= 0? I have a fixed set of colours to assign to my slices, so if any data is 0, I need to still deliver the data back from the store. Also, I want the Legend to contain the data.

    Thanks for any pointers.

    Kind Regards,

    Jochen

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Can you provide more info on what you want to happen when the value is <= 0.
    When happens now vs what you want.

    When I set to 0,null,undefined .. I still see the label (albeit just a label) and it is in the legend.

    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2007
    Posts
    29

    Default

    Hi,

    I wasn't specific enough. I have no slice, because the value is 0, but the slice label is still there. Here is my config:

    Code:
    Ext.create('Ext.chart.Chart', {
                height: 430,
                width: 430,
    
                series: [{
    				type: 'pie',
                    angleField: 'value',
                    colorSet: ["#afc51a","#f4b12f","#c00f18"],
                    label: {
                        field: 'name',
                        display: 'rotate',
                        contrast: true
                    },
                    showInLegend: true,
                    tips: {
                    	trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function(storeItem, item) {
                            //calculate percentage.
                        	var total = 0;
                            store.each(function(rec) {
                                total += rec.get('value');
                            });
                            this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('value') / total * 100) + '%');
                        }
                    },
                    highlight: {
                    	segment: {
                        	margin: 20
                        }
                    },
                    label: {
                    	field: 'name',
                        display: 'rotate',
                        contrast: true,
                        font: '18px Arial'
                    },
                    animate: true
    
                }],
    
                store: store,
    
                renderTo: 'graph'
            });
    
        })

    See my pie chart below. If Green=0 i need to somehow hide that label.

    Thanks for your help.
    Screenshot from 2012-06-13 10:32:44.png

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Please try the following:

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            { 'name': 'metric one',   'data':  0 },
            { 'name': 'metric two',   'data':  7 },
            { 'name': 'metric three', 'data': 10 }
        ]
    });
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 350,
        animate: true,
        store: store,
        theme: 'Base:gradients',
        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'
            },
            renderer: function(sprite, record, attributes, index, store){
                console.log(record);
                if (record.data.data === 0) { record.data.name = ''; }
            }    
        }]
    });?
    Regards,
    Scott.

  5. #5
    Sencha User
    Join Date
    Apr 2007
    Posts
    29

    Default

    Hi Scott,

    this soluition does remove the labels when the value is 0, but it also somehow stops the chart from being redrawn.

    For example, one set of data shows the first Pie chart.

    When I then filter for something that is only going to return Red, the labels are removed, but the chart is still the same.

    Only when I reload the page with the same filters, I get the fully red chart.

    My reload code is here:
    Code:
    Ext.get('filterChart').on('click', function() {
    
        		store.getProxy().extraParams = Ext.Object.fromQueryString(
        				Ext.Element.serializeForm(Ext.get('filter'))
        		);
    
        		store.load();
            });
    I tried to add in Ext.get('Chart').drawSeries(); in there, which hasn't helped.
    Attached Images Attached Images

  6. #6

    Default (Return attributes, too)

    In case this also becomes an issue for viewers of this thread: one should also return the `attributes` object from the renderer.

    More information here: http://www.sencha.com/forum/showthre...terates-shadow

Tags for this Thread

Posting Permissions

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