PDA

View Full Version : insetPadding



alstsmith
22 Aug 2011, 1:23 PM
I've seen insetPadding used in the ExtJs charts examples and assumed that if listed in the items for a line chart it should move the first data point off the chart y axis.
Except it doesn't....:(

Is there a different way to do this.

FWIW I'm trying to use it in a ext.chart.Chart within a new Ext.Panel.

philogb
23 Aug 2011, 10:41 AM
Hi - I'm not sure I understand what you're trying to do, but if you know the max and min bounds for the dataset you're trying to render then you could use the minimum and maximum configuration properties in for the axes.

alstsmith
23 Aug 2011, 10:57 AM
Ideally the first data point would lie off the y-axis itself.

See attached screenshot..

27652

philogb
24 Aug 2011, 2:16 PM
Hi - Thanks for the screenshot. I don't think you can put the marker on top of the axis, but you should be able to change the style and/or position of the first marker. It could be hidden, or have some offset for the left axis.

Would that help?

alstsmith
24 Aug 2011, 2:41 PM
hey philogb, thanks for your reply,

offsetting the marker away from the left axis is exactly what I want. is there a simple way to do this?

philogb
29 Aug 2011, 10:44 AM
Hi - You could add a renderer to the series element and add an offset to the first marker in the x direction:



{ type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'ipad',
title: 'iPad',
//add renderer:
renderer: function(sprite, storeItem, attribute, index) {
if (index === 0) {
var translate = attribute.translate;
if (translate) {
translate.x = +translate.x + 10; //add offset
}
}
return attribute;
},
markerConfig: {
type: 'circle',
radius: 3
}
}

alstsmith
29 Aug 2011, 1:47 PM
Thanks for your reply. That code works in that it offsets the first point, but the line still starts on the y-axis and that shifted point looks "off" compared to the rest of the chart.
Ideally i'm looking for a solution that translates the entire series (and the corresponding x-axis markers) to the right slightly to float it off the y-axis line.

Aesthetics more than function, I know, but especially when used on a mobile device it makes the touch target for the first data point marker much clearer.

philogb
6 Sep 2011, 11:15 AM
Thanks for you answer. Remember that there are other possible solutions too, like hiding the marker, etc. I will create a ticket for this and will let you know when we have a better solution.