Positive and Negative stacked column series on the same graph


#1

Hi,

I am trying to create two stacked column series with Positive and negative y values respectively. The x values for both series would be the same. The problem is that when the series get plotted the positve column and negative column dont appear to be aligned vertically even thought the x values are same.

I want something like in the attached image. (url: http://pasteboard.co/jRi4SFa.png)

Column series

Thanks!


#2

Hi nisarg,

Thanks for getting in touch!

To implement this kind of chart you need:

  • 2 X-axes, one for positive data and one for negative data.
  • Separate series for positive and negative data.

To get a chart looking like the image supplied you will need 5 series, 3 for the positive data (blue, yellow & brown) and 2 for the negative data (red & yellow).

When creating these series in SChartDatasource method “seriesAtIndex:”, set the “stackIndex” property on each series to the same value so they stack.

Now implement the SChartDatasource method “xAxisForSeries:” to return the first axis for positive data and the second axis for negative data.

More information on this method can be found HERE.

Make sure both X-axes are added to the chart before loading your data.

Kind regards,
Andrew Polkinghorn


#3

Hi Andrew,

Thanks for the reply.

Shouldn’t it be “yAxisForSeries”? For what I want the X-axis is same for both positive and negative data series. 
So I implemented yAxisForSeriesAtIndex but I am getting a crash. I think I am missing something.

Error : ShinobiCharts: A generic SChartAxis has been created, use a subclass instead
From: SChartAxis at 0x7c183870, axisRange = { 0.000000, 1.000000 }, defaultRange = { 0.000000, 1.000000 }, maxRange = { 0.000000, 1.000000 }

// This is a snippet from viewDidLoad
SChartAxis *xAxis = [[SChartAxis alloc] init];
    xAxis.style.lineColor = [UIColor blackColor];
    xAxis.style.titleStyle.textColor = [UIColor blackColor];

    xAxis.enableGestureZooming = YES;
    xAxis.enableGesturePanning = YES;
    xAxis.style.interSeriesPadding = [NSNumber numberWithDouble:0.5];
    [chartInverse setXAxis:xAxis];
  
    chartInverse.backgroundColor = [UIColor blackColor];
    chartInverse.plotAreaBackgroundColor = [UIColor blackColor];
    chartInverse.gesturePanType = SChartGesturePanTypePanPinch;
    chartInverse.datasource = self;
    SChartAxis *negY = [[SChartAxis alloc] init];
    negY.style.lineColor = [UIColor whiteColor];
    [chartInverse addYAxis:negY];
    SChartAxis *posY = [[SChartAxis alloc] init];
    posY.style.lineColor = [UIColor whiteColor];
    [chartInverse addYAxis:posY];
    [self.view addSubview:chartInverse];

//end of viewDidLoad



-(SChartAxis *)sChart:(ShinobiChart *)chart yAxisForSeriesAtIndex:(NSInteger)index {
    return chart.allYAxes[index];
}

#4

My bad, I do need multiple Xaxis instead of Y. I was able to resolve the issue i mentioned in the above post.

Now I want to hide tick labels from one of the XAxis since I now have same labels appearing twice. How do I do that?

Thanks for all your help!!


#5

Hi nisarg,

You can hide the labels by setting the following options:

    axis.style.majorTickStyle.showLabels = NO;
    axis.style.majorTickStyle.showTicks = NO;

Hope this helps