1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    17
    Vote Rating
    1
    Answers
    1
    nexSencha is on a distinguished road

      0  

    Default Answered: Column Chart not displaying all markers names on the 'Category'-Axis

    Answered: Column Chart not displaying all markers names on the 'Category'-Axis


    Hi All,
    i'm developing an application with Ext JS 4.1.3. The application processes data and shows a chart on basis of the data.

    The problem is:
    In the case, where there are more than 80-90 entries on the chart (on x-Axis), some marker names are omitted. So, instead of the markers names it shows partially empty positions. Although there is still a lot of space.

    The questions are:
    - I made the font of the markers smaller already. Maybe there is a way to reduce the padding between the marks?
    - How can I force the Chart to show all entries? Can I change the setting of the chart (or x-Axis) to display all the markers names (regardless of the number of the entries) ?
    - Are there other solutions to this problem?


    UPD1. This is somehow related to css class " x-hide-visibility". How can i disable the hideMode of labels?

    UPD2.
    I have found the following solution. But it made the chart slow. Maybe someone knows other solution?
    There must be a way to switch off the option ('hideMode') in advance.

    PHP Code:
    for (var 0ichart.axes.items[0].labelGroup.items.lengthi++){ 
      
    chart.axes.items[0].labelGroup.items[i].el.removeCls(' x-hide-visibility'); 

    Here is a screenshot:
    Attached Images

  2. I moderated your posts ..

    As for the chart .. in the example with vertical labels, you could use the following override
    For chart with labels on the bottom axis, you would override drawHorizontalLabels

    Code:
    Ext.define('Ext.chart.axis.override.Axis', {
        override: 'Ext.chart.axis.Axis',
    
        drawVerticalLabels: function () {
            var me = this,
                inflections = me.inflections,
                position = me.position,
                ln = inflections.length,
                chart = me.chart,
                insetPadding = chart.insetPadding,
                labels = me.labels,
                maxWidth = 0,
                max = Math.max,
                floor = Math.floor,
                ceil = Math.ceil,
                axes = me.chart.axes,
                gutterY = me.chart.maxGutter[1],
                bbox, point, prevLabel, prevLabelId,
                hasTop = axes.findIndex('position', 'top') != -1,
                hasBottom = axes.findIndex('position', 'bottom') != -1,
                adjustEnd = me.adjustEnd,
                textLabel, text,
                last = ln - 1, x, y, i;
    
            for (i = 0; i < ln; i++) {
                point = inflections[i];
                text = me.label.renderer(labels[i]);
                textLabel = me.getOrCreateLabel(i, text);
                bbox = textLabel._bbox;
    
                maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
                y = point[1];
                if (adjustEnd && gutterY < bbox.height / 2) {
                    if (i == last && !hasTop) {
                        y = Math.max(y, me.y - me.length + ceil(bbox.height / 2) - insetPadding);
                    }
                    else if (i == 0 && !hasBottom) {
                        y = me.y + gutterY - floor(bbox.height / 2);
                    }
                }
                if (position == 'left') {
                    x = point[0] - bbox.width - me.dashSize - me.label.padding - 2;
                }
                else {
                    x = point[0] + me.dashSize + me.label.padding + 2;
                }
                textLabel.setAttributes(Ext.apply({
                    hidden: false,
                    x: x,
                    y: y
                }, me.label), true);
                
                if (i != 0 && me.intersect(textLabel, prevLabel)) {
                    if (i === last && prevLabelId !== 0) {
    //                    prevLabel.hide(true);
                    } else {
    //                    textLabel.hide(true);
                        continue;
                    }
                }
                prevLabel = textLabel;
                prevLabelId = i;
            }
    
            return maxWidth;
        }
    
    
    });
    Scott

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    An example would be helpful. In the case of the hidden labels, I would think an override of the function that draws the labels would be better than looping through the items to remove a CSS.

    Scott.

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    17
    Vote Rating
    1
    Answers
    1
    nexSencha is on a distinguished road

      0  

    Default


    Thank you, Scott.

    An example would be helpful.
    This can be easily simulated with any chart. You just have to minimize the chart window.
    From a certain size the single markers will disappear. Just make the chart window small.

    For example:

    http://dev.sencha.com/deploy/ext-4.0...harts/Bar.html

    screenshot2.jpg

  5. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    17
    Vote Rating
    1
    Answers
    1
    nexSencha is on a distinguished road

      0  

    Default


    This also happens with other diagrams. You just have to minimize the chart window so, that "category"-axis is going smaller (NOT numeric)
    Examples:
    http://dev.sencha.com/deploy/ext-4.0...ts/Column.html
    http://dev.sencha.com/deploy/ext-4.0...roupedBar.html

  6. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    17
    Vote Rating
    1
    Answers
    1
    nexSencha is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    I would think an override of the function that draws the labels would be better than looping through the items to remove a CSS.
    That's what I thought too. I have looked the source code (Ext.chart.Label). There is an array called 'hides', where the labels are pushed , if they need to be hidden.

    But, I think there must be another option to turn it off:
    config : {hideMode: 'visible'} or something like this .

  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    I moderated your posts ..

    As for the chart .. in the example with vertical labels, you could use the following override
    For chart with labels on the bottom axis, you would override drawHorizontalLabels

    Code:
    Ext.define('Ext.chart.axis.override.Axis', {
        override: 'Ext.chart.axis.Axis',
    
        drawVerticalLabels: function () {
            var me = this,
                inflections = me.inflections,
                position = me.position,
                ln = inflections.length,
                chart = me.chart,
                insetPadding = chart.insetPadding,
                labels = me.labels,
                maxWidth = 0,
                max = Math.max,
                floor = Math.floor,
                ceil = Math.ceil,
                axes = me.chart.axes,
                gutterY = me.chart.maxGutter[1],
                bbox, point, prevLabel, prevLabelId,
                hasTop = axes.findIndex('position', 'top') != -1,
                hasBottom = axes.findIndex('position', 'bottom') != -1,
                adjustEnd = me.adjustEnd,
                textLabel, text,
                last = ln - 1, x, y, i;
    
            for (i = 0; i < ln; i++) {
                point = inflections[i];
                text = me.label.renderer(labels[i]);
                textLabel = me.getOrCreateLabel(i, text);
                bbox = textLabel._bbox;
    
                maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
                y = point[1];
                if (adjustEnd && gutterY < bbox.height / 2) {
                    if (i == last && !hasTop) {
                        y = Math.max(y, me.y - me.length + ceil(bbox.height / 2) - insetPadding);
                    }
                    else if (i == 0 && !hasBottom) {
                        y = me.y + gutterY - floor(bbox.height / 2);
                    }
                }
                if (position == 'left') {
                    x = point[0] - bbox.width - me.dashSize - me.label.padding - 2;
                }
                else {
                    x = point[0] + me.dashSize + me.label.padding + 2;
                }
                textLabel.setAttributes(Ext.apply({
                    hidden: false,
                    x: x,
                    y: y
                }, me.label), true);
                
                if (i != 0 && me.intersect(textLabel, prevLabel)) {
                    if (i === last && prevLabelId !== 0) {
    //                    prevLabel.hide(true);
                    } else {
    //                    textLabel.hide(true);
                        continue;
                    }
                }
                prevLabel = textLabel;
                prevLabelId = i;
            }
    
            return maxWidth;
        }
    
    
    });
    Scott

  8. #7
    Sencha User
    Join Date
    Jan 2013
    Posts
    17
    Vote Rating
    1
    Answers
    1
    nexSencha is on a distinguished road

      0  

    Default


    Thanks Scott for your help! Your solution works very well.

  9. #8
    Sencha User
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    9
    Vote Rating
    0
    neilybod is on a distinguished road

      0  

    Default Better and simpler solution...

    Better and simpler solution...


    I had a similar problem in that certain label names were not displaying on my barchart if there were too many bars.
    The simple solution is to add the following param to your chart:

    Code:
    axes: [{
        type: 'category',
        position: 'left',
        fields: 'LastName',
        style: {
            estStepSize: 20  // Play with this value til you get what you like
        },
        type: 'numeric',
        position: 'left',
        fields: 'Quota',
        style: {
            estStepSize: 5  // Play with this value til you get what you like
        }
    }]

  10. #9
    Sencha User
    Join Date
    Jan 2013
    Posts
    17
    Vote Rating
    1
    Answers
    1
    nexSencha is on a distinguished road

      0  

    Default


    Thanks for the tip.

Thread Participants: 2

Tags for this Thread