doughnut and series separation

Hi,

I haven't used your charting controls before, so I'm not sure if this is an issue with your Metro chart, or I just don't understand your API in general.

I am trying to create a doughnut pie chart. I need to have the series within the doughnut separated from one another. I have tried setting a border brush and thickness on the PieSeries element, and I have also tried establishing a Padding value, but still my pie segments / series are run up against one another within the doughnut.

Can you please advise on how I can get the behavior I am looking for?

For reference, see the following image of what I am trying to achieve: http://www.teechart.com/uploads/gallery/ToWorkDonut.png

Thank you!

Hello

The link you posted is not working so I am not exactly sure what you want here. From your description, it sounds like you have multiple series within a single PieChart and want to have the outer series like a doughnut so there is a spacing between the outer series and the inner series. To do this, you can set the DoughnutScale property on the first PieSeries to get a doughnut effect. If this doesn't produce the effect you wanted, please send another link or attach an image and I'll help you out.

Jason Fauchelle

Thanks for the quick reply. Sorry about the link.

I am just talking about a single series here. Let's try a few others that I gathered just googling for doughnut charts:

http://www.bcgsoft.com/images/ChartDoughnut.jpg

http://petermcg.files.wordpress.com/2008/08/basic-doughnut-pie-chart.png?w=513&h=468

http://help.infragistics.com/Help/NetAdvantage/WPF/2010.1/CLR3.5/html/images/xamChartDoughnutChart01.png

http://www.google.com/help/hc/images/docs190726cpiecharten.gif

In all of the examples provided above, the individual slices within the doughnut have a border between them. How can I achieve this effect using the Metro Elements charting tools?

--lars

Hello lars

Thanks for the clarification of the effect your looking for. To get this effect you can create a custom PieSlice style. Here is an example:

<Style x:Key="PieSliceStyle" TargetType="ms:PieSlice">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ms:PieSlice">
        <Path Fill="{TemplateBinding Background}" Data="{Binding PathData, RelativeSource={RelativeSource TemplatedParent}}"
              StrokeThickness="3" Stroke="White" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The pie splice style simply contains a Path that binds the Data property to the PathData property to get the pre-calculated shape. On this path you can set whatever properties you want to style it. Here you can see I've set the StrokeThickness and the Stroke to give each slice a white border. Unfortunately you can't set the Stroke to Transparent to have the application background showing through. But if you wanted this effect, you could set the Stroke to be the same color as the background of your application.

Then with this pie slice style, you can set the PieSliceStyle property of your PieSeries.

Let me know if you have other questions.

Jason Fauchelle

Jason,

Thanks! Works perfectly. I would like to formally request, however, that your team consider adding the ability to set a transparent border/stroke for a pie slice.

I have two follow up question:

1- Gap/separation between series: in your original reply, you had assumed that I was trying to displaying multiple series within the doughnut. I wasn't at the time, but I am now :)

I have two different series defined within the same pie chart. How do I adjust the gap/distance between the outer series and the inner series? The DoughnutFactor property will allow me to shrink/grow the "depth" of each slice, but how do I move the inner series closer to the outer series while keeping the "depth" of each slice the same?

Here is another link for you to look at: http://wordpress.mrreid.org/wp-content/uploads/2010/01/doughnut-chart.jpg

In the image, you can see that each series is drawn right against the previous.

2- I see that the RadiusBinding property appears to let me change the radius start for an individual pie slice. If I wanted to take, for instance, a single slice from my doughnut chart and make it thicker than all of the others can this be achieved with RadiusBinding? If so, do you have a code example for this?

Thanks again Jason.

--lars

Hello lars

I have added the transparent border request to our back log.

1) There currently isn't a convenient way to customize the gap between multiple series. One way to do it would be to use the RadiusBinding feature which I explain in the next answer. You could give this a go to see if you can achieve the effect you want. Otherwise, I've also noted this down as an improvement we can make.

2) The easiest way to see the effects of the RadiusBinding feature is to populate a PieSeries with Point objects. Lets say you set the X value of each Point to be the data displayed by the pie slice, and set the Y value to be the radius factor for the pie slice. The radius factor is generally a value between 0 and 1 which will be multiplied by the available space to calculate the radius of the pie slice. The value can be larger than 1 though. For all your Point objects, set the Y value to 1, but set one of them to be 1.2. The slice that gets this Point will be rendered thicker than the others. Then on the PieSeries, set the DataBinding to be {Binding X} and set the RadiusBinding to be {Binding Y}. Let me know if you have any questions about setting this up.

Jason Fauchelle

Jason,

Finally getting around to trying your RadiusBinding suggestion. Can't quite get this to work for my scenario. One problem I have is that I need 3 pieces of data for each slice: a value, a label, and a size for its radius. So using a simple collection of point objects won't really work for me. I noticed that you have a pre-defined StringDoubleDouble object, but binding to a collection of these causes some sort of exception at runtime (it appears to be a cast exception during chart construction, at get_dataValue).

Any chance you can produce a sample project or end-to-end XAML/C# that I can look at?

--lars

Hello lars

I have attached a sample of how to do this. To run the sample, you'll need to add a reference to Mindscape.MetroElements. I was not able to reproduce the cast exception. You will see in code behind I am generating a list of StringDoubleDouble. The String property will be used for the label, the Double property for the data, and the Size property for the radius. In the xaml, the LabelBinding, DataBinding and RadiusBinding properties are used to point the pie series to the appropriate properties on StringDoubleDouble.

You may also want to set TitleBinding to be the same as LabelBinding so the labels appear in the legend. And set ShowDataLabels to true to display labels. Please download the next nightly build to automatically display the label text in the labels.

Jason Fauchelle