Multi Color Bar Chart

7 posts, 0 answers
  1. Richard
    Richard avatar
    44 posts
    Member since:
    Jun 2014

    Posted 08 May 2015 Link to this post

    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

  2. Richard
    Richard avatar
    44 posts
    Member since:
    Jun 2014

    Posted 08 May 2015 in reply to Richard Link to this post

    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

  3. DevCraft banner
  4. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 11 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. Richard
    Richard avatar
    44 posts
    Member since:
    Jun 2014

    Posted 11 May 2015 in reply to Victor Link to this post

    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

     

  6. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 12 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  7. Richard
    Richard avatar
    44 posts
    Member since:
    Jun 2014

    Posted 12 May 2015 in reply to Victor Link to this post

    Thanks I will give this a try.

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

     

    Rich

     

  8. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 14 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner