EXTJS 5 Not display empty record in chart

Question

First: Here is the fiddle that explains clearly my problem : https://fiddle.sencha.com/#fiddle/hgm

To sum up, I have a very simple chart bound to a store. The store has few "empty" records and is like this:

var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value', 'length'],
    data: [
        {"name": "A-0", "value": 18.34, "length": 30},
        {"name": "A-1", "value": 2.67, "length": 35},
        {"name": "", "value": 0, "length": 0} // this is what I call an empty record
    ]
});

My pie chart is very simple:

var donut = Ext.create('Ext.chart.PolarChart', {
    title: 'Test',
    animation: true,
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),

    store: storeA,

    legend: {
        docked: 'bottom'
    },

    series: [{
        type: 'pie',
        angleField: 'value',
        lengthField: 'length',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

But I would like that the empty record does not appear in the legend like it does actually:

I would like to add that I don't want to clean the store before giving it to the chart. I need to use this exact same store.

Answer 1

Ext does not have a concept of "empty records" so it just takes whatever it finds in the store and plots it on the chart. You can either plug a custom logic between store and chart by overriding the chart or you need to "clean" the store before binding.

Answer 2

You can add a custom tpl to your legend config like so:

legend: {
    docked: 'bottom',
    tpl: ['<div class="', Ext.baseCSSPrefix, 'legend-container">', '<tpl for=".">', '<tpl if="name !== \'\'"><div class="', Ext.baseCSSPrefix, 'legend-item">', '<span ', 'class="', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ', 'style="background:{mark};">', '</span>{name}', '</div>', '</tpl>', '</tpl>', '</div>']
}

I have taken the default Ext JS one add added a tpl if to check if the name is an empty string.

Answer 3

Pass data through a cleanData function

var data = [
    {"name": "A-0", "value": 18.34, "length": 30},
    {"name": "A-1", "value": 2.67, "length": 35},
    {"name": "", "value": 0, "length": 0}
];
var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value', 'length'],
    data: cleanData(data)
});

var donut = Ext.create('Ext.chart.PolarChart', {
    title: 'Test',
    animation: true,
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),

    store: storeA,

    legend: {
        docked: 'bottom'
    },

    series: [{
        type: 'pie',
        angleField: 'value',
        lengthField: 'length',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

Ext.create('Ext.form.Label', {
    html: 'Is it possible to "disable" (make invisible) items that have no name or 0 as value?<br/>' +
          'For example after A-1, I have an "empty" record in my store, but I don\'t want it to be displayed ;)',
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
});

function cleanData(data) {
  var result = [];
  for (var i=0; i<data.length; i++) {
    if (data[i].value !== 0) {
      result.push(data[i]);
    }
  }
  return data;
}