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
    imc-pp is on a distinguished road

      0  

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

    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

      • #2
        Sencha - Senior Forum Manager mitchellsimoens's Avatar
        Join Date
        Mar 2007
        Location
        Gainesville, FL
        Posts
        37,647
        Vote Rating
        899
        mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

          0  

        Default


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

      • #3
        Sencha - Ext JS Dev Team evant's Avatar
        Join Date
        Apr 2007
        Location
        Sydney, Australia
        Posts
        17,166
        Vote Rating
        674
        evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

          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
        Sencha User
        Join Date
        Jan 2013
        Posts
        4
        Vote Rating
        1
        imc-pp is on a distinguished road

          0  

        Default Thanks

        Thanks


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

      Thread Participants: 2