2 Column Series, with 2 Y-axis


#1

I wish to allow the use of 2 y-axis to users of the app, however when 2 columns are created and 2 y-axis are made for them, they overlap making it impossible to see both columns.

The desired result I would like to make is that they stand next to each other like in the top image.

Or if that is not possible, then maybe have 1 of the column series have a smaller column width so it can sit in front of the other column, while still looking decent and be visible.

If there is some variable I have missed that allows me to do this I would very much appreciate a point in the right direction. Thanks for your time.


#2

Hi Swodah,

I’ve just answered this over on StackOverflow but I’ll repeat it here too.

In the first image, as you were using the same axes for both series, the chart automatically groups the two column series together, so they display side-by-side. In this case it would be possible to use the groupIndex property on the series to override the grouping so they would overlap instead.

However, series can only be grouped together if they are on the same axes, so in the second image, as the series are using different y-axes, they cannot be grouped (and the groupIndex property will not affect this behaviour).

To work around this, I would suggest using an SChartDateTimeAxis for the x-axis, and adjusting the x-values of the series and the barColumnSpacing property on the series’ style to position the columns where you want them.

Kind regards,

Alison


#3

I’ve also asked this on stack overflow, but “As in add more x values on datetime to make them stand next to each other even though they have the same x value? Also the reason I use category axis, is because the chart can take many different categories, as I won’t know what categories and values will come until I receive the data.” Secondly, if grouping is going to be problematic with 2 y-axes, is it then possible to set the column width of a series(ie 75% of what the auto sizing makes it or something like that), in order to have them overlap but have the front one be smaller so both are visible?


#4

Here’s a copy of my edited post from Stack Overflow:


As it isn’t possible to group series that have different axes, then the only way to achieve the chart you want is to manipulate the data.

In this case I would suggest using a SChartNumberAxis and setting the x-values to numbers that will space out the columns as you want them, e.g.:

let salesData: [[Double : Double]] = [
    [0.5 : 5.65, 3.5 : 12.6, 6.5 : 8.4],
    [1.5 : 4.35, 4.5 : 13.2, 7.5 : 4.6, 10.5 : 0.6]
]

Then you can use the sChart:alterTickMark:beforeAddingToAxis: method of SChartDelegate to alter the tick label text, e.g. if the tick mark’s value was 1 you could set the label text to ‘2017’ (don’t forget to resize the label to fit); if it were 4 you could set it to ‘2018’; if it’s a number you don’t want to show you could set it to empty.

You may then wish to use the barColumnSpacing property on the series’ style to fix the width of the columns.

I realise that this is a slightly convoluted solution, so I’m wondering if you could tell us a bit more about your use case? It’s not something we’ve come across before. Multiple y-axes would normally be used to display data that is not comparable in size (e.g. temperature and rainfall), so using two column series in this way seems to be unusual.


#5

Yes the idea is to see multiple trends who might be in different sizes, ie performance of salesmen next to each other or the sales turnover in different sized markets, to see the relative growth of the 2, even though their size may be very different. An example would be one salesmen(1) who sells 1/10 of another(2) in 2017, then for the next year we can see salesman 1 increased his sales by 15%, while salesman 2 only increased his sales by 2%, as such we would be able to see which salesman has the best growth, even though one might have accumulated enough customers to sell 10 times as much and we can reward a salesmen who grew his customers by a value of 15% a bit more.

The implementation uses data sent from pc software, which is displayed in the (currently only) IOS app and in a different web solution. The data can vary, usually includes a y-axis with numbers and an x-axis with categories like sales region or months of a year. Every data group is a series we add to the chart, and we give our users the choice to choose first or second y-axes per series.
this column problem is a wish, but the data can be shown with a column and a line series, the designers just like columns a bit more, when it comes to comparing the same statistic.

An alternative solution might be to set individual column series with so that you can still see them while they overlap, but I could not find such a variable, and as far as I could read all column width is controlled by the spacing, amount of columns, amount of tickmarks and size of chart


#6

Hi Swodah,

Thanks for the explanation.

I think if I were to display data as you’ve described I would normalise the data before displaying it: it sounds like you’re interested in the % change in sales rather than the actual values, so have you considered displaying the % change (based on the first year or even the previous year) rather than the absolute values? You could then use a single y-axis and the series would be grouped and display side-by-side.

If you definitely need to use multiple axes, you can overlap the columns if you use the barColumnSpacing property of the series’ style and set it to be bigger than the gap between the series. But you would still need to do as I suggested above and use a number axis rather than a category axis if you need to adjust the position of the columns.

Alison


#7

The thing is we still want the sales to be displayed not just a percentage, as high achievers should still get credit for maintaining a lot of customer/turnover and percentage doesn’t show that well if we get a new person who came in the last month in the first first gaining only 3 customers then going to 10 that would skew the growth columns too much considering some might just barely maintain a few percentage growth and others would even lose customers. As such % growth is better used in comparison with a single salesman or the entire company. However I will for now look into whether the barColumnSpacing helps.