Areas transparency

[Remeha]

Hi,

I have an application in which the Area Series is behaving strangely. I've spent some time to analyse this strange behavior. You can use the source code below in a standard Windows Forms Application project in Visual Studio 2008.

If you run this code, you will see the problem right away. The area series is transparent. If you zoom in far enough, the transparency will be gone. Also, if you turn on the chart's 3D mode, the transparency is also gone, without having to zoom in.

The TeeChart.dll i am using is version 3.5.3146.24805

If anybody wants the project in a zip file, just let me know

Code: Select all

    public partial class Form1 : Form
    {
        private TChart myChart;
        public Form1()
        {
            InitializeComponent();
            InitializeChart();
            DrawLines();
        }

        private void DrawLines()
        {
            Area area = new Area(myChart.Chart);
            area.UseOrigin = true;
            area.Origin = 10;
            area.Stairs = true;

            Color lineColor = Color.Orange;
            area.AreaLines.Color = lineColor;
            for (int i = 0; i < 400; i++)
            {
                area.Add(i, ((i % 2) * 10) + 25, lineColor);
            }
            area.Add(450, 35, Color.Transparent);
            for (int i = 500; i < 1000; i++)
            {
                area.Add(i, ((i % 2) * 10) + 25, lineColor);
            }

        }

        private void InitializeChart()
        {
            // Set colors and layout
            myChart = new TChart();
            myChart.Dock = DockStyle.Fill;
            
            myChart.Aspect.View3D = false;

            //// Set background
            myChart.Walls.Back.Transparent = false;
            myChart.Walls.Back.Brush.Color = Color.FromArgb(64, 64, 64);
            myChart.Walls.Back.Brush.Gradient.Visible = false;

            //// Set up the bottom Axis
            myChart.Axes.Bottom.Automatic = false;
            myChart.Axes.Bottom.Visible = true;
            myChart.Axes.Bottom.Minimum = 0;
            myChart.Axes.Bottom.Maximum = 1000;

            myChart.Axes.Left.Automatic = false;
            myChart.Axes.Left.Horizontal = false;
            myChart.Axes.Left.Minimum = -1;
            myChart.Axes.Left.Maximum = 101;

            this.Controls.Add(myChart);
        }
    }

kind regards Pepijn

[Narcís]

Hi Pepijn,

Implementing DrawLines() method as shown below solves the problem here. Could you please check if it works fine at your end?

Code: Select all

		private void DrawLines()
		{
			Steema.TeeChart.Styles.Area area = new Steema.TeeChart.Styles.Area(myChart.Chart);
			area.UseOrigin = true;
			area.Origin = 10;
			area.Stairs = true;

			Color lineColor = Color.Orange;
			area.AreaLines.Color = lineColor;
			for (int i = 0; i < 400; i++)
			{
				area.Add(i, ((i % 2) * 10) + 25, lineColor);
			}
			area.Add(450, 35, Color.Transparent);
			for (int i = 500; i < 1000; i++)
			{
				area.Add(i, ((i % 2) * 10) + 25, lineColor);
			}

			area.AreaLines.Transparency = 50;
			area.AreaBrush.Visible = true;
			area.AreaBrush.Color = lineColor;
			area.AreaBrush.Transparency = 50;
		}

Thanks in advance.

[Remeha]

Hi Narcís,

Unfortunately, i am still experiencing the same problem. I have tried using these versions of the TeeChart.dll file:
3.5.3146.24806
3.5.3146.24805

(It is important for me that the application I am developing runs in .Net 2.0. That’s why I’ve tried using the two different versions of TeeChart.dll, just to be sure)

I have also tried changing the values of the Transparency properties you mentioned in the last part of DrawLines(), but still I cannot seem to get a solid colored Area…

Thank you for your continued support! I hope to hear from you again soon

Kind regards, Pepijn

[Narcís]

Hi Pepijn,

This works fine for me here using the code you posted with my modifications. Could you please send us a simple example project we can run "as-is" and describe the exact steps we should follow to reproduce the issue here?

You can either post your files at news://www.steema.net/steema.public.attachments newsgroup or at our upload page.

Thanks in advance.

[Remeha]

I have uploaded the file "TeeChartAreaProblem.rar"

[Narcís]

Hi Pepijn,

Thanks for the example project. It still works fine for me here either using latest maintenance release available at the client area or using our current v3 sources. When I zoom the series I can still see axes grid lines meaning series is transparent.

Have you checked that your project's TeeChart assembly reference was updated correctly to the last version available?

Thanks in advance.

[Remeha]

Hello again,

I have uploaded "TeeChartAreaProblem_2.rar"

My goal in this application is to get the area series not transparent at all. I want the Area to be solid as when i zoom in really close.

In DrawLines()
change this line:

Code: Select all

area.Add(450, 35, Color.Transparent);

to:

Code: Select all

area.Add(450, 35, lineColor);

and run.

If i run this, i see a non-transparent part of Area in between two transparent parts, but i don't understand why.

[Remeha]

Hi,

I believe i have found the solution for my problem. Though i am still not sure of Area.AreaLines' behaviour, this is what i did with DrawLines():

Code: Select all

private void DrawLines()
{
    Steema.TeeChart.Styles.Area area = new Steema.TeeChart.Styles.Area(myChart.Chart);
    area.UseOrigin = true;
    area.Origin = 10;
    area.Stairs = true;

    Color lineColor = Color.Orange;
    area.AreaLines.Visible = false;
    for (int i = 0; i < 400; i++)
    {
        area.Add(i, ((i % 2) * 10) + 25, lineColor);
    }
    area.Add(450, 35, Color.Transparent);
    for (int i = 500; i < 1000; i++)
    {
        area.Add(i, ((i % 2) * 10) + 25, lineColor);
    }
}

For me, this line made the difference:

Code: Select all

  area.AreaLines.Visible = false;

I'm glad to have solved my problem, though i am still scratching my head at this 'AreaLines' property...

Thank you for your time and help!

[Narcís]

Hi Pepijn,

I'm glad to hear you solved the problem.

The AreaLines property indicates the kind of pen used to draw vertical lines across the Area region. By default AreaLines .Visible is false, so you need first to set it to true. You can control the Area Brush style by using the AreaBrush property.

[Remeha]

There could still be a problem, to which i found the workaround.

I suspect setting the Area's Stairs property to true suddenly turns on the AreaLines' visibility. Is that possible?

If i'm not making much sense, try using the latest code for DrawLines() in these posts. Comment out this line:

Code: Select all

area.AreaLines.Visible = false; 

And run it with area.Stairs set to true and then run it without setting area.Stairs at all.

i hope this was helpful.

Kind regards, Pepijn

[Narcís]

Hi Pepijn,

No, it's just that by default AreaLines are visible. If you use DrawLines() below you'll see that even setting Stairs property to true AreaLines are not visible. You can easily see this adding a ChartController to your WinForm, associating it to your chart and press the "edit" button when running the application. If you go to the "Series" tab and press "AreaLines" button you'll see they are not visible.

Code: Select all

		private void DrawLines()
		{
			Steema.TeeChart.Styles.Area area = new Steema.TeeChart.Styles.Area(myChart.Chart);
			area.UseOrigin = true;
			area.Origin = 10;
			area.Stairs = true;

			Color lineColor = Color.Orange;
			area.AreaLines.Visible = false;
			area.Stairs = true;
			for (int i = 0; i < 400; i++)
			{
				area.Add(i, ((i % 2) * 10) + 25, lineColor);
			}
			area.Add(450, 35, Color.Transparent);
			for (int i = 500; i < 1000; i++)
			{
				area.Add(i, ((i % 2) * 10) + 25, lineColor);
			}
		} 

[Remeha]

Hi,

The Area series has a property 'LinePen', which behaves strangely when i turn on the Stairs property. In the code below, there is a commented lne in DrawShortLines(): //area.Stairs = true; If you run the application like this, you'll see a red area in the chart with a plum colored line on the edges. Now, if i uncomment the commented line of code, the LinePen.Color is no longer Color.Plum and most importantly: the LinePen is also transparent. How do i make it solid?

the code:

Code: Select all

using System.Drawing;
using System.Windows.Forms;
using Steema.TeeChart;

namespace TeeChartAreaProblem
{
    public partial class Form1 : Form
    {
        private TChart myChart;
        public Form1()
        {
            InitializeComponent();
            InitializeChart();
            DrawShortLines();
        }

        private void DrawShortLines()
        {
            Steema.TeeChart.Styles.Area area = new Steema.TeeChart.Styles.Area(myChart.Chart);
            area.UseOrigin = true;
            area.Origin = 40;
            //area.Stairs = true;
            area.Color = Color.Tomato;
            area.LinePen.Color = Color.Plum;
            area.AreaLines.Visible = false;

            area.Add(0, 45);
            area.Add(10, 45);
            area.Add(20, 40);
            area.Add(30, 40);
            area.Add(40, 45);
            area.Add(41, 45);
            area.Add(42, 40);
            area.Add(43, 45);
        }

        private void InitializeChart()
        {
            // Set colors and layout
            myChart = new TChart();
            myChart.Dock = DockStyle.Fill;
            
            myChart.Aspect.View3D = false;

            // Set background
            myChart.Walls.Back.Transparent = false;
            myChart.Walls.Back.Brush.Color = Color.FromArgb(64, 64, 64);
            myChart.Walls.Back.Brush.Gradient.Visible = false;

            // Set up the bottom Axis
            myChart.Axes.Bottom.Automatic = false;
            myChart.Axes.Bottom.Visible = true;
            myChart.Axes.Bottom.Minimum = 0;
            myChart.Axes.Bottom.Maximum = 100;
            myChart.Axes.Bottom.Labels.Visible = false;

            myChart.Axes.Left.Automatic = false;
            myChart.Axes.Left.Horizontal = false;
            myChart.Axes.Left.Minimum = -1;
            myChart.Axes.Left.Maximum = 101;
            myChart.Axes.Left.Grid.Color = Color.GreenYellow;
            myChart.Axes.Left.MinorTicks.Visible = false;

            this.Controls.Add(myChart);
        }
    }
}

[Narcís]

Hi Remeha,

Thanks for reporting. I've been able to reproduce the problem here and added it (TF02013411) to the defect list to be fixed for next releases.

[Remeha]

Thank you!
This issue will be mentioned in the release notes when it is fixed, right?

Pepijn

[Narcís]

Hi Pepijn,

Yes, exactly.