Coloring individual columns in ColumnSeries


#1

Are there any simple Column style examples to look at?

I’m just trying to make a simple Column Chart with two columns, each colored with a different AreaColor.
I took the BarChart example, changed it to a SChartColumnSeries. I changed the AreaData.h file to add data in this way:

[_datasetObject:[NSNumbernumberWithFloat:1.0f] forKey:@“Oranges”];

I can easily assign the Series any color I want, but that changes the color of both columns. I would like to make each column a different color. When I change numberOfSeriesInSChart to 2, it doubles the size of the bar chart (Oranges graphs to 2 using the example above). What’s the easiest way assign colors to the individual Columns?


#2

Ok. This is my workaround, which might help you figure out what I’m doing wrong.

I set my NumberOfSeriesInSChart to 2, and then made a conditional statement to only place data points on the appropriate chart (otherwise the numbers double). I know I’m making an error somewhere in my Datasource. Is there a better way to set up my dataseries if I want to set each column to a different color?  

(id<SChartData>)sChart:(ShinobiChart *)chart dataPointAtIndex:(int)dataIndex forSeriesAtIndex:(int)seriesIndex {
SChartDataPoint *dp = [SChartDataPointnew];
    if (seriesIndex == 1)
    {
        dp.xValue = [[_vrdDatapositionCategory] objectAtIndex:1];
        dp.yValue = [[_vrdDatadata] objectForKey:dp.xValue];
    } else {
        dp.xValue = [[_vrdDatapositionCategory] objectAtIndex:0];
        dp.yValue = [[_vrdDatadata] objectForKey:dp.xValue]; }

#3

Hi Svaha,

Currently, there is no way to style bars in the same series individually. However there is a recommended work around which requires a bit more work.

Chart series read properties relating to their style from their relevant SChartSeriesStyle subclass. To change the color of an entire bar series you can do the following: myBarSeries.style.areaColor = myNewColor; ShinobiCharts will color each series on a chart the same color.

However that is the only way to change the color of a bar and as such the only way to get different bar colors on your chart is to put them in different series. For example if you wanted a bar chart with 5 bars with all different colors, then you would have five different data series with a single data point in each, and you would set their color as explained above.

Kind Regards

Daniel Allsop


#4

Hi Daniel,

I am trying to implement your solution of a single data point per series- for example I have 5 series and 1 data point per series. I have changed the colour of each series, but when I plot the values on a barchart there is space between the columns (series), see this image.

numberOfSeriesInSChart returns 5

numberOfDataPointsForSeriesAtIndex returns 1 

Any ideas as to where the problem is?

Thanks

Andrew Sinclair


#5

Hi Daniel,

I have answered my own question, I was not setting the stackIndex property of the series,

Regards,

Andy


#6

Hi Andrew,

I am glad you have found a solution to your problem.

Thanks for sharing your solution on the forum for others to see.

Kind Regards,

Daniel Allsop


#7

Hi Daniel,

I am now having problems detecting which series the user has selected (when they tap on a column).

I am using the delegate:

-(void)sChart:(ShinobiChart *)chart toggledSelectionForSeries:(SChartSeries *)series nearPoint:(SChartDataPoint *)dataPoint atPixelCoordinate:(CGPoint)pixelPoint

However because each series has a single point, the datapoint.index is always 1.

I saw a post on StackOverflow that mentions subclassing SChartColumnSeries and override the offsetOfStackInChart method; however the post is quite old and offsetOfStackInChart does not appear to be supported any more.

Any ideas how I can tell which series has been selected?

Regards,

Andy


#8

Hi Andy,

You can use the index of the series selected which can be accessed by calling “indexOfObject:” on the “series” array property on your chart.

Here is some example code:

-(void)sChart:(ShinobiChart *)chart toggledSelectionForSeries:(SChartSeries *)series nearPoint:(SChartDataPoint *)dataPoint atPixelCoordinate:(CGPoint)pixelPoint {
    
    float seriesIndex = [chart.series indexOfObject:series];
    ...
}

Let me know how you get on. 

Kind Regards,
Andrew Polkinghorn


#9

Here is how to set stackIndex FYI

colSeries.stackIndex = @0;