Column chart legend repeats number values on axis label (0..0..1..1..2..2)

[imc-pp]

REQUIRED INFORMATION Ext version tested:

• Ext 4.1.3 rev 548

Browser versions tested against:

• FF16
• Chrome 24.0.1312.57
  

DOCTYPE tested against:

Description:

• If we create a chart store with a small number of results (e.g. 4) the axis labels for the numeric axis is repeated like 0..1..1..2..2..3..3..4..4 altough it should read 0.. ..1.. ..2.. ..3.. ..4 as one can clearly see where the single values start.

Steps to reproduce the problem:

• create a sample store where the numeric field has small values (largest column value e.g. 3)
• create a column chart from the store

The result that was expected:

• The numeric axis does NOT repeat numbers as axis labels that have already been printed
• Fine would be (0..1.. ..2.. ..3.. ..4)

The result that occurs instead:

• The numeric axis repeats the axis labels if the store values are very small ( e.g.3)
• The axis labels read (0..1..1..2..2..3..3..4)

Test Case:

function testRenderer(storeItem, item) {
   console.log(item);
   console.log(item.series.yField);
   console.log(item.series.yFieldIndex);

   var fieldValue = item.yField;
   var valueIndex = fieldValue.indexOf("_");
    if (valueIndex != -1) {
    var itemYFieldName = item.yField;
    console.log("itemYFieldName=" + itemYFieldName);
    var yFieldIndex = 0;
    for (var i in item.series.yField) {
        var fieldName = item.series.yField[i];
        console.log("testing fieldName=" + fieldName);
        if (fieldName === itemYFieldName) {
        break;
        }
        yFieldIndex++;
    }
    console.log("titleIndex=" + yFieldIndex);
        var fieldValueTranslation = item.series.title[yFieldIndex];
    console.log("title=" + fieldValueTranslation);
    this.setTitle(fieldValueTranslation);
    } else {
    console.log("no title found");
    }
}


Ext.chart.theme.testResultTheme = Ext.extend(Ext.chart.theme.Base, {
    constructor: function(config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
            colors: [
                'rgb(22, 181, 7)',
                'rgb(230, 18, 68)',
                'rgb(242,237,239)'
            ]
        }, config));
    }
});

// for ColumnChart: displays labels of category axis
function drawDiagonalLabels() {
    var me = this,
        axes = me.chart.axes,
        insetPadding = me.chart.insetPadding,
        position = me.position,
        inflections = me.inflections,
        ln = inflections.length,
        labels = me.labels,
        maxHeight = 0,
        ratio,
        bbox, point,
        adjustEnd = me.adjustEnd,
        hasLeft = axes.findIndex('position', 'left') != -1,
        hasRight = axes.findIndex('position', 'right') != -1,
        textLabel, text,
        last, x, y, i;

    last = ln - 1;
    point = inflections[0];

    // create legend before creation of the axis for correctly displaying of labels
    createLegend(me);

    var barWidth = me.chart.series.items[0].getBarGirth();
    var maxLabelText = getLabelWithMaxLength(me, labels);
    me.label.rotate = {degrees:0};
    var labelForWidthDefine = me.getOrCreateLabel(ln, me.label.renderer(maxLabelText));
    var labelLength = Math.max(barWidth, 80);
    var maxWidthOfLabel = Math.floor(maxLabelText.length*(labelLength/labelForWidthDefine._bbox.width));
    labelForWidthDefine.destroy();

    // calculates the angle for diagonal displaying
    var degrees = 0;
    if (labelLength > barWidth) {
        degrees = Math.acos(barWidth/labelLength)*180/Math.PI;
        me.label.rotate = {degrees:360-parseInt(degrees)};
    }
    ratio = Math.floor(Math.abs(Math.sin((360-parseInt(degrees)) * Math.PI / 180)));

    for (i = 0; i < ln; i++) {
        point = inflections[i];
        text = me.label.renderer(labels[i]);
    if (typeof(text) !== undefined) {
        textLabel = createLabelWithToolTip(me, i, text, maxWidthOfLabel);
        bbox = textLabel._bbox;
        maxHeight = Math.max(maxHeight, bbox.height + me.dashSize + me.label.padding);
        if (parseInt(degrees) < 45) {
            x = Math.floor(point[0] - (ratio ? bbox.height : bbox.width) / 2);
        } else {
            x = Math.floor(point[0] - bbox.height / 2);
        }
        if (adjustEnd && me.chart.maxGutter[0] == 0) {
            if (i == 0 && !hasLeft) {
                x = point[0];
            }
            else if (i == last && !hasRight) {
                x = Math.min(x, point[0] - bbox.width + insetPadding);
            }
        }
        if (position == 'top') {
            y = point[1] - (me.dashSize * 2) - me.label.padding - (bbox.height / 2);
        }
        else {
            y = point[1] + (me.dashSize * 2) + me.label.padding + (bbox.height / 2);
        }

        textLabel.setAttributes({
            hidden: false,
            x: x,
            y: y
        }, true);
    }
    }

    return maxHeight;
}

function createLegend(axis) {
    var chart = axis.chart;
    var legend = chart.legend;
    if (legend !== false && legend.visible) {
        if (legend.update || !legend.created) {
            legend.create();
        }
    }
    chart.alignAxes();
    if (legend !== false && legend.visible) {
        legend.updatePosition();
    }
}

function createLabelWithToolTip(axis, i, text, maxWidth) {
    var shortText;
    if (text.length > maxWidth) {
        shortText = Ext.util.Format.substr(text, 0, maxWidth - 3) + "...";
    } else {
        shortText = text;
    }

    var label = axis.getOrCreateLabel(i, shortText);

    if (text.length > maxWidth) {
        label.setText(shortText);
        var tip = Ext.create('Ext.tip.ToolTip', {
            target: label.el,
            html: '<span>' + text + '</span>'
        });
    }
    return label;
}

function getLabelWithMaxLength(axis, labels) {
    var label;
    var maxLength = 0;
    for (var i=0; i<labels.length; i++) {
        var text = labels[i];
        if (text.length > maxLength) {
            label = labels[i];
            maxLength = text.length;
        }
    }
    return label;
}

function removeHideShowLegend(chart) {
    Ext.each(chart.legend.items, function(item) {
        item.un("mousedown", item.events.mousedown.listeners[0].fn);
    });
}


//#########################################




var testlocalStore = Ext.create('Ext.data.JsonStore', {
    name: 'testLocalStore',
    fields: ['testid', 'result', 'resultcount_0', 'result2count_1'],
    data: [
        {testid:'477189',result:'0',result2count_1:3, resultcount_0:10},
    //    {testid:'477189',result:'1',result2count:3, resultcount:10},
        {testid:'477153',result:'0',result2count_1:3, resultcount_0:6},
        {testid:'477690',result:'0',result2count_1:3, resultcount_0:4},
    {testid:'477177',result:'0',result2count_1:3, resultcount_0:1}
    ]
});

var buggyStore = Ext.create('Ext.data.JsonStore', {
    name: 'testLocalStore',
    fields: ['testid', 'result', 'resultcount_0', 'result2count_1'],
    data: [
        {testid:'477189',result:'0',result2count_1:3, resultcount_0:1},
        {testid:'477153',result:'0',result2count_1:3, resultcount_0:1},
        {testid:'477690',result:'0',result2count_1:3, resultcount_0:1},
    {testid:'477177',result:'0',result2count_1:3, resultcount_0:1}
    ]
});

var testRemoteUrl = '';

var testChart = Ext.create('Ext.chart.Chart', {
width:500,
height:450,
animate: true,
store: buggyStore,
                           //theme:'testResultTheme',
legend: {position:'right',itemSpacing:0,boxStrokeWidth:0},
axes: [
     {type: 'Numeric',
      position: 'left',
      fields: ['resultcount_0'],
      label: {renderer: Ext.util.Format.numberRenderer('0,0')},
      title: 'Count',grid: true,minimum: 0}, 
{type: 'Category',position: 'bottom',fields: ['testid'],title: 'Test',
 drawHorizontalLabels: drawDiagonalLabels}
],
series: [{type:'column',axis: 'left',showInLegend:true,
tips: {trackMouse: true,width:160,height:38,
renderer: testRenderer
},
highlight: true,
      label: {field: ['resultcount_0','result2count_1'],display: 'insideEnd',
          contrast: true,
          renderer: Ext.util.Format.numberRenderer('0'),
    orientation: 'horizontal','text-anchor': 'middle',font: '12px Arial'
      },
yField: ['resultcount_0', 'result2count_1'],
      xField: 'testid',

      stacked: true,
      title:['strResultCount', 'strResult2Count']
}
    ]});

Ext.application({
   name: 'MyApp',
   launch: function() {
    Ext.create('Ext.container.Viewport', {
    items: [
    {
     title: 'EXTJS: MyApp',
     html : 'Version: ' + Ext.versions.core.version,
     height:50
        
        }, 
    testChart
    ]
  });
 }
});

HELPFUL INFORMATION

Screenshot or Video:

• attached

Possible fix:

• not provided

Additional CSS used:


Operating System:

• Windows 7

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[evant]

This isn't a bug. By using the renderer, you are telling the axis to truncate the decimals from the calculated value. The calculation has no way of knowing how you intend to render the values.

[imc-pp]

Thanks for the hint. Using a different number formatter works indeed. Sorry for posting a 'wrong bug'

[Ms.Pritam]

could you please explain ? how to solve that problem ?