Self-stacked bar graph with side labels?

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
PhilOutram
Newbie
Newbie
Posts: 17
Joined: Mon Jun 19, 2006 12:00 am
Location: Auckland

Self-stacked bar graph with side labels?

Post by PhilOutram » Tue Jan 29, 2013 9:45 am

Hi,

Is it possible to create a self-stacked (single) bar graph with labels off to the side, rather than above each bar. When they're all stacked on top of each other, it makes much more sense to have the label to the side.

I'm trying to generate this graphic, which would ideally have each bar having it's own gradient colour, and a complex label on each side.

Image

If any of the above are possible, please explain how to do it (I'm coding in VB.net). I've tried using the Chart Editor, but couldn't do the above points.

Many thanks,
Phil.
Attachments
SMC.jpg
SMC.jpg (64.65 KiB) Viewed 10044 times

Sandra
Site Admin
Site Admin
Posts: 3132
Joined: Fri Nov 07, 2008 12:00 am

Re: Self-stacked bar graph with side labels?

Post by Sandra » Wed Jan 30, 2013 11:13 am

Hello Phil,

I think you can get as you want working with CustomLabels of Axes as I do in next simple code:

Code: Select all

   double TotalSum;
      private void InitializeChart()
      {
          tChart1.Aspect.View3D = false;
          tChart1.Walls.Back.Visible = false;
          tChart1.Axes.Left.Grid.Visible = false;
         Steema.TeeChart.Styles.Bar Series1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
         TotalSum = 0;
          for (int i = 0; i < 5; i++)
          {
              Series1.Add(i, i * 100 + 5);
              TotalSum = TotalSum + Series1.YValues[i];

          }
          //InitializeSeries.
          Series1.MultiBar = MultiBars.SelfStack;
          Series1.BarStyle = BarStyles.RectGradient;
          Series1.VertAxis = VerticalAxis.Both;
          Series1.BarWidthPercent = 100;
          Series1.Marks.Visible = false;
          Series1.SideMargins = false;
          //Set CustomLabels:
          SetCustomLabels();

      }

      private void SetCustomLabels()
      {
          double NewPosition = 0;
          Steema.TeeChart.Styles.Bar bar1 = (tChart1[0] as Steema.TeeChart.Styles.Bar);
          for (int i = 0; i < bar1.Count; i++)
          {
              NewPosition = NewPosition + bar1.YValues[i];
              tChart1.Axes.Left.Labels.Items.Add(NewPosition, (Math.Round(bar1.YValues[i] * 100 / TotalSum, 2)).ToString() + "%");
          }
          NewPosition = 0;
          for (int i = 0; i < bar1.Count; i++)
          {
              NewPosition = NewPosition + tChart1[0].YValues[i];
              tChart1.Axes.Right.Labels.Items.Add(NewPosition, (bar1.XValues[i] * 100 / 10).ToString() + "%");
          }
      }
Could you tell us if previous code works in your end?

I hope will helps.

Thanks,
Best Regards,
Sandra Pazos / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

PhilOutram
Newbie
Newbie
Posts: 17
Joined: Mon Jun 19, 2006 12:00 am
Location: Auckland

Re: Self-stacked bar graph with side labels?

Post by PhilOutram » Wed Jan 30, 2013 12:47 pm

Great, thanks. I'll try it at the weekend and let you know.
Phil

PhilOutram
Newbie
Newbie
Posts: 17
Joined: Mon Jun 19, 2006 12:00 am
Location: Auckland

Re: Self-stacked bar graph with side labels?

Post by PhilOutram » Sun Feb 10, 2013 10:41 pm

Hi Sandra,

The code you sent is working pretty well. The only problem I'm having is that my single set of stacked bars are pinned to the left of the chart space and only one or so pixels wide. Can you please tell me how to get the bars to be the full width of the chart area? i.e from the left axis to the right axis with no margin?

Many thanks.

Phil.

Sandra
Site Admin
Site Admin
Posts: 3132
Joined: Fri Nov 07, 2008 12:00 am

Re: Self-stacked bar graph with side labels?

Post by Sandra » Mon Feb 11, 2013 2:59 pm

Hello Phil,

I can not reproduce your problem using next code in last version 4.1.2012.01312:

Code: Select all

       double TotalSum;
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            tChart1.Walls.Back.Visible = false;
            tChart1.Axes.Left.Grid.Visible = false;
            Steema.TeeChart.Styles.Bar Series1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            TotalSum = 0;
            for (int i = 0; i < 5; i++)
            {
                Series1.Add(i, i * 100 + 5);
                TotalSum = TotalSum + Series1.YValues[i];

            }
            //InitializeSeries.
            Series1.MultiBar = MultiBars.SelfStack;
            Series1.BarStyle = BarStyles.RectGradient;
            Series1.VertAxis = VerticalAxis.Both;
            Series1.BarWidthPercent = 100;
            Series1.Marks.Visible = false;
            Series1.SideMargins = false;
            //Set CustomLabels:
            SetCustomLabels();

        }

        private void SetCustomLabels()
        {
            double NewPosition = 0;
            Steema.TeeChart.Styles.Bar bar1 = (tChart1[0] as Steema.TeeChart.Styles.Bar);
            for (int i = 0; i < bar1.Count; i++)
            {
                NewPosition = NewPosition + bar1.YValues[i];
                tChart1.Axes.Left.Labels.Items.Add(NewPosition, (Math.Round(bar1.YValues[i] * 100 / TotalSum, 2)).ToString() + "%");
            }
            NewPosition = 0;
            for (int i = 0; i < bar1.Count; i++)
            {
                NewPosition = NewPosition + tChart1[0].YValues[i];
                tChart1.Axes.Right.Labels.Items.Add(NewPosition, (bar1.XValues[i] * 100 / 10).ToString() + "%");
            }
        }
The result image I have gotten is next: .
StackBar.jpg
StackBar.jpg (36.15 KiB) Viewed 9995 times
Could you tell us which version of TeeChartFor.Net are you using? If you use the last version and the problem still appears for you, please send us a simple code because, we can reproduce issue here and try to find a solution for you.

Thanks,
Best Regards,
Sandra Pazos / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

PhilOutram
Newbie
Newbie
Posts: 17
Joined: Mon Jun 19, 2006 12:00 am
Location: Auckland

Re: Self-stacked bar graph with side labels?

Post by PhilOutram » Mon Feb 11, 2013 3:18 pm

Hi Sandra,

Thanks for your quick response. The details of the TeeChart dll I'm using are...
TeeChart Dll Details.gif
TeeChart Dll Details.gif (26.77 KiB) Viewed 10038 times
I'll try and trim everything back to see if I can reproduce what you've got.

Lastly, is it possible to set the colour of the bars individually?

Many thanks,
Phil.

Sandra
Site Admin
Site Admin
Posts: 3132
Joined: Fri Nov 07, 2008 12:00 am

Re: Self-stacked bar graph with side labels?

Post by Sandra » Tue Feb 12, 2013 10:16 am

Hello Phil


Thanks for information. Basically, your problem is that BarWidht property doesn't work in correct way in version 2 and it breaks your application. If you want achieve the same results than latest version TeeChartFor.Net 2012 I recommend use CustomBarWidth property as I do in next code:

Code: Select all

 //Version 2. 
      double TotalSum;
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            tChart1.Walls.Back.Visible = false;
            tChart1.Axes.Left.Grid.Visible = false;
            Steema.TeeChart.Styles.Bar Series1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            TotalSum = 0;
            for (int i = 0; i < 5; i++)
            {
                Series1.Add(i, i * 100 + 5);
                TotalSum = TotalSum + Series1.YValues[i];

            }
            //InitializeSeries.
            Series1.MultiBar = MultiBars.SelfStack;
            Series1.BarStyle = BarStyles.RectGradient;
            Series1.VertAxis = VerticalAxis.Both;
            Series1.Marks.Visible = false;
            Series1.CustomBarWidth = tChart1.Width;
            SetCustomLabels();

        }

        private void SetCustomLabels()
        {
            double NewPosition = 0;
            Steema.TeeChart.Styles.Bar bar1 = (tChart1[0] as Steema.TeeChart.Styles.Bar);
            for (int i = 0; i < bar1.Count; i++)
            {
                NewPosition = NewPosition + bar1.YValues[i];
                tChart1.Axes.Left.Labels.Items.Add(NewPosition, (Math.Round(bar1.YValues[i] * 100 / TotalSum, 2)).ToString() + "%");
            }
            NewPosition = 0;
            for (int i = 0; i < bar1.Count; i++)
            {
                NewPosition = NewPosition + tChart1[0].YValues[i];
                tChart1.Axes.Right.Labels.Items.Add(NewPosition, (bar1.XValues[i] * 100 / 10).ToString() + "%");
            }
        }

        private void button3_Click(object sender, EventArgs e)
        {
            tChart1.ShowEditor();
        }
Could you tell us if previous code works in your end?
Lastly, is it possible to set the colour of the bars individually?
Yes, is possible. You can assign a color for each bar point. I have added a list of colors in my previous code that allow you assign one color for each bar point:


Code: Select all

 double TotalSum;
        List<Color> colorList;
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            tChart1.Walls.Back.Visible = false;
            tChart1.Axes.Left.Grid.Visible = false;
            Steema.TeeChart.Styles.Bar Series1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
             colorList = new List<Color>(new Color[] { Color.Red, Color.Green, Color.Blue, Color.HotPink, Color.Black});
            TotalSum = 0;
            for (int i = 0; i < 5; i++)
            {
                Series1.Add(i, i * 100 + 5,colorList[i]);
                TotalSum = TotalSum + Series1.YValues[i];

            }
            //InitializeSeries.
            Series1.MultiBar = MultiBars.SelfStack;
            Series1.BarStyle = BarStyles.RectGradient;
            Series1.VertAxis = VerticalAxis.Both;
            Series1.Marks.Visible = false;
            Series1.CustomBarWidth = tChart1.Width;
            SetCustomLabels();

        }

        private void SetCustomLabels()
        {
            double NewPosition = 0;
            Steema.TeeChart.Styles.Bar bar1 = (tChart1[0] as Steema.TeeChart.Styles.Bar);
            for (int i = 0; i < bar1.Count; i++)
            {
                NewPosition = NewPosition + bar1.YValues[i];
                tChart1.Axes.Left.Labels.Items.Add(NewPosition, (Math.Round(bar1.YValues[i] * 100 / TotalSum, 2)).ToString() + "%");
            }
            NewPosition = 0;
            for (int i = 0; i < bar1.Count; i++)
            {
                NewPosition = NewPosition + tChart1[0].YValues[i];
                tChart1.Axes.Right.Labels.Items.Add(NewPosition, (bar1.XValues[i] * 100 / 10).ToString() + "%");
            }
        }

        private void button3_Click(object sender, EventArgs e)
        {
            tChart1.ShowEditor();
        }
Could you tell us if previous code works in your end?

I hope will helps.

Thanks,
Best Regards,
Sandra Pazos / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

PhilOutram
Newbie
Newbie
Posts: 17
Joined: Mon Jun 19, 2006 12:00 am
Location: Auckland

Re: Self-stacked bar graph with side labels?

Post by PhilOutram » Mon Feb 18, 2013 12:52 am

Hi Sandra,

All the things that you've suggested have worked. Job done!

Very many thanks,
Phil.

Post Reply