Bar Graph label wrapping

[mikethelad]

On the sample bar graph, bars 3 and 7 have no labels, the labels are being added correctly,as if I shorten the text hey appear, it is trying to add Aug '10 (N) and Aug '11 (N)

I am guessing the sofware is thinking the will not fit, is there a way of making it wrap?

[Narcís]

Hi mikethelad,

Could you please try my suggestion here?

Thanks in advance.

[Sandra]

Hello mikethelad,

I have made a simple code with last version, and I can not reproduce this problem using the code:

Code: Select all

    Steema.TeeChart.Styles.Line line;
    Steema.TeeChart.Styles.Bar bar1;
    Steema.TeeChart.Functions.ExpAverage average1;
    DateTime dt = DateTime.Now;

    private void InitializeChart()
    {
        tChart1.Aspect.View3D = false;
        //tChart1.Dock = DockStyle.Fill;
        line = new Steema.TeeChart.Styles.Line(tChart1);
        bar1 = new Steema.TeeChart.Styles.Bar(tChart1);
        average1 = new Steema.TeeChart.Functions.ExpAverage();
        bar1.XValues.DateTime = true;
        bar1.Marks.Visible = false;
        Random rnd = new Random();
        for (int i = 0; i < 10; i++)
        {
            bar1.Add(dt, rnd.Next(100));
            dt = dt.AddMonths(1);
        }
        bar1.Color = Color.Green;
        bar1.Pen.Color = Color.Green;
        line.DataSource = bar1;
        line.Function = average1;
        line.Color = Color.Gold;
        line.LinePen.Width = 3;
        tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM-dd";
        tChart1.Axes.Left.Labels.Style = Steema.TeeChart.AxisLabelStyle.PointValue;
        for (int i = 0; i < bar1.Count; i++)
        {
            if (i == 0)
            {
                tChart1.Axes.Bottom.Labels.Items.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd" + "(N)"));
            }
            else
            {
                tChart1.Axes.Bottom.Labels.Items.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd"));
            }
        }

Can you please, modify my code because we can reproduce your problem here?

Thanks,

[mikethelad]

I copied your code into a test program, this did not wrap, if I had extra text next to dates which I need sometimes, again it does not wrap but overlaps, I need to wrap to another line below

[Sandra]

Hello mikethelad,

Ok. I have modified the code and I suggest you do something as next:

Code: Select all

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

        Steema.TeeChart.Styles.Line line;
        Steema.TeeChart.Styles.Bar bar1;
        Steema.TeeChart.Functions.ExpAverage average1;
        DateTime dt = DateTime.Now;
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            tChart1.Dock = DockStyle.Fill;
            line = new Steema.TeeChart.Styles.Line(tChart1.Chart);
            bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            average1 = new Steema.TeeChart.Functions.ExpAverage();
            bar1.XValues.DateTime = true;
            bar1.Marks.Visible = false;
            Random rnd = new Random();
            for (int i = 0; i < 10; i++)
            {
                if(i==0)
                {
                bar1.Add(dt, rnd.Next(100),dt.ToString("MMM" + "dd")+ " (N)");
                }
                else if(i!=3 && i!=7)
                {
                     bar1.Add(dt, rnd.Next(100),dt.ToString("MMM" + "dd")+ " index:"+i.ToString());
                }
                else
                {
                    bar1.Add(dt, rnd.Next(100), dt.ToString("MMM"+"dd")+" (N)");
                }
                dt = dt.AddMonths(1);
            }
            bar1.Color = Color.Green;
            bar1.Pen.Color = Color.Green;
            line.DataSource = bar1;
            line.Function = average1;
            line.Color = Color.Gold;
            line.LinePen.Width = 3;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM-dd";

            WrapLabels(bar1);
        }
        private void WrapLabels(Steema.TeeChart.Styles.Bar bar)
        {
            int maxHeight = 10;
            int tmpHeight;
            for (int i = 0; i < bar1.Count; i++)
            {
                bar1.Labels[i] = bar1.Labels[i].Replace(" ", "\n");
                tmpHeight = (int)tChart1.Graphics3D.TextHeight(bar1.Labels[i]);
                if (tmpHeight > maxHeight) maxHeight = tmpHeight;
            }
        }

Can you please, tell us if previous code works in your end?


Thanks,

[mikethelad]

Can't get this to work, I see what you are trying to do, you set

if (tmpHeight > maxHeight) maxHeight = tmpHeight;

Does something not need to set a steema object ot the maxHeight?

[Sandra]

Hello mikethelad,

Sorry, I have forgotten to remove lines of code, aren't useable. Therefore, next line of code must be remove

Code: Select all

if (tmpHeight > maxHeight) maxHeight = tmpHeight;

About your problem, you have some options to achieve solve your problem:

First, is a solution that suggest to you Narcís in this thread, concretely you can find solution in next link. Are you looking it?

If previous solution don't help you, you can use custom labels as I suggest in my first answer. It option overlap the labels and to prevent it you can do something as next code:

Code: Select all

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

        Steema.TeeChart.Styles.Line line;
        Steema.TeeChart.Styles.Bar bar1;
        Steema.TeeChart.Functions.ExpAverage average1;
        DateTime dt = DateTime.Now;
        Steema.TeeChart.AxisLabelsItems axislabelItems;
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            tChart1.Dock = DockStyle.Fill;
            line = new Steema.TeeChart.Styles.Line(tChart1.Chart);
            bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            average1 = new Steema.TeeChart.Functions.ExpAverage();
            bar1.XValues.DateTime = true;
            bar1.Marks.Visible = false;
            Random rnd = new Random();
            for (int i = 0; i < 10; i++)
            {
                bar1.Add(dt, rnd.Next(100));
                dt = dt.AddMonths(1);
            }
            bar1.Color = Color.Green;
            bar1.Pen.Color = Color.Green;
            line.DataSource = bar1;
            line.Function = average1;
            line.Color = Color.Gold;
            line.LinePen.Width = 3;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM-dd";
            AddCustomLabels();
            tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
            tChart1.UndoneZoom += new EventHandler(tChart1_UndoneZoom);
            tChart1.Draw();
        }

        void tChart1_UndoneZoom(object sender, EventArgs e)
        {
                tChart1.Axes.Bottom.Labels.Items.Clear();
                for (int i = 0; i < bar1.Count; i++)
                {
                    tChart1.Axes.Bottom.Labels.Items.Add(axislabelItems[i]);
                }
                tChart1.Draw();
   
        }
        private void WrapLabels(Steema.TeeChart.Styles.Bar bar)
        {
            for (int i = 0; i < bar1.Count; i++)
            {
                tChart1.Axes.Bottom.Labels.Items[i].Text = tChart1.Axes.Bottom.Labels.Items[i].Text.Replace(" ", "\n");
            }
        }
        void tChart1_AfterDraw(object sender, Graphics3D g)
        {
            Steema.TeeChart.AxisLabelItem CurrentLabel, PreviousLabel;

            for (int i = 1; i <= tChart1.Axes.Bottom.Labels.Items.Count-1 ; ++i)
            {
                CurrentLabel = tChart1.Axes.Bottom.Labels.Items[i];
                PreviousLabel = tChart1.Axes.Bottom.Labels.Items[i - 1];
                if (CurrentLabel.Left + CurrentLabel.Text.Length== PreviousLabel.Right)
                {
                    CurrentLabel.Visible = false;
                }
            }
            WrapLabels(bar1);
        }
        private void AddCustomLabels()
        {
            tChart1.Axes.Bottom.Labels.Items.Clear();
            axislabelItems = new AxisLabelsItems(tChart1.Axes.Bottom);
            for(int i=0; i<bar1.Count; i++)
            {
                if(i==0)
                {
                  tChart1.Axes.Bottom.Labels.Items.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd" + " (N)"));
                  axislabelItems.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd" + " (N)"));
                }
                else if(i!=3 && i!=7)
                {
                    tChart1.Axes.Bottom.Labels.Items.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd"));
                    axislabelItems.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd"));
                }
                else
                {
                    tChart1.Axes.Bottom.Labels.Items.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd" + " (N)"));
                    axislabelItems.Add(bar1.XValues[i], DateTime.FromOADate(bar1.XValues[i]).ToString("MMM" + "dd" + " (N)"));
                }
            }
          
        }

Is possible you can adjust the conditions of previous code if you want it works exactly in your end. Moreover, you can consult the next thread where suggest many ways to solve the problem of overlap with custom labels.

My last suggestion is use my previous code where I have added the labels directly in the Series. I have added my code modified to work in correct way:

Code: Select all

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

        Steema.TeeChart.Styles.Line line;
        Steema.TeeChart.Styles.Bar bar1;
        Steema.TeeChart.Functions.ExpAverage average1;
        DateTime dt = DateTime.Now;
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            tChart1.Dock = DockStyle.Fill;
            line = new Steema.TeeChart.Styles.Line(tChart1.Chart);
            bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            average1 = new Steema.TeeChart.Functions.ExpAverage();
            bar1.XValues.DateTime = true;
            bar1.Marks.Visible = false;
            Random rnd = new Random();
            for (int i = 0; i < 10; i++)
            {
                if (i == 0)
                {
                    bar1.Add(dt, rnd.Next(100), dt.ToString("MMM" + "dd") + " (N)");
                }
                else if (i != 3 && i != 7)
                {
                    bar1.Add(dt, rnd.Next(100), dt.ToString("MMM" + "dd") + " index:" + i.ToString());
                }
                else
                {
                    bar1.Add(dt, rnd.Next(100), dt.ToString("MMM" + "dd") + " (N)");
                }
                dt = dt.AddMonths(1);
            }
            bar1.Color = Color.Green;
            bar1.Pen.Color = Color.Green;
            line.DataSource = bar1;
            line.Function = average1;
            line.Color = Color.Gold;
            line.LinePen.Width = 3;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM-dd";

            WrapLabels(bar1);
        }
        private void WrapLabels(Steema.TeeChart.Styles.Bar bar)
        {
            for (int i = 0; i < bar1.Count; i++)
            {
                bar1.Labels[i] = bar1.Labels[i].Replace(" ", "\n");
            }
        }

Can you please, check if previous codes work as you want?

If you have any problems please let me know.

Thanks,

[mikethelad]

Getting there thanks, see new sample, how can I move the

WebChart1.Chart.Axes.Bottom.Title.Text = "Problem score (lower problem scores reflect better performance)";

Further down

[Sandra]

Hello mikethelad,

I am afraid the titles of axes can not move independently. For this reason, I suggest you draw directly in the canvas the text of titles of axes as do in next sample of code:

Code: Select all

    Steema.TeeChart.Chart tChart1;

    protected void Page_Load(object sender, EventArgs e)
    {
        InitializeChart();
    }

    private void InitializeChart()
    {
        Steema.TeeChart.Styles.Line line1 = new Line(WebChart3.Chart);
        tChart1 = WebChart3.Chart;
        DateTime dt = DateTime.Now;
        Random rnd = new Random();
        for (int i = 0; i < 10; i  )
        {
            line1.Add(dt, rnd.Next(100), dt.ToString("MMM -"  "dd-" "\nyyyy"));
            dt = dt.AddMonths(1);
        }
        WebChart3.Chart.Axes.Bottom.Labels.DateTimeFormat = "MMM-dd-yyyy";
       // WebChart3.Chart.Axes.Bottom.Labels.Angle = 90;
        WebChart3.Chart.Axes.Bottom.Labels.Style = AxisLabelStyle.Text;
 
        WebChart3.Chart.Panel.MarginUnits = PanelMarginUnits.Pixels;
        WebChart3.Chart.Panel.MarginBottom = 50;

        WebChart3.AfterDraw  = new PaintChartEventHandler(WebChart3_AfterDraw);

    }

    void WebChart3_AfterDraw(object sender, Graphics3D g)
    {
        g.TextAlign = StringAlignment.Near;
        g.TextOut((int)tChart1.Axes.Bottom.IStartPos, (int)tChart1.Axes.Left.IEndPos   (int)tChart1.Panel.MarginBottom, "Problem score (lower problem scores reflect better performance)");
    }

Can you tell us if previous code works as you want?

Thanks,