Chart is drawn outside left bound

[BeijerElectronics]

We use your TChart Control as a light weight control, meaning we don't add it to the Forms.Controls collection but instead manually call the Charts draw method in OnPaint.
We have attached a sample project illustrating the issue where the Left y axis value texts are drawn outside the Charts bounds when the Chart.Panel is set to Visible = false. This is a requirement since we draw it transparent in our own background.

Do you have a fix or suitable work around for this?
Thanks in advance

[Sandra]

Hello BeijerElectronics,

The problem is that you draw the image in position (0,0) and if axes text is large text isn't visible. I recommend change the position of your bounds rect as do in next code:

Code: Select all

 private Bitmap m_ChartBitmap;
        private TChart m_Chart;

        public Form1()
        {
            InitializeComponent();
            
            m_Chart = new TChart();
        
            BackColor = Color.Orange;
            m_Chart.Width = 200;
            m_Chart.Height = 200;

            m_Chart.Panel.MarginLeft = 10;
            m_Chart.Left = 50;
            m_Chart.Top = 50;
            m_Chart.Panel.Transparent= true;
            m_Chart.Walls.Back.Visible = false;            
            
            Bar bar = new Bar();
            bar.Add(new double[] { 950 });
           // bar.Marks.Visible = false; This solves the drawing issue, but it's no solution since we want the value tooltips visible.
            m_Chart.Series.Add(bar);
            // Setting Automatic to True also draws the chart outside of its bounds.
            m_Chart.Axes.Left.Automatic = false;
            m_Chart.Axes.Left.Maximum = 950;
            m_ChartBitmap = new Bitmap(m_Chart.Width, m_Chart.Height);
    
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            using (Graphics graphics = Graphics.FromImage(m_ChartBitmap))
            {
                ConfigureGraphics(graphics);

                graphics.Clear(Color.Fuchsia);

                m_Chart.Draw(graphics);
            }

            using (ImageAttributes attributes = new ImageAttributes())
            {
                attributes.SetColorKey(Color.Fuchsia, Color.Fuchsia);
                Rectangle bounds = new Rectangle(10, 10, m_Chart.Width, m_Chart.Height);
                e.Graphics.DrawImage(m_ChartBitmap, bounds, 0, 0, m_Chart.Width, m_Chart.Height, GraphicsUnit.Pixel, attributes);
                attributes.ClearColorKey();
            }

            base.OnPaint(e);
        }

        public static void ConfigureGraphics(Graphics graphics)
        {
            if (Environment.OSVersion.Platform != PlatformID.WinCE)
            {
                PropertyInfo propertyInfo = graphics.GetType().GetProperty("TextRenderingHint");
                if (propertyInfo != null)
                {
                    propertyInfo.SetValue(graphics, 1, null);
                }
            }
        }

Can you tell if previous code solves your problem?

I hope will helps.
Thanks,

[BeijerElectronics]

Attached is a small project which simulates the issue. Setting the Panels Transparent property to true, rather than the Visibility to false solved the issue where the control was drawn outside of its left most bounds. Setting Margin helped a bit together with the Units set to pixels rather than percent since we want a fixed margin rather than a dynamic margin. The problem we now have is that the margin is still not always fixed at the margin specified but seems to be relative to some virtual left axis maximum value as the sample illustrates.

What we need is for the control to always be rendered within its bound at a fixed top left margin, no matter what.

The problem occurs easily in the sample in these cases

* Axis is automatic and the bar value is increased from less than 1000 to more than 1000.
* Axis is manual and the Maximum Axis value is increased from less than 1000 to more than 1000.

Is there some way to get the chart drawn at an exact margin from the left corner?

Thanks in advance

[Sandra]

Hello BeijerElectronics,

I couldn't reproduce your problem. Can you attach an image where appears your problem and indicate, step to step how we can reproduce it. On the other hand, can you tell us which version of TeeChart are you using?

Thanks,

[BeijerElectronics]

Hello Sandra,

Did you run the sample I sent with the last post? It has 6 buttons which clearly illustrates the issue. You need to push the "Add 10 to the bar" button or the "Increase Left Axis with 10" button.

Attached are two images which visualizes the issue. As you can see, the space from the Left corner is increased in the After image.
We want the spacing from the Left corner fixed.

Thanks in advance

[Sandra]

Hello BeijerElectronics,

Sorry for the delay. Ok I check your project and I can not reproduce your problem. Please can you tell us,in which emulator to run the project, because we can reproduce your problem using all of emulator of VS2008? Moreover if you can tell me step to step how you reproduce it, would be very helpful.

Thanks,

[BeijerElectronics]

Hello Sandra,

You can just run the executable that is created when the solution is built. Do not run it an emulator, simply execute it in Windows 7.

Thanks in advance.

[Sandra]

Hello BeijerElectronics,

Ok. In your case I recommend you fix the position of LeftAxes doing something as next code:

Code: Select all

public Form1()
        {
            InitializeComponent();
            InitializeChart();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            customLeft.SetMinMax(8.3, 10.5);
            customLeft.Increment = 0.5;
        }
        private void button2_Click(object sender, EventArgs e)
        {
            customLeft.SetMinMax(10, 1000);
            customLeft.Increment = 10;
        }

        private Axis customLeft;

        private void InitializeChart()
        {
            tChart1.Series.RemoveAllSeries();
            tChart1.Series.Add(new Steema.TeeChart.Styles.FastLine());
            Random rnd = new Random();
            for (int i = 0; i < 20; i  )
            {
                if (i > 10)
                {
                    tChart1[0].Add(i, rnd.Next(10));
                }
                else
                {
                    tChart1[0].Add(i, rnd.Next(1000));
                }
            }

            customLeft = new Axis(false, false, tChart1.Chart);
            tChart1.Axes.Custom.Add(customLeft);
            tChart1[0].CustomVertAxis = customLeft;

            customLeft.Labels.Font.Size = 11;
            customLeft.SetMinMax(0, 1000);
            tChart1.Panel.MarginUnits = Steema.TeeChart.PanelMarginUnits.Pixels;
            tChart1.Panel.MarginLeft = 50;
        }

Can you tell us if previous code where are using a Custom Axes works as you want?
I hope will helps.

Thanks,

[BeijerElectronics]

Hello Sandra,

The issue seems to not exist for the FastLine so your code does work as expected. The axis was rendered at a fixed margin even without the custom axis.

However, the Bar style still has the issue that, when the value goes from something below 1000 to something above 1000 (I tried for instance 995 and 1020) the left margin is moved.
Setting a custom Axis did not resolve the issue.
Setting the Min and Max to fixed values did not resolve the issue.
Setting the Increment did not resolve the issue.

Please try this with fixed values instead of random numbers, since it is much harder to repeat a test case with random numbers.

[Sandra]

Hello BeijerElectronics,

Ok. Your problem doesn't appear when I check next code, using PocketPC emulador.

Code: Select all

    private readonly Bitmap m_ChartBitmap;
        private Axis customLeft;
        private readonly TChart m_Chart;

        public Form1()
        {
            InitializeComponent();
            m_Chart = new TChart();
            m_Chart.Width = 300;
            m_Chart.Height = 200;
            m_Chart.Series.RemoveAllSeries();
            m_Chart.Series.Add(new Steema.TeeChart.Styles.Bar());
            Random rnd = new Random();
            for (int i = 0; i < 20; i++)
            {
                if (i > 10)
                {
                    m_Chart[0].Add(i, rnd.Next(10));
                }
                else
                {
                    m_Chart[0].Add(i, rnd.Next(1000));
                }
            }

            customLeft = new Axis(false, false, m_Chart.Chart);
            m_Chart.Axes.Custom.Add(customLeft);
            m_Chart[0].CustomVertAxis = customLeft;
            m_Chart[0].VertAxis = VerticalAxis.Custom;
      
            customLeft.SetMinMax(0, 1000);
            m_Chart.Panel.MarginUnits = Steema.TeeChart.PanelMarginUnits.Pixels;
            m_Chart.Panel.MarginLeft = 50;
            m_ChartBitmap = new Bitmap(m_Chart.Width, m_Chart.Height);

        }
        private void button1_Click(object sender, EventArgs e)
        {
            customLeft.SetMinMax(8.3, 10.5);
            customLeft.Increment = 0.5;
        }
        private void button2_Click(object sender, EventArgs e)
        {
            customLeft.SetMinMax(10, 1000);
            customLeft.Increment = 10;
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            using (Graphics graphics = Graphics.FromImage(m_ChartBitmap))
            {
                ConfigureGraphics(graphics);

                graphics.Clear(Color.Fuchsia);
                // this is where the exception is thrown
                m_Chart.Draw(graphics);
            }
            using (ImageAttributes attributes = new ImageAttributes())
            {
                attributes.SetColorKey(Color.Fuchsia, Color.Fuchsia);
                Rectangle bounds = new Rectangle(10, 10, m_Chart.Width, m_Chart.Height);
                e.Graphics.DrawImage(m_ChartBitmap, bounds, 0, 0, m_Chart.Width, m_Chart.Height, GraphicsUnit.Pixel, attributes);
                attributes.ClearColorKey();
            }

            base.OnPaint(e);
        }

        public static void ConfigureGraphics(Graphics graphics)
        {
            if (Environment.OSVersion.Platform != PlatformID.WinCE)
            {
                PropertyInfo propertyInfo = graphics.GetType().GetProperty("TextRenderingHint");
                if (propertyInfo != null)
                {
                    propertyInfo.SetValue(graphics, 1, null);
                }
            }
        }

Can you please check and confirm us, if previous code works as you expect in PocketPC (device o emulador), because the assembly of TeeChartPocket.dll is specific to use in the emulators of PocketPC or in PocketPC(device) and if you use it directly in the PC is possible it doesn't run fine, because, in PC you need use assembly TeeChart.dll.

Thanks,

[BeijerElectronics]

Hello Sandra,

The problem is slightly modified when using the custom Axis.

When using the following code the Axis is drawn at a fixed right position. We need the left position to be fixed.
Is it possible to modify the following code in order to get the left position of the axis to be locked? That is, the axis should be at a fixed margin from the left boundary at all times.

Small value.png (16.14 KiB) Viewed 12875 times

big value.png (22.83 KiB) Viewed 12884 times

Code: Select all

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Reflection;
using System.Windows.Forms;
using Steema.TeeChart;
using Steema.TeeChart.Pocket;
using Steema.TeeChart.Styles;

namespace ChartTestApp
{
    public partial class Form1 : Form
    {
        private readonly Bitmap m_ChartBitmap;
        private readonly TChart m_Chart;
        private Axis customLeft;

        public Form1()
        {
            InitializeComponent();
            BackColor = Color.White;
            m_Chart = new TChart();
            m_Chart.Width = 500;
            m_Chart.Height = 500;

            m_Chart.Panel.Transparent = true;
            m_Chart.Panel.MarginUnits = PanelMarginUnits.Pixels;
            m_Chart.Panel.MarginLeft = 100;

            m_Chart.Walls.Back.Visible = false;

            m_ChartBitmap = new Bitmap(m_Chart.Width, m_Chart.Height);

            InitializeChart();
        }

        private void InitializeChart()
        {
            Bar newBar = new Bar();
            newBar.Add(new double[] { 500, 990 });
            m_Chart.Series.Add(newBar);

            customLeft = new Axis(false, false, m_Chart.Chart);
            customLeft.Automatic = true;
            m_Chart.Axes.Custom.Add(customLeft);
            m_Chart[0].CustomVertAxis = customLeft;
            m_Chart[0].VertAxis = VerticalAxis.Custom;
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            using (Graphics graphics = Graphics.FromImage(m_ChartBitmap))
            {
                ConfigureGraphics(graphics);

                graphics.Clear(Color.Fuchsia);

                m_Chart.Draw(graphics);
            }

            using (ImageAttributes attributes = new ImageAttributes())
            {
                attributes.SetColorKey(Color.Fuchsia, Color.Fuchsia);
                Rectangle bounds = new Rectangle(0, 0, m_Chart.Width, m_Chart.Height);
                e.Graphics.DrawImage(m_ChartBitmap, bounds, 0, 0, m_Chart.Width, m_Chart.Height, GraphicsUnit.Pixel, attributes);
                attributes.ClearColorKey();
            }
            
            base.OnPaint(e);
        }

        public static void ConfigureGraphics(Graphics graphics)
        {
            if (Environment.OSVersion.Platform != PlatformID.WinCE)
            {
                PropertyInfo propertyInfo = graphics.GetType().GetProperty("TextRenderingHint");
                if (propertyInfo != null)
                {
                    propertyInfo.SetValue(graphics, 1, null);
                }
            }
        }

        private void RecreateSerie(int value)
        {
            m_Chart.Series.RemoveAllSeries();
            Bar newBar = new Bar();
            newBar.Add(new double[] { 500, value });
            m_Chart.Series.Add(newBar);
            m_Chart[0].CustomVertAxis = customLeft;
            Invalidate();
        }

        private void OnButton1Clicked(object sender, EventArgs e)
        {
            RecreateSerie(10203040);
        }

        private void OnButton2Clicked(object sender, EventArgs e)
        {
            RecreateSerie(500);
        }
    }
}

This has been tested on both PC and CE with the same behavior.
Thanks in advance

[Sandra]

Hello BeijerElectronics,

Seems I achieve solve your problem, fixing the Right Margin and using Legend Custom position. Please, tell us if next code works as you expect?

Code: Select all

    public partial class Form1 : Form
    {
        private readonly Bitmap m_ChartBitmap;
        private readonly TChart m_Chart;
        private Axis customLeft;

        public Form1()
        {
            InitializeComponent();
            m_Chart = new TChart();
            m_Chart.Width = 500;
            m_Chart.Height = 400;
            button2.Top = m_Chart.Bottom + 10;
            button1.Top = m_Chart.Bottom + 10;
            m_Chart.Panel.MarginUnits = PanelMarginUnits.Pixels;
            m_Chart.Panel.MarginLeft = 100;
            m_Chart.Panel.MarginRight = 150;

            //Legend CustomPosition.
            m_Chart.Legend.CustomPosition = true;
            m_Chart.Legend.Left = m_Chart.Right-140;
            m_Chart.Legend.Top = 10;
            m_ChartBitmap = new Bitmap(m_Chart.Width, m_Chart.Height);
            InitializeChart();
        }

        private void InitializeChart()
        {
            Bar newBar = new Bar();
            newBar.Add(new double[] { 500, 990 });
            m_Chart.Series.Add(newBar);

            customLeft = new Axis(false, false, m_Chart.Chart);
            m_Chart.Axes.Custom.Add(customLeft);
            m_Chart[0].CustomVertAxis = customLeft;
            m_Chart[0].VertAxis = VerticalAxis.Custom;
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            using (Graphics graphics = Graphics.FromImage(m_ChartBitmap))
            {
                ConfigureGraphics(graphics);

                graphics.Clear(Color.Fuchsia);

                m_Chart.Draw(graphics);
            }

            using (ImageAttributes attributes = new ImageAttributes())
            {
                attributes.SetColorKey(Color.Fuchsia, Color.Fuchsia);
                Rectangle bounds = new Rectangle(10, 10, m_Chart.Width, m_Chart.Height);
                e.Graphics.DrawImage(m_ChartBitmap, bounds, 0, 0, m_Chart.Width, m_Chart.Height, GraphicsUnit.Pixel, attributes);
                attributes.ClearColorKey();
            }

            base.OnPaint(e);
        }

        public static void ConfigureGraphics(Graphics graphics)
        {
            if (Environment.OSVersion.Platform != PlatformID.WinCE)
            {
                PropertyInfo propertyInfo = graphics.GetType().GetProperty("TextRenderingHint");
                if (propertyInfo != null)
                {
                    propertyInfo.SetValue(graphics, 1, null);
                }
            }
        }

        private void RecreateSerie(int value)
        {
            m_Chart.Series.RemoveAllSeries();
            Bar newBar = new Bar();
            newBar.Add(new double[] { 500, value });
            m_Chart.Series.Add(newBar);
            m_Chart[0].CustomVertAxis = customLeft;
            Invalidate();
        }


        private void button2_Click(object sender, EventArgs e)
        {
            RecreateSerie(500);

        }
        private void button1_Click(object sender, EventArgs e)
        {
            RecreateSerie(10203040);
        }

I hope will help.

Thanks,

[BeijerElectronics]

Hello Sandra,

With the code provided, the axis is still not at a fixed left margin.

Current situation

Small value_1.png (9.14 KiB) Viewed 12882 times

big value_1.png (9.41 KiB) Viewed 12882 times

Expected situation

Expected_Small value_1.png (9.32 KiB) Viewed 12886 times

I hope this makes it more clear.
Thanks in advance

[Sandra]

Hello BeijerElectronics,

Finally, I have discovered where there is the problem and to solve it you only need use custom postion of Legend as do in next lines of code and you don't need modify the axes:

Code: Select all

        private readonly Bitmap m_ChartBitmap;
        private readonly TChart m_Chart;
     
        public Form1()
        {
            InitializeComponent();
            m_Chart = new TChart();
            m_Chart.Width = 500;
            m_Chart.Height = 400;
            button2.Top = m_Chart.Bottom + 10;
            button1.Top = m_Chart.Bottom + 10;
            m_Chart.Panel.MarginUnits = PanelMarginUnits.Pixels;
            m_Chart.Panel.MarginLeft = 70;
            m_Chart.Panel.MarginRight = 150;

            //Legend CustomPosition.
            m_Chart.Legend.CustomPosition = true;
            m_Chart.Legend.Left = m_Chart.Right-140;
            m_Chart.Legend.Top = 10;
            m_ChartBitmap = new Bitmap(m_Chart.Width, m_Chart.Height);
            InitializeChart();
        }

        private void InitializeChart()
        {
            Bar newBar = new Bar();
            newBar.Add(new double[] { 500, 990 });
            m_Chart.Series.Add(newBar);
            m_Chart.Invalidate();
         }

        protected override void OnPaint(PaintEventArgs e)
        {
            using (Graphics graphics = Graphics.FromImage(m_ChartBitmap))
            {
                ConfigureGraphics(graphics);

                graphics.Clear(Color.Fuchsia);

                m_Chart.Draw(graphics);
            }

            using (ImageAttributes attributes = new ImageAttributes())
            {
                attributes.SetColorKey(Color.Fuchsia, Color.Fuchsia);
                Rectangle bounds = new Rectangle(10, 10, m_Chart.Width, m_Chart.Height);
                e.Graphics.DrawImage(m_ChartBitmap, bounds, 0, 0, m_Chart.Width, m_Chart.Height, GraphicsUnit.Pixel, attributes);
                attributes.ClearColorKey();
            }

            base.OnPaint(e);
        }

        public static void ConfigureGraphics(Graphics graphics)
        {
            if (Environment.OSVersion.Platform != PlatformID.WinCE)
            {
                PropertyInfo propertyInfo = graphics.GetType().GetProperty("TextRenderingHint");
                if (propertyInfo != null)
                {
                    propertyInfo.SetValue(graphics, 1, null);
                }
            }
        }

        private void RecreateSerie(int value)
        {
            m_Chart.Series.RemoveAllSeries();
            Bar newBar = new Bar();
            newBar.Add(new double[] { 500, value });
            m_Chart.Series.Add(newBar);
            m_Chart.Invalidate();
        }
        private void button2_Click(object sender, EventArgs e)
        {
            RecreateSerie(500);

        }
        private void button1_Click(object sender, EventArgs e)
        {
            RecreateSerie(10203040);
        }

Can you tell if this code solve your problem finally?

I hope will helps and the solution works for you

Thanks,