Page 1 of 1
Problems with customising
Posted: Mon Jul 26, 2010 2:50 pm
by 15656148
Hi,
I have som problems customising teechart. I would like to end up with the first attached layout. Currently my main problems are:
[*]It doesn't seem possible to remove the border around the chart.[/*]
[*]No matter how I set the Height, Width, Rectangle, AutoSize, Size etc. properties on Chart.Legend I can't seem to control the size of the Legend.[/*]
[*]I would like not to use WebChart if possible.[/*]
The chart is created like this:
Code: Select all
TChart wc = new TChart();
wc.Axes.Right.Minimum = 0;
FormatChart(wc.Chart);
wds.ApplyToChart(wc.Chart);
// Iterate through each specified series, and apply
// their data to the chart.
foreach (WikiSeriesData cds in wds.Series)
{
// Creata the series for representing this,
Series s = cds.CreateSeries(wc);
// Fill it up with appropriate data,
cds.FillSeries(s, wds);
// And add it to the chart,
wc.Series.Add(s);
}
Guid cacheId = Guid.NewGuid();
// Display the date and time for the graph
wc.Footer.Text = "Generated " + DateTime.Now.ToString();
wc.Export.Image.PNG.Save(GetPhysicalChartPath(cacheId));
// Return the Guid of this new chart,
return cacheId;
My current attached attempt is configured like this:
Code: Select all
TChart Chart = new TChart();
Chart.Height = 550;
Chart.Width = 710;
Chart.Panel.Gradient.Visible = false;
Chart.Panel.Pen.Visible = false;
Chart.Panel.Color = ColorTranslator.FromHtml("#dbf1fa");
Chart.Header.Font.Size = 12;
Chart.Header.Font.Bold = true;
Chart.Walls.Left.Visible = false;
Chart.Walls.Right.Visible = false;
Chart.Walls.Back.Visible = false;
Chart.Walls.Bottom.Visible = false;
Chart.Axes.Left.Grid.Style = System.Drawing.Drawing2D.DashStyle.Solid;
Chart.Axes.Left.Grid.Color = Color.Black;
Chart.Axes.Left.Ticks.Visible = false;
Chart.Axes.Left.MinorTicks.Visible = false;
Chart.Axes.Left.AxisPen.Visible = false;
Chart.Axes.Bottom.Grid.Visible = false;
Chart.Axes.Bottom.Ticks.Visible = false;
Chart.Axes.Bottom.MinorTicks.Visible = false;
Chart.Axes.Bottom.AxisPen.Color = Color.Black;
Chart.Axes.Bottom.AxisPen.Width = 1;
Chart.Footer.Font.Color = Color.Gray;
Chart.Legend.Visible = true;
Chart.Legend.Shadow.Visible = false;
Chart.Legend.Pen.Visible = false;
Chart.Legend.Color = ColorTranslator.FromHtml("#9edbf1");
Chart.Legend.CustomPosition = false;
Chart.Legend.AutoSize = true;
Chart.Legend.Height = 125;
Chart.Legend.Width = 125;
Chart.Legend.Size.Width = 125;
Chart.Legend.Size.Height = 125;
Chart.Legend.ShapeBounds = new Rectangle(Chart.Legend.ShapeBounds.X, Chart.Legend.ShapeBounds.Y, 125, 125);
Chart.Legend.ResizeChart = true;
Chart.Legend.Symbol.DefaultPen = false;
Chart.Legend.Symbol.Pen.Visible = false;
Chart.Series[0].Color = ColorTranslator.FromHtml("#3db7e4");
Chart.Series[1].Color = ColorTranslator.FromHtml("#053762");
Chart.Series[2].Color = ColorTranslator.FromHtml("#6a0041");
Chart.Series[3].Color = ColorTranslator.FromHtml("#676535");
Chart.Series[4].Color = ColorTranslator.FromHtml("#df8d2f");
Chart.Series[5].Color = ColorTranslator.FromHtml("#24a78f");
Chart.Series[6].Color = ColorTranslator.FromHtml("#c6d644");
Chart.Series[7].Color = ColorTranslator.FromHtml("#cc1c55");
Chart.Series[8].Color = ColorTranslator.FromHtml("#5b3900");
foreach (Series s in Chart.Series)
{
if (s is Line)
((Line)s).LinePen.Width = 4;
}
I am looking forward to hearing from you.
- ResultStyle.png (29.62 KiB) Viewed 5834 times
- CurrentResultStyle.png (57.75 KiB) Viewed 5835 times
Re: Problems with customising
Posted: Mon Jul 26, 2010 4:49 pm
by yeray
Hi Scanrate,
Scanrate wrote:[*]It doesn't seem possible to remove the border around the chart.[/*]
I'm not sure to see this border. Could you please send us a simple example project we can run as-is to reproduce the problem here?
Thanks in advance.
Scanrate wrote:[*]No matter how I set the Height, Width, Rectangle, AutoSize, Size etc. properties on Chart.Legend I can't seem to control the size of the Legend.[/*]
AutoSize has to be set to
false so Legend.Width and Legend.Height can be used, and CustomPosition has to be set to
true so Legend.Left and Legend.Top can be used.
I've modified your code a little bit. I've added some series to it (you probably did it at design time). Now it should run as-is in a new WinForms application.
I've also changed the AutoSize and CustomPosition properties as mentioned above.
Code: Select all
public Form1()
{
InitializeComponent();
InitializeChart();
}
private void InitializeChart()
{
Steema.TeeChart.TChart Chart = new Steema.TeeChart.TChart();
this.Controls.Add(Chart);
this.Height = 550;
this.Width = 710;
Chart.Dock = DockStyle.Fill;
Chart.Panel.Gradient.Visible = false;
Chart.Panel.Pen.Visible = false;
Chart.Panel.Color = ColorTranslator.FromHtml("#dbf1fa");
Chart.Header.Font.Size = 12;
Chart.Header.Font.Bold = true;
Chart.Walls.Left.Visible = false;
Chart.Walls.Right.Visible = false;
Chart.Walls.Back.Visible = false;
Chart.Walls.Bottom.Visible = false;
Chart.Axes.Left.Grid.Style = System.Drawing.Drawing2D.DashStyle.Solid;
Chart.Axes.Left.Grid.Color = Color.Black;
Chart.Axes.Left.Ticks.Visible = false;
Chart.Axes.Left.MinorTicks.Visible = false;
Chart.Axes.Left.AxisPen.Visible = false;
Chart.Axes.Bottom.Grid.Visible = false;
Chart.Axes.Bottom.Ticks.Visible = false;
Chart.Axes.Bottom.MinorTicks.Visible = false;
Chart.Axes.Bottom.AxisPen.Color = Color.Black;
Chart.Axes.Bottom.AxisPen.Width = 1;
Chart.Footer.Font.Color = Color.Gray;
Chart.Legend.Visible = true;
Chart.Legend.Shadow.Visible = false;
Chart.Legend.Pen.Visible = false;
Chart.Legend.Color = ColorTranslator.FromHtml("#9edbf1");
for (int i = 0; i < 9; i++)
{
new Steema.TeeChart.Styles.Line(Chart.Chart);
Chart.Series[i].FillSampleValues();
}
Chart.Draw();
Chart.Legend.CustomPosition = true;
Chart.Legend.AutoSize = false;
Chart.Legend.Height = 125;
Chart.Legend.Width = 125;
//Chart.Legend.ShapeBounds = new Rectangle(Chart.Legend.ShapeBounds.X, Chart.Legend.ShapeBounds.Y, 125, 125); //this does the same than the two lines above
Chart.Legend.Left = 50;
Chart.Legend.ResizeChart = true;
Chart.Legend.Symbol.DefaultPen = false;
Chart.Legend.Symbol.Pen.Visible = false;
Chart.Series[0].Color = ColorTranslator.FromHtml("#3db7e4");
Chart.Series[1].Color = ColorTranslator.FromHtml("#053762");
Chart.Series[2].Color = ColorTranslator.FromHtml("#6a0041");
Chart.Series[3].Color = ColorTranslator.FromHtml("#676535");
Chart.Series[4].Color = ColorTranslator.FromHtml("#df8d2f");
Chart.Series[5].Color = ColorTranslator.FromHtml("#24a78f");
Chart.Series[6].Color = ColorTranslator.FromHtml("#c6d644");
Chart.Series[7].Color = ColorTranslator.FromHtml("#cc1c55");
Chart.Series[8].Color = ColorTranslator.FromHtml("#5b3900");
foreach (Steema.TeeChart.Styles.Series s in Chart.Series)
{
if (s is Steema.TeeChart.Styles.Line)
((Steema.TeeChart.Styles.Line)s).LinePen.Width = 4;
}
}
Scanrate wrote:[*]I would like not to use WebChart if possible.[/*]
What kind of application would you like to have? TeeChart for .NET allows you to create Windows Forms Applications (Win32), ASP .NET Web Applications (WebCharts), WPF and Silverlight applications.
Re: Problems with customising
Posted: Wed Jul 28, 2010 10:08 am
by 15656148
Hi Yeray
Thank you for leading me in the right direction
We use TeeChart on our webs with ASP.NET and in Delphi5, but may later also use it in Windows.Forms.
I was able to place and set the size of the legend, but now I don't seem to be able to place the series as in the reference chart in my original post (ResultStyle.png) with margins.
How would you prevent series to be cut off and let them continue in another column when the height is too small?
I also seem unable to set a different font at all anywhere.
The problem with the border i hacked by creating a new image with smaller dimensions and drawing the generated image on that.
I have attached a solution with my current result as well as a picture.
If you should have any better way of creating this kind of chart when looking at my code I would be glad to know.
- myChart.png (63.19 KiB) Viewed 5821 times
Re: Problems with customising
Posted: Thu Jul 29, 2010 10:30 am
by yeray
Hi Scanrate,
And what about setting the legend to be aligned to the bottom and change its width to clip it?
Code: Select all
Chart.Legend.Alignment = LegendAlignments.Bottom;
Chart.Legend.Width = 180;
- myChart.png (52.27 KiB) Viewed 5775 times
You can also control the columns witdth with Chart.Legend.ColumnWidthAuto and Chart.Legend.ColumnWidth instead of setting a big symbol width.
Other unrelated consideration. You can hide all the walls at once with:
Re: Problems with customising
Posted: Mon Aug 02, 2010 10:13 am
by 15656148
Hi Yeray
After some tweaking I have been able to get very close to what we want. The only important thing left is finding a way to style the symbols as in ResultStyle.png in my first post. That is with round edges and a smaller height. I don't seem able to do that. Is that right?
Secondly I would be glad to be without my hacks which involves creating a new image and doing drawImage and drawRectangle on it. You can look at it in my attached example (the web project). In order to achieve that I must be able to set the padding on the content in the legend which I could not find a way to do without my hack and likewise with the border that gets created when using Chart.Export.Image.PNG.Save().
But for now I can do with a solution to style the symbols.
I am looking forward to your answer.
- CurrentResultStyle.png (58.14 KiB) Viewed 5758 times
Re: Problems with customising
Posted: Tue Aug 03, 2010 2:38 pm
by yeray
Hi Scanrate,
Scanrate wrote:After some tweaking I have been able to get very close to what we want. The only important thing left is finding a way to style the symbols as in ResultStyle.png in my first post. That is with round edges and a smaller height. I don't seem able to do that. Is that right?
I'm afraid that the symbol hasn't these properties. What you could do is to draw it manually at OnDrawSymbol event doing something similar to the demo at
All Features\Welcome !\Miscellaneous\Legend\OnDrawSymbol Event
Scanrate wrote:Secondly I would be glad to be without my hacks which involves creating a new image and doing drawImage and drawRectangle on it. You can look at it in my attached example (the web project). In order to achieve that I must be able to set the padding on the content in the legend which I could not find a way to do without my hack and likewise with the border that gets created when using Chart.Export.Image.PNG.Save().
You could try with BeforeDraw event:
Code: Select all
Chart.BeforeDraw += new Steema.TeeChart.PaintChartEventHandler(Chart_BeforeDraw);
void Chart_BeforeDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
{
g.FillRectangle(Chart.Legend.Brush.DrawingBrush, 0, Chart.Legend.ShapeBounds.Y, Chart.Legend.Width, Chart.Legend.Height);
}
Re: Problems with customising
Posted: Wed Aug 04, 2010 8:37 am
by 15656148
Yeray wrote:
I'm afraid that the symbol hasn't these properties. What you could do is to draw it manually at OnDrawSymbol event doing something similar to the demo at All Features\Welcome !\Miscellaneous\Legend\OnDrawSymbol Event
Which demo are you referring to? I can't find it.
I would also like to say that I only need solutions to web at the moment in ASP.NET.
Best regards
Henning C. Nielsen
Re: Problems with customising
Posted: Wed Aug 04, 2010 11:46 am
by yeray
Hi Henning,
Scanrate wrote:Which demo are you referring to? I can't find it.
You should have a shortcut to the "Feature demo" in the TeeChart group, through the StartMenu.
If not, the exe should be in
\Examples\DemoProject\bin\ExecutableDemo\TeeChartNetExamples.exe