Android - set other color for each data point in BarSeries (shinobicharts)

Question

I trying use shinobicharts to design like as this chart:

http://www.upsieutoc.com/images/2014/04/19/barseries.png

BarSeries

I used BarSeries, and i having a few problem following:

• i can't found function to set data on each DataPoint (20, 25, 30).

• i want set other color for each data point like in the image above. (red, green, purple)

• right align for label. (France, Malaysia, Spain).

And this code:

 ChartFragment chartFragment = (ChartFragment) getFragmentManager().findFragmentById(R.id.chart);
  ShinobiChart shinobiChart = chartFragment.getShinobiChart();

   NumberAxis xAxis = new NumberAxis();
    xAxis.setPosition(Position.REVERSE);
    shinobiChart.addXAxis(xAxis);
    CategoryAxis yAxis = new CategoryAxis();
    shinobiChart.addYAxis(yAxis);
    BarSeries series = new BarSeries();
    series.setTitle("Country");
    DataAdapter<Integer, String> adapter = new SimpleDataAdapter<Integer, String>(); 

     adapter.add(new DataPoint<Integer, String>(20, "Spain"));
     adapter.add(new DataPoint<Integer, String>(25, "Malaysia"));
     adapter.add(new DataPoint<Integer, String>(30, "France"));

    series.setDataAdapter(adapter);
    shinobiChart.addSeries(series);

Please help me!

Answer 1

Apparently you can't.

The solution is to have 3 series with one value each, rather than one series with 3 values. E.g.:

ChartFragment chartFragment = (ChartFragment) getFragmentManager().findFragmentById(R.id.chart);
  ShinobiChart shinobiChart = chartFragment.getShinobiChart();
   NumberAxis xAxis = new NumberAxis();
    xAxis.setPosition(Position.REVERSE);
    shinobiChart.addXAxis(xAxis);
    CategoryAxis yAxis = new CategoryAxis();
    shinobiChart.addYAxis(yAxis);

    BarSeries series1 = new BarSeries();
    series1.setTitle("Country");
    BarSeriesStyle bss1 = series1.getStyle();
    bss1.setAreaColor(Color.RED);
    DataAdapter<Integer, String> adapter = new SimpleDataAdapter<Integer, String>(); 
    adapter.add(new DataPoint<Integer, String>(20, "Spain"));
    series1.setDataAdapter(adapter);
    shinobiChart.addSeries(series1);

    BarSeries series2 = new BarSeries();
    series2.setTitle("Country");
    BarSeriesStyle bss2 = series2.getStyle();
    bss2.setAreaColor(Color.GREEN);
    DataAdapter<Integer, String> adapter = new SimpleDataAdapter<Integer, String>(); 
    adapter.add(new DataPoint<Integer, String>(25, "Malaysia"));
    series2.setDataAdapter(adapter);
    shinobiChart.addSeries(series2);

    BarSeries series3 = new BarSeries();
    series3.setTitle("Country");
    BarSeriesStyle bs3 = series3.getStyle();
    bss3.setAreaColor(Color.BLUE);
    DataAdapter<Integer, String> adapter = new SimpleDataAdapter<Integer, String>(); 
    adapter.add(new DataPoint<Integer, String>(30, "France"));
    series3.setDataAdapter(adapter);
    shinobiChart.addSeries(series3);

Answer 2

I may be able to offer a partial answer for point 2 of your question: "i want set other color for each data point like in the image above. (red, green, purple)"

Have you tried subclassing SChartBarSeries? If not, try this:

#pragma mark - Custom Styling of Bars

@interface customBarSeries:SChartBarSeries

@end

@implementation customBarSeries

- (SChartBarSeriesStyle *)styleForPoint:(id<SChartData>)point {

    SChartBarSeriesStyle *newStyle = [super styleForPoint:point];

    int country = [[point sChartXValue] intValue];  

    // datapoint specific customization:
    switch (country) {
        case COUNTRY_FRANCE:
            newStyle.areaColor = [UIColor redColor];
            break;
        case COUNTRY_MALAYSIA:
            newStyle.areaColor = [UIColor greenColor];
            break;
        case COUNTRY_SPAIN:
            newStyle.areaColor = [UIColor purpleColor];
            break;
    }
    return newStyle;
}

@end



// And in you chart's "sChart: seriesAtIndex:" method, use your custom bars instead of the shinobi default:

-(SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(NSInteger)index {
    switch (index) {
        case COUNTRY_BARS_SERIE_INDEX:
        {
// Instead of this:            SChartBarSeries *barSeries = [SChartBarSeries new];
            customBarSeries *barSeries = [customBarSeries new];   // <-- Here you use your customized sub-class
            barSeries.title = @"Countries";

            // Style things that are common to all data points in the serie
            barSeries.style.dataPointLabelStyle.displayValues = SChartDataPointLabelDisplayValuesX;
            barSeries.style.dataPointLabelStyle.showLabels = YES;  // <-- You may need this as well

            return barSeries;
            break;
        }           
   }
}

No idea if the label parts of this works or where would the labels be place. I just stumbled upon the label property of the dataPointStyle when writing this example so you'll have to play with it see what happens.

As for the names of the countries on the Y axis, you have to customise the Y axis for that, it doesn't come with the series.

Hope that helps!