Multi Color Bar Chart

[Richard]

Hi --

 I would like to have a bar chart with a single series use multiple colors as shown here:

 http://docs.telerik.com/devtools/android/controls/chart/chart-palettes

The example code appears to have a bug in it as well. The first line references CHART 

ChartPalette customPalette = chart.getPalette().clone();

 but the last line references CHARTVIEW. 

chartView.setPalette(customPalette);

 Are they supposed to be different?

 

Thanks

 

Rich

[Richard]

Additionally, if I change the code so it references the same variable name (as I think it should) and then try to use the code I get a "NoData" display on my device.

Rich

[Victor]

Hi Richard,

Thanks for the question.
I have fixed the reference, it should be simply chart, like the reference above. They are indeed the same reference. The updated help will be live shortly.

Your chart displays no data probably because you have not populated it with data yet. Did you see this help article? You can simply replace LineSeries with BarSeries to get bars displayed instead of a line.

Please write again if you need further assistance.

Regards,
Victor
Telerik

 

 

[Richard]

HI --

I was able to get the data to appear. I had a bug somewhere else in my code that was causing the data to go missing.

Can you explain how to make a multi-colored bar chart as shown in an image on your example page that I linked to above?

 

Thanks

 

Rich

 

[Victor]

Hi Richard,

Currently, to achieve this you can take two approaches. One is to have a different BarSeries for every data point, however you will also need to create data sources for each series and each data source will contain only one data point.

While this is doable I strongly recommend second approach which is to override BarPointRenderer and draw the bars manually with the given colors.
For example:

public class CustomBarRenderer extends BarPointRenderer {
 int[] colors;
 public CustomBarRenderer(BarSeries series, int[] colors) {
 super(series);
 this.colors = colors;
 }
 @Override
 protected void renderPointCore(Canvas canvas, DataPoint point) {
 RadRect layoutSlot = point.getLayoutSlot();
 if(layoutSlot.getHeight() == 0 || layoutSlot.getWidth() == 0) {
 return;
 }
 BarSeries series = this.getSeries();
 int colorIndex = point.collectionIndex() % colors.length;
 Paint strokePaint = new Paint();
 strokePaint.setStyle(Paint.Style.STROKE);
 strokePaint.setColor(colors[colorIndex]);
 Paint fillPaint = new Paint();
 fillPaint.setColor(colors[colorIndex]);
 float strokeWidth = this.getSeries().getStrokeWidth();
 strokePaint.setStrokeWidth(strokeWidth);
 RectF pointRect = Util.convertToRectF(layoutSlot);
 strokeWidth /= 2.0f;
 pointRect.left += strokeWidth;
 pointRect.right -= strokeWidth;
 pointRect.top += strokeWidth;
 pointRect.bottom -= strokeWidth;
 float roundBarsRadius = series.getRoundBarsRadius();
 if (series.getAreBarsRounded()) {
 canvas.drawRoundRect(pointRect, roundBarsRadius, roundBarsRadius, fillPaint);
 canvas.drawRoundRect(pointRect, roundBarsRadius, roundBarsRadius, strokePaint);
 } else {
 canvas.drawRect(pointRect, fillPaint);
 canvas.drawRect(pointRect, strokePaint);
 }
 }
}

Finally, you can use it like this:

barSeries.setDataPointRenderer(new CustomBarRenderer(series, new int[] { Color.RED, Color.GREEN, Color.BLUE }));

Please write again if you need further assistance.

Regards,
Victor
Telerik

 

 

[Richard]

Thanks I will give this a try.

Is this the same approach I would use to customize the colors of a pie chart?

 

Rich

 

[Victor]

Hello Richard,

Thanks for the question.
No, the pie chart is different because each pie slice has a different color by design. The bar charts by design
have a single color for each bar.

You can modify the the pie colors like this:

int[] customColors = new int[] { Color.RED, Color.GREEN, Color.BLUE };
ChartPalette customPalette = pieChartView.getPalette().clone();
PaletteEntryCollection pieEntries = customPalette.entriesForFamily(ChartPalette.PIE_FAMILY);
for(int i = 0; i < pieEntries.size(); ++i) {
 PaletteEntry sliceEntry = pieEntries.get(i);
 sliceEntry.setFill(customColors[i % customColors.length]);
}
pieChartView.setPalette(customPalette);

Regards,
Victor
Telerik