PDA

View Full Version : EXTJS4.1.1A: Reverse Y-Axis on Charts

hallikpapa
7 Feb 2013, 4:42 PM
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
8 Feb 2013, 7:28 AM
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);
}
for (j = 0, lnsh = shadows.length; j < lnsh; j++) {
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
8 Feb 2013, 7:46 PM
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);