Not able to create Y-Axis labels or background grid

[pkasson]

Is it possible to add a Y-Axis that shows X-Axis values and a background grid ?

[terryworona]

It's not currently possible, but it's a feature I'd like to add sometime in the future.

If you can't wait, you can simply create a subview representing the x,y axis visuals and insert it below a transparent chart view.

[pkasson]

That's what I was thinking. I have not done a lot of drawing like that, but getting started.
I abandoned CorePlot as it was too complicated and inflexible and didn't look as good as your graphs ;)
But, it did, like many, have axis and grids.
So, I think it's probably not too hard to do the grid, will try and can push to Git for your review if you like (if it works ;)

Date: Tue, 18 Mar 2014 09:39:51 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [JBChartView] Not able to create Y-Axis labels or background grid (#20)

It's not currently possible, but it's a feature I'd like to add sometime in the future.

If you can't wait, you can simply create a subview representing the x,y axis visuals and insert it below a transparent chart view.

—
Reply to this email directly or view it on GitHub.

[pkasson]

So I was able to get a simple grid in a UIView, but when I try to add it to the chart, I dont see it.

I tried adding it as a subview to the selection view, then inserting it ... and so on. So which is the chart view, that is transparent, or does it need to be changed to be transparent.

// create the grid
UIView *gridView = [[UIView alloc] init];
[self drawGraphGrid :[gridView frame]];

[self.selectionView insertSubview:gridView belowSubview:self.selectionView];

Clearly , not correct.

On Mar 18, 2014, at 12:39 PM, terryworona [email protected] wrote:

It's not currently possible, but it's a feature I'd like to add sometime in the future.

If you can't wait, you can simply create a subview representing the x,y axis visuals and insert it below a transparent chart view.

—
Reply to this email directly or view it on GitHub.

[terryworona]

Hard to tell what's wrong, but it should be as easy as:

JBLineChartView *lineChartView = [[JBLineChartView alloc] initWithFrame:CGRectMake( .. )];
// Set delegate & datasource
lineChartView.backgroundColor = [UIColor clearColor];
[self.view addSubview:lineChartView];

UIView *gridView = [[UIView alloc] initWithFrame:lineChartView.bounds];
gridView.backgroundColor = [UIColor blackColor];
[lineChartView insertSubview:gridView atIndex:0];

[pkasson]

Thanks for the sample.

Not having done too much of this, I was not sure how to proceed and with your help, it worked - thanks !

On Mar 19, 2014, at 4:24 PM, terryworona [email protected] wrote:

Hard to tell what's wrong, but it should be as easy as:

JBLineChartView *lineChartView = [[JBLineChartView alloc] initWithFrame:CGRectMake( .. )];
// Set delegate & datasource
lineChartView.backgroundColor = [UIColor clearColor];
[self.view addSubview:lineChartView];

UIView *gridView = [[UIView alloc] initWithFrame:lineChartView.bounds];
gridView.backgroundColor = [UIColor blackColor];
[lineChartView insertSubview:gridView atIndex:0];

—
Reply to this email directly or view it on GitHub.

[briomusic]

I am trying to do the same thing, but have a hard time aligning my grid and the jblinechart. A value of zero doesn't appear to result on a node at the bottom of the linechart, due to the following constant:
CGFloat static const kJBLineChartLinesViewEdgePadding = 10.0;
It would be great to be able to set this from the outside!

[pkasson]

Having gotten just a simple background graph, that was my first hurdle.

And yes, I noticed that the scale is misleading. From what I have observed, the scale will vary by the volume and highs (and lows ?) of the points. Thus, where a bg grid might work if you can determine the max/min points and draw the graph accordingly, it will need to understand those highs and lows for new graphs.

In my case, the graph can be drawn using different metrics, some that have a domain of maybe 0 to 20, while others may have a domain of 70 to 350, etc. Each of those will draw a different scale and ZERO for each of these moves accordingly.

I have already captured the min/max of the graph but need to add their relative position on they Y axis in order to accurately draw the grid.

I was going to post this back to the author once done as he indicated he was going to do this in the future. If you are interested, we could collaborate on it together !

[terryworona]

@briomusic yes there is 10px of vertical padding within the line charts. This is just an artifact of old code that I didn't catch; it was just never caught because everything is normalized anyways.

I will likely remove the padding altogether, but in the meantime, you can add padding to your background view as follows:

self.backgroundView.frame = CGRectInset(self.backgroundView.frame, 0, 10);

[terryworona]

@briomusic, I remember why I added 10px of padding; to account for the various line sizes.

For example, if we have a 10px wide line, there will be 5px of the line that is cut off on either end of the chart as it extends the bounds of the view.

Either we turn off clipping & set the padding to 0, or we add padding equal to the thickest line's width * 0.5

[terryworona]

@briomusic I added dynamic padding in v2.1.2 commit b626246

The automatic padding is equal to the largest line's width * 0.5.

Hope this helps.

[cdelrosso]

I really like the library, but I need the labels on the X and Y axes. Are they coming any time soon?
Thanks.

[terryworona]

@cdelrosso, support for axis labels likely won't be supported for some time. It's recommended you create your own subviews for axis labels and add them to the chart.

[simonbromberg]

Trying to add y-axis labels + lines. Having a lot of trouble lining them up with the chart. Tried using the normalizedHeightForRawHeight and the availableHeight methods to figure out where to put the axis lines, but they're not coming out where I expect them to be, especially for the first and last point in a line chart. Has anyone had any success with implementing and lining up a y-axis on a JBLineChartView? Any tips would be appreciated.

[terryworona]

@simonbromberg take a peak at the - (CGFloat)padding function within the JBLineChartView implementation. It adds vertical padding to a line chart based on the max(dot radius, line width). That is likely your issue.

[simonbromberg]

Tried factoring the chartView's padding into my calculation of vertical positions, but it's still not lined up. Any suggestions for how to calculate the vertical positions.

Without the padding I have (for any raw axis height)

CGFloat verticalPosition = chart.availableHeight - [self.chartView normalizedHeightForRawHeight:rawAxisHeight];

Simply adding/subtracting the padding doesn't fix it. Trying to figure out how the padding is used to adjust the final positions of the points is a bit of a hassle. Perhaps there could be a method to help line up axes with the charts?

[simonbromberg]

I got the lines aligned when I add 3 times the padding to that line above... But for the first and last points, I had to subtract and add 3 pts respectively to get them aligned. Also doesn't work if I change my dot sizes at all.

Not sure why 3 * padding gets it aligned in the middle, or why I have to adjust the first and last ones , although this is related to issue #94

[monish152]

i have been able to create a line chart with x axis labels. I want to create y axis labels like attached screenshot. can anyone please help.

[terryworona]

There is still no functionality in the library for a y-axis. As originally stated, you can simply create a subview representing the y axis visuals and insert it below a transparent chart view.