Results 1 to 5 of 5

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

    You found a bug! We've classified it as EXTJS-8797 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    1
      0  

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

    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:
    Code:
    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
    Attached Images Attached Images

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,422
    Vote Rating
    1271
      0  

    Default

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

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,438
    Vote Rating
    859
      0  

    Default

    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    1
      0  

    Default Thanks

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

  5. #5
    Sencha User
    Join Date
    May 2015
    Posts
    1
    Vote Rating
    0
      0  

    Default BAR chart (x-axis ) Count repeat Problem

    could you please explain ? how to solve that problem ?

Posting Permissions

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