Parallel line for min/max values

[adrian-schnell]

I'd like to have an interface like shown on this mockup:

But I really have difficulties to find the correct y values for my min and max point.
Any suggestions?

[Sam-Spencer]

The calculateMinimumPointValue and calculateMaximumPointValue methods should provide the correct maximum and minimum values of the graph.

[adrian-schnell]

I already tried that.. but it didn't work.
I tried the following:

UIView *maxLine = [[UIView alloc] initWithFrame:CGRectMake(0,[self calculateMaximumPointValue],self.mygraph.view.frame.size.width,3)];
[self.mygraph addSubview:maxLine];

[Boris-Em]

Hi @rootilein !
This is not working because calculateMaximumValue doesn't return the y position of the biggest dot, but it's real value. For example, if your biggest point has a value of 1000, it doesn't mean that its y-position will be 1000.

Here is something that works for me:

- (void)lineGraphDidFinishLoading:(BEMSimpleLineGraphView *)graph {
float max = [[self.myGraph calculateMaximumPointValue] floatValue];
float min = [[self.myGraph calculateMinimumPointValue] floatValue];

float maxYPosition = (self.myGraph.frame.size.height - 80) - ((max - min) / ((max - min) / (self.myGraph.frame.size.height - 80))) + 30;

UIView *maxLine = [[UIView alloc] initWithFrame:CGRectMake(0, maxYPosition, self.myGraph.frame.size.width, 3)];
maxLine.backgroundColor = [UIColor whiteColor];
[self.myGraph addSubview:maxLine];
}

Let me know if it works for you too.

[adrian-schnell]

Hello @Boris-Em,
thanks for your great answer. That worked nearly perfect for me.

On this graph it's perfect:

But on a second one, it's a little but too low:

I tried to fix that and changed the "+ 30" at the end to "+ 25".

Then I've two more questions...

• How to change that calculations, to mark the minLine?
• On the first image, the background under the graph has some errors. What can be the problem here? I've about 8 float values here - and before drawing the graph I convert them to int. But it's the same algorithm than on the 2nd graph.. I don't understand this problem.

[Boris-Em]

I'm glad I could help you @rootilein !
You had to adjust the line on your second graph because of how the bezier curves are currently drawn. Another solution would be to set the propoerty enableBezierCurve to NO. The dot would be directly connected without curves, but you wouldn't have this issue. Your solution works too.

The calculation for the minLine should look like something like that:

    - (void)lineGraphDidFinishLoading:(BEMSimpleLineGraphView *)graph {
    float max = [[self.myGraph calculateMaximumPointValue] floatValue];
    float min = [[self.myGraph calculateMinimumPointValue] floatValue];

    float minYPosition = (self.myGraph.frame.size.height - 80) - ((min - min) / ((max - min) / (self.myGraph.frame.size.height - 80))) + 30;

    UIView *minLine = [[UIView alloc] initWithFrame:CGRectMake(0, minYPosition , self.myGraph.frame.size.width, 3)];
     minLine .backgroundColor = [UIColor whiteColor];
    [self.myGraph addSubview:minLine ];
    }

The issue with the background on your first image seems to me like an issue with the values that are rounded up. I thought that I fixed that a while ago, but apparently not really.
Good catch! I will try to repro it and fix it soon.

Let me know if you have any other questions.
Thanks you!

[adrian-schnell]

Thanks again for your fast answer.
I tried to add this snippet.. but the result of that calculation is always 200 for me.

my code looks like: http://pastebin.com/E5Fe0Ck8 (it's too long for here)

According to the background issue:
I found out, that the problem disappears, when I only add 8 instead of 9 items to my dataArray. And it's always gone, if enableBezierCurve is set to NO.

[Boris-Em]

Hey @rootilein
Sorry I didn't get time to get back to you earlier.
It seems normal to me that the result of the calculation is always the same, as long as you don't change the size of the frame of your graph.
Does the line shows up at the right place?

These are good information for the background issue. It should help me figure out what the problem is. I will take a look at all of this tonight.
Thank you for posting your code too, it should help me as well.

[adrian-schnell]

Thank you.
The line is at the bottom of my chart, but not at the position of the lowest y value.
Maybe the problem is on of these values I changed?

#define padding 200
#define circleSize 10
#define labelXaxisOffset 33

[Boris-Em]

It might be the padding, if you changed it in the file 'BEMSimpleLineGraphView.m'.
If that's the case, I would try to replace this line:

      float minYPosition = (self.myGraph.frame.size.height - 200) - ((min - min) / ((max - min) / (self.myGraph.frame.size.height - 200))) + 30;

Let me know if it works or not.

[adrian-schnell]

d'oh... thank you. my mistake... and I wondered, why you're substracting "80" :D :D

now it's working quite nice! Thank you!!

[Boris-Em]

No problem! I'm glad I could help. I will investigate on the issue with the background now. Thanks for everything @rootilein.

[Boris-Em]

Hi @rootilein,
Could you confirm to me that the issue with the background is fixed with the new commit (0e91c33) that I just pushed on the master branch?
It's not available through CocoaPods yet.
Thanks you!

[adrian-schnell]

Hello @Boris-Em,
yes I can confirm that this commit fixes this issue.

[Boris-Em]

Thank you @rootilein.
Closed as fixed with commit 0e91c33.