SChartDonutSeries - Distance between series & slice growing animation


#1

Hello,

I’m currently trying out ShinobiCharts for iOS and I am praticularly interested in DonutSeries.

I would like to know if there is way to specify a distance between series in a ShinobiChart. I saw that in the SChart.h header there is a public structure called SChartSeriesDistanceInfo. However I wasn’t able to find out how to use it to modify the distance between series.

The end result I would like to achieve is something as shown in the image

Also, I have checked out the available animations and they all seem to animate the entire chart.

Is there a way to grow indivudual slices?
Would the method – drawSlice:ofTotal:fromAngle:toAngle:fromCentre:withInnerRadius:andOuterRadius:asSelected:inFrame: do the job? If so how am I supposed to use it? Should I subclass SChartDonutSeries?


#2

Hi Tmpz, 

I think you are definitely looking to use a donut chart to achieve the chart in your picture.

You would need two series, as each series in a donut chart spans 360 degrees of the chart (the innter most series would contain the green slice, the outer most series would contain the pink slide). I’m going to break this into sections to hopefully make each part clearer.

Your Data

Each series would need to have two radial data points (two slices per series):

  • The first radial point in each series will be the value of the corresponding data. So for series 1 lets say 80.
  • The second slice in your first series would be the remainder of the data, 20. (I do not know for sure what you are trying to achieve but I have assumed that you want your slice spanning a circumference of your chart proportional to 100.)

Your Styling

  • You want the inside of your donut to be dark grey. Currently we do not support any coloring of the center circle so your best bet would be to make the background of the chart clearColor and draw a dark grey circle before adding your chart as a subview.

  • Since your want there to be a gap for your second slice, you want to set this slice’s colour to clearColor like so:

    innerSeries.style.showFlavour = YES;

    // Set the first slice to be red, the second slice to be clear.
    innerSeries.style.flavourColors = [NSMutableArray arrayWithObjects:[UIColor redColor], [UIColor clearColor], nil];

    // Turn off the chart’s shiny bevel.
    innterSeries.style.chartEffect = SChartRadialChartEffectFlat;

    // Do the same for the outer series but with a different colour for the first slice.

  • Set the radii property of your series so that:

    • the inner radius of your first series is X
    • the outer radius of your first series is Y
    • the inner radius of your second series is Y
    • the outer radius of your second series is Z
    • Where X < Y < Z and these values create the thicknesses you want in your pictures.
  • Add a UILabel to the center of your chart to indicate the values for your data.

Your Animation

Have a look at the SChartAnimation documentation, you might be able to get an animation effect similar to what you are after by creating a custom animation :grin:.

Let me know how you get on with the above!

Jan