Problems with customising

[Scanrate]

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 5784 times

CurrentResultStyle.png (57.75 KiB) Viewed 5785 times

[Yeray]

Hi Scanrate,

[*]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.

[*]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;
            }
        }

[*]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.

[Scanrate]

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 5771 times

[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 5725 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:

Code: Select all

Chart.Walls.Visible = false;

[Scanrate]

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 5708 times

[Yeray]

Hi Scanrate,

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

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);
        }

[Scanrate]

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

[Yeray]

Hi Henning,

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