Search code examples
c#iosxamarinshinobi

Shinobi Charts in Xamarin multiple, multiple series with 2 y-axis

I have an issue with turned a chart with 2 columnseries and 1 y-axis into a chart with the same columnseries and 2 y-axis.

Top you see the Chart with 1 y-axis, looks fines:

issue example

On the bottom you see what happens with another y-axis is added, the columns are overlapping instead of being side by side on the x-axis tick mark. is it possible to override the method that decides whether the columns should be next to each other instead of overlapping? If so, what do I have to override?

Your help will be much appreciated.

Further on the case:

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

Solution

  • 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.

    Alison

    EDIT: to answer your comment about not knowing the categories in advance:

    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.