Hello
I was wondering if it would be possible to create a simple clean looking chart like described in the attached image. I am looking for a “SuccessRateChart” that has some similarity to the PieChart but does not use the whole circle to describe its content. I would also need a way to adjust the visible radius of the Pie. In means of information visualization you often hear the term “doughnut chart”…
On way could be to draw some circle stacked over the chart itself, but there should be a better solution.
Would love to hear from you,
Kind regards,
Stephan
- Stephan Raible asked 4 years ago
- last edited 4 years ago
- You must login to post comments
Hi Stephan,
We do support drawing of donut charts and if you modify that example like this you can get output like on your image:
@Override
protected void initExample() {
final float donutSeriesHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getActivity().getResources().getDisplayMetrics());
final int totalCount = 10;
final int success = 8;
final DonutRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSegments(
sciChartBuilder.newPieSegment().withValue(success).withFillColor(ColorUtil.DarkViolet).build(),
sciChartBuilder.newPieSegment().withValue(totalCount - success).withFillColor(ColorUtil.Transparent).build()
).withHeightSizingMode(SizingMode.Absolute).withHeight(donutSeriesHeight).build();
donutSeries.setDrawLabels(false);
donutSeries.setScale(0.5f);
donutSeries.setStartAngle(180);
Collections.addAll(pieChartSurface.getRenderableSeries(), donutSeries);
}
The only thing that it would require additional TextView with text on top of chart + you may need to set some negative padding on chart, because it will try occupy space to draw entire chart.
Is this suitable for your needs?
Best regards,
Yura
- Yura Khariton answered 4 years ago
- You must login to post comments
Hi Yura
Thank you for the quick answer, I think that is something to work with :-). Do you know if it is also possible to remove the black border of the transparent segment?
Would it also be possible to add a fill gradient along the colored segment. I am talking about an “angle gradient” similar to find in Photoshop where the gradient starts at the left bottom and ends on the other side of the segment.
Best regards,
Stephan
- Stephan Raible answered 4 years ago
You can set transparent stroke style color for that segment to remove border. I’m not sure about your gradient requirements – currently we support solid, linear + radial gradient and texture as fill for segments. You can use the last one and provide texture with desired gradient if built in gradient styles won’t be suitable for your application.
- You must login to post comments
Please login first to submit.
