SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

0
0

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

Version
2.5.xxx for Android
Images
  • You must to post comments
0
0

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

Images
  • You must to post comments
0
0

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

  • Yura Khariton
    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 to post comments
Showing 2 results
Your Answer

Please first to submit.