1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Answers
    6
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default Answered: EXTJS4.1.1A: Reverse Y-Axis on Charts

    Answered: EXTJS4.1.1A: Reverse Y-Axis on Charts


    in extjsv3, you used to be able to reverse=true on the Y-Axis. This seems to have gone missing in v4.X.

    I would like to have the smallest numbers at the top of my chart, and largest numbers at the bottom of the axis.

    Is there another way to do this?

    As a test, I did an override on Ext.chart.axis.Axis drawVeritcalLabels() function, and reversed, the inflections array before it started it's loop. This achieved what I wanted with the axis, but now I need to move the data points.

    Ideas?

    Code:
            inflections = inflections.reverse();
            for (i = 0; i < ln; i++) {
                point = inflections[i];
            ...
            ...

  2. OK so I did an override of the drawSeries function in the line chart, and I changed the way the y is calculated. It seems to work. All for better ideas though.

    Code:
    y = ((bbox.y + bbox.height) - (maxY - yValue) * yScale).toFixed(2);

  3. #2
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Answers
    6
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    I am guessing this part of the drawSeries() method is where the magic happens for plotting points on a line chart?

    Ideas on how to reverse this so the chart is drawn inverted (small values at top, larger at the bottom).

    I bolded the two parts I thought I needed to focus on.

    Code:
    for (i = 0; i < ln; i++) {
                xValue = xValues[i];
                yValue = yValues[i];
                if (yValue === false) {
                    if (path.length == 1) {
                        path = [];
                    }
                    onbreak = true;
                    me.items.push(false);
                    continue;
                } else {
                    x = (bbox.x + (xValue - minX) * xScale).toFixed(2);
                    y = ((bbox.y + bbox.height) - (yValue - minY) * yScale).toFixed(2);
                    if (onbreak) {
                        onbreak = false;
                        path.push('M');
                    }
                    path = path.concat([x, y]);
                }
                if ((typeof firstY == 'undefined') && (typeof y != 'undefined')) {
                    firstY = y;
                    firstX = x;
                }
                // If this is the first line, create a dummypath to animate in from.
                if (!me.line || chart.resizing) {
                    dummyPath = dummyPath.concat([x, bbox.y + bbox.height / 2]);
                }
    
                // When resizing, reset before animating
                if (chart.animate && chart.resizing && me.line) {
                    me.line.setAttributes({
                        path: dummyPath,
                        opacity: lineOpacity
                    }, true);
                    if (me.fillPath) {
                        me.fillPath.setAttributes({
                            path: dummyPath,
                            opacity: fillOpacity
                        }, true);
                    }
                    if (me.line.shadows) {
                        shadows = me.line.shadows;
                        for (j = 0, lnsh = shadows.length; j < lnsh; j++) {
                            shadow = shadows[j];
                            shadow.setAttributes({
                                path: dummyPath
                            }, true);
                        }
                    }
                }
                if (showMarkers) {
                    marker = markerGroup.getAt(count++);
                    if (!marker) {
                        marker = Ext.chart.Shape[type](surface, Ext.apply({
                            group: [group, markerGroup],
                            x: 0, y: 0,
                            translate: {
                                x: +(prevX || x),
                                y: prevY || (bbox.y + bbox.height / 2)
                            },
                            value: '"' + xValue + ', ' + yValue + '"',
                            zIndex: 4000
                        }, endMarkerStyle));
                        marker._to = {
                            translate: {
                                x: +x,
                                y: +y
                            }
                        };
                    } else {
                        marker.setAttributes({
                            value: '"' + xValue + ', ' + yValue + '"',
                            x: 0, y: 0,
                            hidden: false
                        }, true);
                        marker._to = {
                            translate: {
                                x: +x, 
                                y: +y
                            }
                        };
                    }
                }
                me.items.push({
                    series: me,
                    value: [xValue, yValue],
                    point: [x, y],
                    sprite: marker,
                    storeItem: store.getAt(storeIndices[i])
                });
                prevX = x;
                prevY = y;
            }

  4. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Answers
    6
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    OK so I did an override of the drawSeries function in the line chart, and I changed the way the y is calculated. It seems to work. All for better ideas though.

    Code:
    y = ((bbox.y + bbox.height) - (maxY - yValue) * yScale).toFixed(2);