X asix labels not lining up properly

[Yeray]

Hi Captell,

By default, the Axis Labels Style is set to Auto. This means that, when there is a labels in one of the points, it works as Text Style, and it works as Value Style if there is no label.
The Axis Labels Text Style shouldn't care about the Increment. It simply should show the label when present, where the points is drawn.
The Axis Labels Value Style tries to draw as much labels as possible with the given Increment (and IncrementOffset).

[Captell]

Ok, I think I've got a workaround now for the problem where labels don't align correctly with the bars, thanks.

I know you say this is by design but I really think you need to reconsider that design.
A bar graph by any definition I can find is primarilly used to show discrete values, and therefore the labels of those discrete values should align correctly with the bars. The example I've posted previously,

13-08-2010 9-13-27 AM.png (4.25 KiB) Viewed 78677 times

shows the left most bar with a label of 27/12/1999 when the data for that bar is 26/12/1999. To assume that the end user of this chart should know that because the label is ever so slightly to the right of the center of the bar they should extrapolate the dates to arrive at 26/12/1999 is quite ridiculous and forces the publication of charts that are plainly wrong.

Your workaround works but it means that the behaviour of bar charts (and I'm assuming horizontal bar charts too) is different to any other charts. When a user creates a line graph they can use dates as the xvalues, choose an increment and the data is displayed correctly. For instance they may want to plot weekly data but only show a label monthly for the first of the month, in this case they just set the increment to one month and it just works. This is not possible with bar charts.

The attempted fix providing the offset values is no fix at all as the offset only works with a set chart size, resize the window that the chart resides in and the labels don't align again. We now have an extra property to explain to the end users as something they should just ignore.

I am fully aware that it's up to you guys to determine how your products function and what the design is, I'm a developer and have clients that bug me for fixes and enhancements so I know what it's like but I really think in some cases the end user is correct. I challange you to find anyone that thinks the example chart shown above is correct when they understand that the data for that first bar is 26/12/1999.

Please reconsider this design and allow a simple, reliable and consistant way of providing x,y data to a bar chart when X is a datetime value, with a result that the labels correctly align with the bars.

Thanks.

[Captell]

Upon further investigation it seems that this workaround wont really work.

The problem comes when we want to overlay our bar chart with a line graph using a line such as line.Add(dte, y), which is how we are currently creating line series charts. We then rely on interval and axes label formats to apply formatting etc. We end up with a chart like

barline.png (25.71 KiB) Viewed 78655 times

This I'm assumiong is because the bar charts xvalues aren't set. I've tried all of the Bar.Add methods in an attempt to set the xvalues but in all cases when Xvalues are set the chart looses labels when the window is resized.

My only alternative is to change the way I create live graphs to add the data in the same way you suggest to add bar data but this is not going to work because my users want to use the increment feature.

So back to you...

very ... very ... frustrated.

[Yeray]

Hi Captell,

I know you say this is by design but I really think you need to reconsider that design.

I am fully aware that it's up to you guys to determine how your products function and what the design is, I'm a developer and have clients that bug me for fixes and enhancements so I know what it's like but I really think in some cases the end user is correct. I challange you to find anyone that thinks the example chart shown above is correct when they understand that the data for that first bar is 26/12/1999.

Please reconsider this design and allow a simple, reliable and consistant way of providing x,y data to a bar chart when X is a datetime value, with a result that the labels correctly align with the bars.

We do. Take it for sure. We wouldn't want you to think we aren't paying the attention this issue requires.

Your workaround works but it means that the behaviour of bar charts (and I'm assuming horizontal bar charts too) is different to any other charts. When a user creates a line graph they can use dates as the xvalues, choose an increment and the data is displayed correctly. For instance they may want to plot weekly data but only show a label monthly for the first of the month, in this case they just set the increment to one month and it just works. This is not possible with bar charts.

I can see the same behaviour we described with Line series. Adding the points with datetime and without labels, the labels aren't aligned:

Code: Select all

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

            Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart);

            line1.Marks.Style = Steema.TeeChart.Styles.MarksStyles.XValue;
            line1.Marks.Visible = true;
            tChart1.Axes.Bottom.Labels.Angle = 90;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM dd";
            tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneDay);

            Random rnd = new Random();
            DateTime date = DateTime.Now;
            for (var i = 0; i < 10; i++)
                line1.Add(date.AddDays(i), rnd.Next(100));

            line1.XValues.DateTime = true;
        }

Chart1.png (41.46 KiB) Viewed 78647 times

Upon further investigation it seems that this workaround wont really work.

The problem comes when we want to overlay our bar chart with a line graph using a line such as line.Add(dte, y), which is how we are currently creating line series charts. We then rely on interval and axes label formats to apply formatting etc. We end up with a chart like

This I'm assumiong is because the bar charts xvalues aren't set. I've tried all of the Bar.Add methods in an attempt to set the xvalues but in all cases when Xvalues are set the chart looses labels when the window is resized.

You are adding the bar series values without XValue. This makes the XValues to be 0, 1, 2,... And you are adding the line series values with XValues, DateTime XValues that would probably be around nowadays so they have values about 40000 approximately. So I'm afraid it would be an expected behaviour because your bar series XValues and your line series XValues are very far.

The resizing problem may be different. That's why I created a new ticket for it

On the other hand, I still think that the best way to achieve what you are trying would be the code I proposed here. If the only proble you have with it is that it doesn't allow to view the effect of manipulating the Increment, here you have a variant:

Code: Select all

        public Form1()
        {
            InitializeComponent();

            CreateChart();
            InitializeChart();
        }

        private Steema.TeeChart.TChart tChart1;
        private int ant;
        private void CreateChart()
        {
            tChart1 = new Steema.TeeChart.TChart();
            this.Controls.Add(tChart1);
            tChart1.Dock = DockStyle.Fill;

            Steema.TeeChart.ChartController chartController1 = new Steema.TeeChart.ChartController();
            //Steema.TeeChart.Commander chartController1 = new Steema.TeeChart.Commander();
            this.Controls.Add(chartController1);
            chartController1.Chart = tChart1;
            chartController1.Dock = DockStyle.Top;
        }

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

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

            bar1.Marks.Style = Steema.TeeChart.Styles.MarksStyles.XValue;
            tChart1.Axes.Bottom.Labels.Angle = 90;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM dd";
            tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.TwoDays);

            Random rnd = new Random();
            DateTime date = DateTime.Now;
            for (var i = 0; i < 10; i++)
                bar1.Add(date.AddDays(i), rnd.Next(100));

            bar1.XValues.DateTime = true;

            tChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.Text;
            tChart1.Panel.MarginBottom = 15;
            tChart1.GetAxisLabel += new Steema.TeeChart.GetAxisLabelEventHandler(tChart1_GetAxisLabel);
        }
        
        void tChart1_GetAxisLabel(object sender, Steema.TeeChart.GetAxisLabelEventArgs e)
        {
            if (sender == tChart1.Axes.Bottom)
            {
                if ((e.Series != null) && (e.ValueIndex > -1))
                {
                    if (e.Series.FirstVisibleIndex == e.ValueIndex)
                    {
                        e.LabelText = DateTime.FromOADate(e.Series.XValues[e.ValueIndex]).ToString("MMM dd");
                        ant = e.ValueIndex;
                    }
                    else if ((ant != -1) && (e.Series.XValues[ant] + tChart1.Axes.Bottom.Increment <= e.Series.XValues[e.ValueIndex]))
                    {
                        e.LabelText = DateTime.FromOADate(e.Series.XValues[e.ValueIndex]).ToString("MMM dd");
                        ant = e.ValueIndex;
                    }
                }
            }
        }

[Captell]

Ok I can almost get this to work with the following but I'm stuck with how do I set the panel margin and label styles?

The line e.Series.Chart.Panel.MarginBottom = 15 needs to be set dynamicly but how do I work out the length of the label? I can't hardcode the margin firstly because the user gets to set the axis label format and secondly because this routine must work for all chart types i.e. those where the left, right, top or bottom axis could have datetime labels. I can't see how with "sender" or "e" available in the DrawLabel routine how I can work out what axis is being labeled so that the correct panel margin can be set, knowing what axis is being set is also needed to set the axis style = text.

I'd then have a problem where users want to control the margin them selves as this routine would override anything they specified. All this because we can't have labels that correctly align with the bars!!!

Code: Select all

 
Public Sub DrawLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.GetAxisLabelEventArgs) Handles tc.GetAxisLabel
      Dim axis As Steema.TeeChart.Axis
      axis = sender
      If axis.IsDateTime Then
         If Not IsNothing(e.Series) And e.ValueIndex >= -1 Then
            If e.Series.FirstVisibleIndex = e.ValueIndex Then
               e.LabelText = DateTime.FromOADate(e.Series.XValues(e.ValueIndex)).ToString(axis.Labels.DateTimeFormat)
               m_ant = e.ValueIndex
            Else
               If m_ant <> -1 And e.Series.XValues(m_ant) + e.Series.Chart.Axes.Bottom.Increment <= e.Series.XValues(e.ValueIndex) Then
                  e.LabelText = DateTime.FromOADate(e.Series.XValues(e.ValueIndex)).ToString(axis.Labels.DateTimeFormat)
                  m_ant = e.ValueIndex
               End If
            End If

            e.Series.Chart.Panel.MarginBottom = 15  ' THIS NEEDS TO BE DYNAMIC

         End If
      End If
   End Sub

[Captell]

I just tried something from your statement

I can see the same behaviour we described with Line series. Adding the points with datetime and without labels, the labels aren't aligned:

The following code correctly aligns the labels, the dates are added to the chart as DOUBLE, all chart properties functionality works correctly, i.e. label formats, increments etc. resizing the window has no detrimental effect... so here all is well.

Code: Select all

Private Sub InitializeChart()

      TChart1.Aspect.View3D = False

      Dim line1 = New Steema.TeeChart.Styles.Line(TChart1.Chart)

      TChart1.Axes.Bottom.Labels.Angle = 90
      TChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM dd"
      TChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneWeek)

      Dim Rnd = New Random
      Dim d As Double = 40000
      For i As Integer = 0 To 10
         line1.Add(d, Rnd.Next(100))

         line1.XValues.DateTime = True
         d = d + 7
      Next

   End Sub

line.png (40.6 KiB) Viewed 78640 times

Yet the following doesn't, same as previous chart and example except using a bar series, so here is evidence that there is something different between bar and line.

Code: Select all

 Private Sub InitializeChart()

      TChart1.Aspect.View3D = False

      Dim bar1 = New Steema.TeeChart.Styles.Bar(TChart1.Chart)

      TChart1.Axes.Bottom.Labels.Angle = 90
      TChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM dd"
      TChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneWeek)

      Dim Rnd = New Random
      Dim d As Double = 40000
      For i As Integer = 0 To 10
         bar1.Add(d, Rnd.Next(100))

         bar1.XValues.DateTime = True
         d = d + 7
      Next

   End Sub

bar.png (28.13 KiB) Viewed 78638 times

going back to the line example, if you change it to add the X value as a date it doesn't correctly align, so here is evidence that there is something wrong with the way labels are aligned when they are added as date time.

Private Sub InitializeChart()

TChart1.Aspect.View3D = False

Dim line1 = New Steema.TeeChart.Styles.Line(TChart1.Chart)

TChart1.Axes.Bottom.Labels.Angle = 90
TChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM dd"
TChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneWeek)

Dim Rnd = New Random
Dim dte As DateTime = DateTime.Now
For i As Integer = 0 To 10
line1.Add(dte, Rnd.Next(100))

line1.XValues.DateTime = True
dte = dte.AddDays(7)
Next

End Sub

line2.png (44.65 KiB) Viewed 78637 times

[Yeray]

Hi Captell,

The line e.Series.Chart.Panel.MarginBottom = 15 needs to be set dynamicly but how do I work out the length of the label? I can't hardcode the margin firstly because the user gets to set the axis label format and secondly because this routine must work for all chart types i.e. those where the left, right, top or bottom axis could have datetime labels. I can't see how with "sender" or "e" available in the DrawLabel routine how I can work out what axis is being labeled so that the correct panel margin can be set, knowing what axis is being set is also needed to set the axis style = text.

When formatting the labels the margins aren't calculated internally so you'll have to calculate them manually. I've made a quite generic example to calculate the margins:

Code: Select all

        private void AdjustMargins() //call once your chart is drawn
        {
            tChart1.Panel.MarginUnits = Steema.TeeChart.PanelMarginUnits.Pixels;
            tChart1.Panel.MarginLeft = maxLabelsWidthLeft + tChart1.Axes.Left.Ticks.Length;
            tChart1.Panel.MarginRight = maxLabelsWidthRight + tChart1.Axes.Right.Ticks.Length;
            tChart1.Panel.MarginTop = maxLabelsWidthTop + tChart1.Axes.Top.Ticks.Length;
            tChart1.Panel.MarginBottom = maxLabelsWidthBottom + tChart1.Axes.Bottom.Ticks.Length;
        }

        void tChart1_GetAxisLabel(object sender, Steema.TeeChart.GetAxisLabelEventArgs e)
        {
            int tmpWidth;
            Steema.TeeChart.Axis axis = sender as Steema.TeeChart.Axis;
            if (axis.IsDateTime)
            {
                if ((e.Series != null) && (e.ValueIndex > -1))
                {
                    if (e.Series.FirstVisibleIndex == e.ValueIndex)
                    {
                        e.LabelText = DateTime.FromOADate(e.Series.XValues[e.ValueIndex]).ToString(axis.Labels.DateTimeFormat);
                        ant = e.ValueIndex;
                        tmpWidth = (int)tChart1.Graphics3D.TextWidth(e.LabelText);

                        if (axis.Horizontal)
                            if (axis.OtherSide) maxLabelsWidthTop = tmpWidth;
                            else maxLabelsWidthBottom = tmpWidth;
                        else
                            if (axis.OtherSide) maxLabelsWidthRight = tmpWidth;
                            else maxLabelsWidthLeft = tmpWidth;
                        
                    }
                    else if ((ant != -1) && (e.Series.XValues[ant] + axis.Increment <= e.Series.XValues[e.ValueIndex]))
                    {
                        e.LabelText = DateTime.FromOADate(e.Series.XValues[e.ValueIndex]).ToString(axis.Labels.DateTimeFormat);
                        ant = e.ValueIndex;
                        tmpWidth = (int)tChart1.Graphics3D.TextWidth(e.LabelText);

                        if (maxLabelsWidthBottom < tmpWidth)
                            if (axis.Horizontal)
                                if (axis.OtherSide) maxLabelsWidthTop = tmpWidth;
                                else maxLabelsWidthBottom = tmpWidth;
                            else
                                if (axis.OtherSide) maxLabelsWidthRight = tmpWidth;
                                else maxLabelsWidthLeft = tmpWidth;
                    }
                }
            }
        }

Note that in this example we are formatting the labels to always show the XValue. You may want to change it when your axis is vertical and maybe also the condition "if ((e.Series != null) && (e.ValueIndex > -1))". But I'm not sure if you want your vertical axes labels to be drawn in the points or not.

The following code correctly aligns the labels, the dates are added to the chart as DOUBLE, all chart properties functionality works correctly, i.e. label formats, increments etc. resizing the window has no detrimental effect... so here all is well.

Yet the following doesn't, same as previous chart and example except using a bar series, so here is evidence that there is something different between bar and line.

The explanation is that a point in the Bar series is quite wider than the Line series points. Try the following in your firs example:

Code: Select all

line1.Pointer.Visible = true;
line1.Pointer.HorizSize = 30

Or the following in the second:

Code: Select all

bar1.CustomBarWidth = 50

going back to the line example, if you change it to add the X value as a date it doesn't correctly align, so here is evidence that there is something wrong with the way labels are aligned when they are added as date time.

This is again because adding points from DateTime.Now gives a double result with coma. Try using DateTime.Today instead of DateTime.Now

As Christopher suggested, all the explanations and evidences are in the source code so please, use the reflector tool to see how the labels are drawn in the same way for Bar and Line series.

[Captell]

Thanks for your reply Yeray,
I'll give this a try

When formatting the labels the margins aren't calculated internally so you'll have to calculate them manually. I've made a quite generic example to calculate the margins:

I think I'm pretty much at the end of this process now, if I can't get it to label correctly with your latest suggestion I'm going to give up and look else where. I think getting labels to correctly align with their respective bars or points is such a primary requirement of any charting component, it just seems rediculous to me that I need to go through all the extra coding to get it to work. Looking back over this topic there seems to me so many variations that it is vitrually impossible for me to code for them all in a reasonable time frame. I would need to code differently for different series types for vertical and horizontal axis and then I'd need someway to cater for the different types of data my users want to plot, all to get the labels to align. You say I should use the reflector tool to understand how your code works, but do you reallly think I should have to. I purchased this component to provide charting capabilities to my product, so that I wouldn't have to write my own charting component, it does this quite well with this one exception but this exception is becomming such an issue with my users. A charting tool that mislables the bars is simply not functioning correctly.

Can you not see my difficulty?

[Yeray]

Hi Captell,

We appreciate very much your feedback. The conversation we've had has highlighted what we think could be a very valid feature request that would be a new AxisLabelStyle that would show the labels only where there is a point, like Text style but showing the value in the axis (TF02015095).

In the meanwhile, I suggest you to use the proposed workaround and, if you find any problem with it, please don't hesitate to let us know.

[Yeray]

Hi Captell,

While we study the convenience of this new property, you may be interested in trying another possibility:

Code: Select all

        private void InitializeChart()
        {
            Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);

            bar1.Marks.Style = Steema.TeeChart.Styles.MarksStyles.XValue;
            tChart1.Axes.Bottom.Labels.Angle = 90;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM dd";
            tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneDay);
            tChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.Mark;

            Random rnd = new Random();
            DateTime date = DateTime.Now;
            for (var i = 0; i < 10; i++)
                bar1.Add(date.AddDays(i), rnd.Next(100));

            bar1.XValues.DateTime = true;
        }

Using MarksStyles.XValue and AxisLabelStyle.Mark aligns the axis labels with the bars but, of course forces you to show the same in the points marks and in the axis labels (or to hide the points marks).

[Captell]

Thanks for this,
It's at least a workaround I can tell my users about.

Essentially it seems that if the bottom axis Style is set to "Mark" and the series "Marks" style is set to "X value" then the bottom labels correctly align with the bars. It does mean that the user cant use the marks though but I think this will be ok until you guys come up with a better solution.

Thanks again.... looking forward to seeing a nice fix for this one in a not too distant release.

[Yeray]

Hi Captell,

We've added a new AxisLabelStyle, named PointValue meaning mandatory ValueList value displaying on the axis which is associated with the notMandatory ValueList (notMandatory is XValues in Bar or Points Series and is associated with Bottom Axis by default).
So the following can be done (also through the editor):

Code: Select all

        private Steema.TeeChart.Styles.Bar series;
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;

            series = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            series.XValues.DateTime = true;

            Random rnd = new Random();
            DateTime date = DateTime.Parse("14/09/2010 15:00");
            for (int i = 0; i < 8; i++)
            {
                series.Add(date.AddDays(i), rnd.Next());
            }

            tChart1.Axes.Bottom.Labels.Angle = 90;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "dd/MM/yyyy HH:mm";
            tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneDay);

            tChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.PointValue;
        }

Chart1.png (35.78 KiB) Viewed 78538 times

[Captell]

This looks good, I'm looking forward to having a "play", when will the new build be available?

[Yeray]

Hi Captell,

when will the new build be available?

We hope in about a month.

[UserLS]

Ok, this is just as easy as:

Code: Select all

            _testChart.Clear();
            var bar = new Bar(_testChart.Chart);
            _testChart.Axes.Bottom.Labels.Angle = 90;
            _testChart.Axes.Bottom.Labels.Separation = 1;
            _testChart.Axes.Bottom.Increment = 0;
            _testChart.Axes.Bottom.Automatic = true;
            for (var i = 0; i <= 10; i++)
                bar.Add(DateTime.Now.AddYears(i), i);

Now when you show this chart on your form, bring your chart editor and just change the bottom axis increment to your predefined option "One Year". Now I expect to see the current month in the labels - but some other month is shown. You can change the code to add months instead of the years, change increment to be "One Month" and try to see the current date being in your labels. It never works for me... ever