EXTJS4.1.1A: Reverse Y-Axis on Charts

[hallikpapa]

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?

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

[hallikpapa]

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.

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;
        }

[hallikpapa]

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.

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