Time axis cut off (1)


#1

this is on ios running

i have a graph that can 2 series (ph and temp) or one or the other. When I view both , the temp axis looks fine.

https://dl.dropboxusercontent.com/u/45836281/image1.png

however when you view the ph axis only, the last label on the time is cut off

https://dl.dropboxusercontent.com/u/45836281/image2.png

and when displaying temp only, the time number as well as the label is cut off.

https://dl.dropboxusercontent.com/u/45836281/image3.png

is there a way to pad/move the label(s) in the 2nd and 3rd cases such that the stuff in the red boxes looks not as cut off?


#2

Hi foobar!

I think the reason you get no clipping in the first image (when showing both series) is because of the extra space provided by having a y-axis on both the left and right sides of your chart.

You can provide extra space, in data terms, in the plot area using the properties rangePaddingLow/High. This should allow you to provide enough space on both the right and left sides so that your axis tick labels are not clipped.

Let me know how you get on with this :slight_smile:

Ryan


#3

thanks for responding. i added various rangePaddingLow/High to my time axis but it doesn’t seem to have any changes. 


#4

thanks for responding. i added various rangePaddingLow/High to my time axis but it doesn’t seem to have any changes. 


#5

Could I see an example of how you added range padding to your x axes? A picture of the result would be helpful too.

Jan


#6

Hi Jan, I have pictures in the first post. Let me know if you need more than that. Below is the code how setting up the x axis.

    r = [[SChartNumberRangealloc] initWithMinimum:[NSNumbernumberWithFloat:-10.0] andMaximum:[NSNumbernumberWithFloat:110.0]];

    self.tempAxis = [[SChartNumberAxisalloc] initWithRange:r];

    self.tempAxis.rangePaddingLow = @(10.0);

    self.tempAxis.rangePaddingHigh = @(10.0);

    self.tempAxis.tickLabelClippingModeHigh = SChartTickLabelClippingModeTicksPersist;

    self.tempAxis.tickLabelClippingModeLow = SChartTickLabelClippingModeTicksPersist;

    self.tempAxis.axisPosition = SChartAxisPositionReverse;

    self.tempAxis.enableGesturePanning = YES;

    self.tempAxis.enableGestureZooming = YES;

    self.tempAxis.enableMomentumPanning = YES;

    self.tempAxis.enableMomentumZooming = YES;

    self.tempAxis.allowPanningOutOfDefaultRange = NO;

    self.tempAxis.allowPanningOutOfMaxRange = NO;

    self.tempAxis.style.titleStyle.position = SChartTitlePositionBottomOrLeft;

    self.tempAxis.style.majorGridLineStyle.showMajorGridLines = NO;

    [self.chartaddYAxis:self.tempAxis];


#7

Hi Foobar,

You’ve got a couple of options, you could use rangePaddingLow/High on the X-axis to increase the range of your axis, causing these labels to render more towards the centre. However, since the range of your X axis can vary qute a bit, I don’t really see that as a realistic option as you’d have to work out how much padding would be sufficient.

The easiest option for you would be to alter your X-axis’ clipping mode so that these clipped labels don’t get rendered. Use any one of the following options on your x-axis’ tickLabelClippingModeHigh and tickLabelClippingModeLow properties.

// Your clipped labels will disappear but the ticks will still be visible.
SChartTickLabelClippingModeTicksPersist
// Clipped labels and ticks will disappear.
SChartTickLabelClippingModeNeitherPersist

The other option you’ve got if you don’t want your labels to disappear is to turn off clipping on your chart. This will cause the labels to spill outside of the chart’s frame. You’ll want to make sure that you’ve left a little bit of room around your chart so that these labels don’t overlap with whatever else you might have on your view controller’s view.

self.chart.clipsToBounds = NO;

// You'll need to import SChartCanvas.h
self.chart.canvas.clipsToBounds = NO;

Thanks,
Jan


#8

thanks!