barwidthpercent: % of what?

[Janne]

I have problems controlling the width of bars in a webchart containing stacked barseries on a datetime bottom axis. So tell me -what is the width percent of? I hope this is an simple question. It should be.

[Narcís]

Hi Janne,

BarWidthPercent property determines the percent of total Bar width used. You'll probably understand it better with an example. You can find one at All Features\Welcome !\Chart styles\Other\Bar 3D\Bar 3D Depth in the features demo, available at TeeChart's program group.

[Janne]

Hi Narcis,
Well, yes that makes sense, the example indicates that 100% means that the bars fill the White space between the increments, which is what you would expect. Only problem is that in my application the bars don't hesitate at all to overlap by lots. The chart is 2D, bottom axis is meant to be DateTime and the algoritm adds bars by this:

Bar(wcRate.Chart.Series.WithTitle(SomeDatabaseView.Table.Rows[J].Item['SomeField'].ToString)).Add(DateTime.Parse(SomeOtherDatabaseView.Table.Rows[K].Item['StartDate'].ToString),Double.Parse(SomeOtherDatabaseView.Table.Rows[K].Item['WeekTotal'].ToString)/ThisWeeksTotal*100);

Or in other Words:
Bar(SomeSeries).Add(x : DateTime, y : Double);

I have also included, further down:

wcRate.Chart.Axes.Bottom.Increment:=Steema.TeeChart.Utils.GetDateTimeStep(DateTimeSteps.OneWeek);
wcRate.Chart.Axes.Bottom.MinorTickCount:=6;

The consequtive values of the first argument in the Add( , ) are one week apart. I would have expected the bars to be 1 week wide at 100%, but they aren't, they are much wider. What might I have forgotten to define?
It may be worth mentioning that, as the algoritm is constructed, there will not necessarily be a value for every increment along the bottom axis. Could that be the reason ?

[Narcís]

Hi Janne,

Using TeeChart for .NET build 4.1.2013.07300 and this code snippet:

Code: Select all

    public Form1()
    {
      InitializeComponent();
      InitializeChart();
    }

    private void InitializeChart()
    {
      tChart1.Aspect.View3D = false;
      tChart1.Legend.Visible = false;

      tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneWeek);
      tChart1.Axes.Bottom.MinorTickCount = 6;
      tChart1.Axes.Bottom.Labels.Angle = 90;

      Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);

      bar1.XValues.DateTime = true;
      bar1.BarWidthPercent = 100;
      bar1.Marks.Visible = false;

      Random y = new Random();

      for (int i = 0; i < 10; i++)
      {
        DateTime dt = DateTime.Now;

        if (i != 5)
        {
          bar1.Add(dt.AddDays(i * 7), y.NextDouble()); 
        }
      }
    }

I get this chart:

BarWidthPercent.jpg (46.16 KiB) Viewed 20827 times

Where bars slightly overlap. Is this the problem you describe? I have added this defect (TF02016686) to the bug-list to be fixed for future releases.

[Janne]

Yes that's the effect. Only in my case it's much more. Could the occational lack of values along the axis be aggravating the problem, you think?

[Narcís]

Hi Janne,

Could the occational lack of values along the axis be aggravating the problem, you think?

Yes, adding more gaps:

Code: Select all

        if (i % 3 != 0)
        {
          bar1.Add(dt.AddDays(i * 7), y.NextDouble()); 
        }

makes it worse:

BarWidthPercent2.jpg (45.78 KiB) Viewed 20823 times

While having no gaps draws it correctly.

[Janne]

OK, so all I need to do, it seems, is to see to that there is at least a very small value. every week. Since you had some overlap in your random population despite the use of random as data source (I assume that the gap that was there was actually a value, namely 0 ?)

[Narcís]

Hello Janne,

No, gaps are created by adding no data at that point. If you look at my code snippets you'll see that a for loop adds data to series and skips the fifth point the first example and all multiples of 3 the second example. Your reply made me think of a possible workaround. It consists on adding null points instead of no data. So, populating series like this:

Code: Select all

      Random y = new Random();

      for (int i = 0; i < 10; i++)
      {
        DateTime dt = DateTime.Now;
        
        bar1.Add(dt.AddDays(i * 7), y.NextDouble()); 
        
        if (i % 3 == 0)
        {
          bar1.SetNull(i);
        }
      }

works fine for me. This code sets every point multiple of 3 to be null. Does this work fine for you?

[Janne]

Yes that's actually what I did yesterday, or started to do. The algoritm needs a fair deal of rework, but I tried it simplified and it works. Seemingly, the bar width is determined as the number of points added, divided by (max-min), or something to that effect.

So - problem solved. Thanks !!

[Janne]

No, sorry, misunderstood you just now.

I added zero-points and that worked fine. Null points (no data) doesn't work for me. Several bars are stacked, does that matter?

[Janne]

Misunderstood again. Null points probably does the trick. No .add( ...) at all doesn't work however.

So again - problem solved !!

[Narcís]

Hello Janne,

When I speak about null points is points with data but not being painted, please see the code snippet in my previous reply. Null points in TeeChart can have zero or any other value, the real difference is their color is set to Color.Transparent and hence are not visible. You can make a point null in several ways:

1. Just call Add(). This will add a null point sequentially.
2. Call SetNull(ValueIndex). This will set the given point to null.
3. Call any Add method override admitting color settings with Color.Transparent.

[Janne]

Thanks again, Narcis.

For your info, my chart includes quite a number of stacked series, and the overlap was really huge before this little conversation. So if that helps for finding the bug, it seems like the number of gaps is important.

cheers,

[Narcís]

Hello Janne,

Thanks for your feedback. After further investigation we don't think this is a bug. The solution is adding null points in those sections of the horizontal axis range where there's no data. Setting BarWidthPercent to 100 divides available space for the number of bars in the series, which leads to some overlapping if the horizontal axis range has been widened or there are gaps in the data. Adding in null points seems to resolve the issue perfectly. Doing the necessary work to calculate the bar width in these cases is complex and would only work anyhow if the bars are evenly spaced. In the case of bars that are not evenly spaced then adding null points doesn't solve the issue and doing the necessary calculation to make it work would be very CPU-intensive, e.g.:

Code: Select all

    private void InitializeChart()
    {
      tChart1.Aspect.View3D = false;
      tChart1.Legend.Visible = false;

      tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneWeek);
      tChart1.Axes.Bottom.MinorTickCount = 6;
      tChart1.Axes.Bottom.Labels.Angle = 90;

      Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);

      bar1.XValues.DateTime = true;
      bar1.BarWidthPercent = 100;
      bar1.Marks.Visible = false;

      Random y = new Random();
      DateTime dt = DateTime.Now;

      for (int i = 0; i < 10; i++)
      {
        dt = dt.AddDays(y.Next(365));

        if (i != 5)
        {
          bar1.Add(dt, y.NextDouble());
        }
        else
        {
          bar1.Add(dt, 0, Color.Transparent);
        }
      }
    }

[Janne]

Yeah, I see what you mean.
Well, it's not really a problem if one is only aware of it before writing a phone-book full of misdirected code... Perhaps it would be worthwhile pointing it out somewhere, ideally in the IDE tooltip connected to the property?

Thanks a lot, I did appreciate this.