Stacked chart doesn't display right

[SPS]

Greetings,

we made two charts of the same data. One of them in is in the Steema.TeeChart.Styles.FastLine style and the other in the Steema.TeeChart.Styles.Area style.

In code we use the area.Stacked = Steema.TeeChart.Styles.CustomStack.Stack; property for the Area chart style.

We use version 1.1.1769.19457 of the TeeChart.dll and tested it with the newer v2.0.2179.21171 where we have the same output.

Here are two image exports of the charts (line and area):
http://www.sps.nl/temp/ChartData_line_zoomed.png
http://www.sps.nl/temp/ChartData_stacked_zoomed.png

As seen in the stacked image, the green area is not stacked on top of the other two, but floats above them as a single line. Any ideas on this?

Thanks in advance.

[Narcís]

Hi SPS,

This is because FastLine series doesn't support stacking. You should use a line series instead of a fastline.

[SPS]

We use the Steema.TeeChart.Styles.Area style for stacking, not the FastLine.

[Narcís]

Yes, but fastline series can not be stacked. Try replacing the fastline series for a line series and will work.

[SPS]

We use this code for every series we add.

Area series (stacked)
http://www.sps.nl/temp/ChartData_stacked_zoomed.png

Code: Select all

if (Module.ChartAreaType)
{
   Steema.TeeChart.Styles.Area area = new Steema.TeeChart.Styles.Area();
   this.teeChartControl.Series.Add (area);
   area.DataSource = dataView;
   ...
   area.Stacked = Steema.TeeChart.Styles.CustomStack.Stack;
   area.AreaLines.Visible = false;
   area.Color = NextSeriesColor;
}

FastLine series (not stacked)
http://www.sps.nl/temp/ChartData_line_zoomed.png

Code: Select all

if (Module.ChartLineType)
{
   Steema.TeeChart.Styles.FastLine fastLine = new Steema.TeeChart.Styles.FastLine ();
   this.teeChartControl.Series.Add (fastLine);
   fastLine.DataSource = dataView;
   ...
   fastLine.DrawAllPoints = true;
   fastLine.IgnoreNulls = false;
   fastLine.Color = NextSeriesColor;
}

Line series (stacked)
http://www.sps.nl/temp/ChartData_linestacked_zoomed.png

Code: Select all

if (Module.ChartLineStackedType)
{
   Steema.TeeChart.Styles.Line line = new Steema.TeeChart.Styles.Line ();
   this.teeChartControl.Series.Add (line);
   line.DataSource = dataView;
   ...
   line.Stacked = Steema.TeeChart.Styles.CustomStack.Stack;
   line.Color = NextSeriesColor;
}

The last picture shows the stacked version of the line series. The first picture shows the stacked version of the area series. Some parts of the area series is not filled with color as it should be. The second picture shows the FastLine series which is not stacked.

There's nothing wrong with the FastLine or Line series, but the Area series doesn't seem to fill some parts with color.

[Narcís]

Hi SPS,

Ok, I can see the problem on the image. Could you please send us an example we can run "as-is" or the .ten file for that chart so that we can reproduce the problem here?

You can post your files at [url]news://www.steema.net/steema.public.attachments[/url] newsgroup.

Thanks in advance.

[SPS]

Greetings Narcís,

I uploaded the .ten files at http://www.sps.nl/temp/ChartData_line_zoomed.zip. It's a zipped file containing all three series mentioned.

[Narcís]

Hi SPS,

Thanks for the .ten file. I could see what you reported but we are not able to reproduce the problem here using this code:

Code: Select all

		private void Form1_Load(object sender, System.EventArgs e)
		{
			Steema.TeeChart.Styles.Area area1=new Steema.TeeChart.Styles.Area();
			Steema.TeeChart.Styles.Area area2=new Steema.TeeChart.Styles.Area();
			Steema.TeeChart.Styles.Area area3=new Steema.TeeChart.Styles.Area();

			tChart1.Series.Add(area1);
			tChart1.Series.Add(area2);
			tChart1.Series.Add(area3);

			for (int i=0;i<tChart1.Series.Count;++i)
			{
				(tChart1[i] as Steema.TeeChart.Styles.Area).AreaLines.Visible=false;
				(tChart1[i] as Steema.TeeChart.Styles.Area).Brush.Transparency=80;
				(tChart1[i] as Steema.TeeChart.Styles.Area).Stacked=Steema.TeeChart.Styles.CustomStack.Stack;
				tChart1[i].FillSampleValues(100);
			}

			tChart1.Aspect.View3D=false;
		}

Could you please modify it or send us an example we can run "as-is" to reproduce the problem here?

[SPS]

Greetings Narcís,

I could not reproduce the problem with the FillSampleValues() method and used the template import method to import the .ten file instead. After that I copy all the X and Y values into the chart and have the problem reproduced.

Here is the code I used together with the .ten file:

Code: Select all

			// Load template
			Steema.TeeChart.TChart loadChart = new Steema.TeeChart.TChart();
			Steema.TeeChart.Import.TemplateImport ti = new Steema.TeeChart.Import.TemplateImport(loadChart.Chart);
			ti.Load("ChartData_stacked_zoomed.ten");

			// Copy values
			for (int count = 0; count < loadChart.Series.Count; count++)
			{
				Steema.TeeChart.Styles.Area area = new Steema.TeeChart.Styles.Area();
				area.Add(loadChart.Series[count].XValues.Value, loadChart.Series[count].YValues.Value);

				tChart1.Series.Add(area);
			}

			// Set some style properties
			for (int i=0;i<tChart1.Series.Count;++i)
			{
				(tChart1[i] as Steema.TeeChart.Styles.Area).AreaLines.Visible = false;
				(tChart1[i] as Steema.TeeChart.Styles.Area).Brush.Transparency = 40;
				(tChart1[i] as Steema.TeeChart.Styles.Area).Stacked=Steema.TeeChart.Styles.CustomStack.Stack;
			}

			tChart1.Aspect.View3D = false;

[Narcís]

Hi SPS,

Thanks for the information. I've been able to reproduce what you report here. My impression is that the series that doesn't stack correctly doesn't have the same X values as the two other series and this makes it not being correctly stacked. To stack series they need to have identic X values.

An example of this would be:

Code: Select all

		private void Form1_Load(object sender, System.EventArgs e)
		{
			area1.Add(0,3);
			area1.Add(1,5);
			area1.Add(2,1);
			area1.Add(3,8);
			area1.Add(4,2);
			area1.Add(5,6);

			area2.Add(0,1);
			area2.Add(1,7);
			area2.Add(2,2);
			area2.Add(3,8);
			area2.Add(4,2);
			area2.Add(5,1);

			area3.Add(0,2);
			area3.Add(1.5,6); //different X value
			area3.Add(2,6);
			area3.Add(3,2);
			area3.Add(4.3,5); //different X value
			area3.Add(5,6);
		}

[SPS]

I have been struggling with this same problem and have come to the following solution.

Interpolating and Extrapolating the data to make sure all intervals on the X axis will be the same, that will clear this problem as mentioned in the previous post. However I think this should be done inside the teeChart component and not in the user data.

I'm sure teeChart should do this automaticly when it is missing intervals, isn't it why somebody is using a charting component?

However, I can imagine these badly documented data layout requirements will bring up many questions why somebody's data is not presented correctly.

Cheers,

Danny