Pie Charts

[MikeTheLad]

2 Questions on the pie charge sample attached,

1. how can I add the % symbol next to the figure

My code is:-

pie.Add(Convert.ToInt32(ethnicperc1), "White", Color.FromArgb(49, 151, 101));
pie.Add(Convert.ToInt32(ethnicperc2), "Mixed", Color.FromArgb(255, 255, 255));
pie.Add(Convert.ToInt32(ethnicperc3), "Asian", Color.FromArgb(245, 152, 31));
pie.Add(Convert.ToInt32(ethnicperc4), "Black", Color.FromArgb(205, 205, 205));
pie.Add(Convert.ToInt32(ethnicperc5), "Other" , Color.FromArgb(244, 243, 160));
pie.Add(Convert.ToInt32(ethnicperc6), "Not Answered", Color.FromArgb(157, 197, 233));
pie.Rotate(90);

2. The pie appears to be generated anticlockwise, is there a way of make it clockwise

[Sandra]

Hello MikeTheLad,

1. how can I add the % symbol next to the figure

You need use property Style of Marks as do in next simple code:

Code: Select all

       private void InitializeChart()
        {
            Steema.TeeChart.Styles.Pie pie = new Steema.TeeChart.Styles.Pie(tChart1.Chart);
            tChart1.Legend.Visible = true;
            tChart1.Header.Text = "";
            pie.Circled = true;
            tChart1.Chart.Panel.Color = System.Drawing.Color.White;
            tChart1.Chart.Panel.Bevel.Outer = Steema.TeeChart.Drawing.BevelStyles.None;
            tChart1.Chart.Panel.Bevel.Inner = Steema.TeeChart.Drawing.BevelStyles.None;

            tChart1.Aspect.View3D = false;
            Random rnd = new Random();
            int ethnicperc1, ethnicperc2, ethnicperc3, ethnicperc4, ethnicperc5, ethnicperc6;
          
            ethnicperc1 = 74;
            ethnicperc2 = 4;
            ethnicperc3 = 6;
            ethnicperc4 = 2;
            ethnicperc5 = 5;
            ethnicperc6 = 8;
            pie.Marks.Style = MarksStyles.LabelPercent;
            pie.CustomXRadius = 120;
            pie.CustomYRadius = 120;

            pie.Add(ethnicperc1, "White", Color.FromArgb(49, 151, 101));
            pie.Add(ethnicperc2, "Mixed", Color.FromArgb(255, 255, 255));
            pie.Add(ethnicperc3, "Asian", Color.FromArgb(245, 152, 31));
            pie.Add(ethnicperc4, "Black", Color.FromArgb(205, 205, 205));
            pie.Add(ethnicperc5, "Other", Color.FromArgb(244, 243, 160));
            pie.Add(ethnicperc6, "Not Answered", Color.FromArgb(157, 197, 233));
            pie.Rotate(180);
        }

2. The pie appears to be generated anticlockwise, is there a way of make it clockwise

I recommend you change the angle of rotation to achieve make the pie as clockwise.
For example:

Code: Select all

 pie.Rotate(180);

I hope will helps.

Thanks,

[MikeTheLad]

Hi adding the styles has made no difference, my code is:-

Steema.TeeChart.TChart tChart2 = new Steema.TeeChart.TChart();
Steema.TeeChart.Styles.Pie pie = new Steema.TeeChart.Styles.Pie(tChart2.Chart);
tChart2.Legend.Visible = true;
tChart2.Header.Text = "";
tChart2.Chart.Panel.Color = System.Drawing.Color.White;
tChart2.Chart.Panel.Visible = false;
tChart2.Chart.Walls.Visible = false;
tChart2.Chart.Panel.Bevel.Outer = Steema.TeeChart.Drawing.BevelStyles.None;
tChart2.Chart.Panel.Bevel.Inner = Steema.TeeChart.Drawing.BevelStyles.None;
tChart2.Aspect.View3D = false;

pie.Marks.Visible = false;
pie.Marks.Pen.Visible = false;
pie.Marks.Arrow.Visible = false;
pie.Circled = true;

pie.Marks.Style = Steema.TeeChart.Styles.MarksStyles.LabelPercent;
pie.CustomXRadius = 120;
pie.CustomYRadius = 120;
pie.Circled = true;


pie.Add(Convert.ToInt32(ethnicperc1), "White", Color.FromArgb(49, 151, 101));
pie.Add(Convert.ToInt32(ethnicperc2), "Mixed", Color.FromArgb(255, 255, 255));
pie.Add(Convert.ToInt32(ethnicperc3), "Asian", Color.FromArgb(245, 152, 31));
pie.Add(Convert.ToInt32(ethnicperc4), "Black", Color.FromArgb(205, 205, 205));
pie.Add(Convert.ToInt32(ethnicperc5), "Other" , Color.FromArgb(244, 243, 160));
pie.Add(Convert.ToInt32(ethnicperc6), "Not Answered", Color.FromArgb(157, 197, 233));

pie.Rotate(90);






As for the rotatation, I have already tried pie.Rotate(180); this does help I need the green section to start at the top and be clockwise until the other colours appear to left, ie as if the image is flipped

[Sandra]

Hello MikeTheLad,

Hi adding the styles has made no difference, my code is:-

If you want see the difference you achieve changing style of Marks, you need Marks.Visible=true. Please change Marks.Visible=false to Marks.Visible=true and see the results.

As for the rotatation, I have already tried pie.Rotate(180); this does help I need the green section to start at the top and be clockwise until the other colours appear to left, ie as if the image is flipped

Ok. I try change the angle rotation 90 to 270 and I have gotten next image:

pieTest3.jpg (33.03 KiB) Viewed 36886 times

Can you tell us if image have the results as you want?

I hope will helps.

Thanks,

[MikeTheLad]

The % symbol I require on the legend next the figures, but not on the graph.

I have created in Phtoshop what I require the pie to look like

[Sandra]

Hello MikeTheLad,
Ok. Seems finally I have understood you want achieve. I have made a simple code where used an auxiliary pie series to save the originaly values and other series to manipulate values. Please see next code and check if works as you want:

Code: Select all

 Steema.TeeChart.Styles.Pie pie1, pieaux;
       private void InitializeChart()
      {
          tChart2.Aspect.View3D = false;

          pieaux = new Steema.TeeChart.Styles.Pie();
          pie1 = new Steema.TeeChart.Styles.Pie(tChart2.Chart);

          tChart2.Header.Text = "";
          tChart2.Chart.Panel.Color = System.Drawing.Color.White;
          tChart2.Chart.Panel.Bevel.Outer = Steema.TeeChart.Drawing.BevelStyles.None;
          tChart2.Chart.Panel.Bevel.Inner = Steema.TeeChart.Drawing.BevelStyles.None;

          Random rnd = new Random();
          int ethnicperc1, ethnicperc2, ethnicperc3, ethnicperc4, ethnicperc5, ethnicperc6;

          ethnicperc1 = 94;
          ethnicperc2 = 0;
          ethnicperc3 = 1;
          ethnicperc4 = 1;
          ethnicperc5 = 0;
          ethnicperc6 = 4;
         // Save Originaly values.
          pieaux.Add(ethnicperc1, "White", Color.FromArgb(49, 151, 101));
          pieaux.Add(ethnicperc2, "Mixted", Color.FromArgb(255, 255, 255));//white
          pieaux.Add(ethnicperc3, "Asian", Color.FromArgb(245, 152, 31));//Orange
          pieaux.Add(ethnicperc4, "Black", Color.FromArgb(205, 205, 205));//Grey
          pieaux.Add(ethnicperc5, "Other", Color.FromArgb(244, 243, 160));//Yellow
          pieaux.Add(ethnicperc6, "Not Answered", Color.FromArgb(157, 197, 233));//blue skye 
         //Add values  
          pie1.Add(pieaux.YValues[5], pieaux.Labels[5], pieaux.Colors[5]);
          pie1.Add(pieaux.YValues[4], pieaux.Labels[4], pieaux.Colors[4]);
          pie1.Add(pieaux.YValues[3], pieaux.Labels[3], pieaux.Colors[3]);
          pie1.Add(pieaux.YValues[2], pieaux.Labels[2], pieaux.Colors[2]);
          pie1.Add(pieaux.YValues[1], pieaux.Labels[1], pieaux.Colors[1]);
          pie1.Add(pieaux.YValues[0], pieaux.Labels[0], pieaux.Colors[0]);
          pie1.Rotate(90);
          tChart2.Legend.Inverted = true;

          pie1.Marks.Visible = false;
          pie1.Marks.Pen.Visible = false;
          pie1.Marks.Arrow.Visible = false;
          pie1.Circled = true;
          pie1.Marks.Style = MarksStyles.LabelPercent;
          pie1.CustomXRadius = 120;
          pie1.CustomYRadius = 120;
          tChart2.Panel.MarginRight = 20;

      }

I hope will helps.

Thanks,

[MikeTheLad]

Thank you, that worked, any ideas how I can do the % symbol in the legend, ie

94% white
0% Mixed
1% Asian

etc

If I try to add the % in the following line it fails to build

pie.Add(Convert.ToInt32(ethnicperc1), "White", Color.FromArgb(49, 151, 101));


ie

pie.Add(Convert.ToInt32(ethnicperc1) & "%", "White", Color.FromArgb(49, 151, 101)); This fails

[Sandra]

Hello MikeTheLad,

You only need change TextStyle of Lenged as do in following line of code:

Code: Select all

  tChart2.Legend.TextStyle = Steema.TeeChart.LegendTextStyles.LeftPercent;

I hope will helps.

Thanks,

[MikeTheLad]

Thanks, all worked, hopefully that is all

[Bank Van Breda]

What is the actual part for triggering that pie data is filled up clockwise instead of default counterclockwise?
Tried playing with RotationAngle without any luck.

[Sandra]

Hello Bank Van Breda,

I would like suggest you use the Rotate method to change the pie angle rotation and do it works in clockwise direccion. The line code below shows you how can do that:

Code: Select all

pie.Rotate(180);

Hoping this helps you,
Thanks in advance

[Bank Van Breda]

Like I said, I'm still clearly missing the actual correct code?
So image 1 is regular pie chart, you notice that first value ( dark blue ) is followed by orange rotated counterclockwise.

Screen Shot 2018-05-18 at 13.48.00.png (45.84 KiB) Viewed 35281 times

Second image is same pie with the rotate 180. So now all values are flipped over horizontal axes of the pie, but still fill up counterclockwise...

Screen Shot 2018-05-18 at 13.48.13.png (50.45 KiB) Viewed 35281 times

Any other ideas I can test?

[Bank Van Breda]

Ok found out why this is happening... I added the values to the pie from large to small sorted. Seems the pie chart assumes that data is added in the other sorted direction ( from small to large ).
But because I also show a legend list, I sorted from big to small...

But problem fixed

[Sandra]

Hello Bank Van Breda,

I'm glad you can find a solution for your problem. I would like inform you that you can order the PieValues after adding these. You can do that using the Pie Values Order propierty. The line below shows you how can do that:

Code: Select all

pie1.PieValues.Order = Steema.TeeChart.Styles.ValueListOrder.Descending;

Thanks in advance