This is a migrated thread and some comments may be shown as answers.

Export RadChartView Donut with Different Background

1 Answer 26 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Mozart
Top achievements
Rank 1
Veteran
Mozart asked on 19 Jan 2021, 02:49 AM

Hello, i have a radchartview with Donut series.

I want to change the background of exported image , use this code to change the background 

p_oRadChart.BackColor = Color.Red;
p_oRadChart.ChartElement.BackColor = Color.Red;

It did change the Chart background on UI, but when the exported image background doesn't change.  

string sTempFile = Path.Combine(Path.GetDirectoryName(Application.ExecutablePath),"temp.jpeg");
string sTempFileLine = Path.Combine(Path.GetDirectoryName(Application.ExecutablePath), "tempLine.jpeg");
radChartView1.ExportToImage(sTempFile, new Size(690, 360), System.Drawing.Imaging.ImageFormat.Jpeg);
radChartView2.ExportToImage(sTempFileLine, new Size(690, 250), System.Drawing.Imaging.ImageFormat.Jpeg);

Telerik.ChartView version is 2017.3.912.40

1 Answer, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 20 Jan 2021, 11:21 AM

Hello, Mozart, 

By default, the export image has a white background. There is no setting that allows you to control this color. The following code snippet demonstrates a sample approach how to plug into the export to image behavior and specify Color.Red as background: 
        CartesianRenderer renderer;
        public RadForm1()
        {
            InitializeComponent();

            this.radChartView1.CreateRenderer+=radChartView1_CreateRenderer;

            BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
            barSeries.Name = "Q1";
            barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(128, "White"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(143, "Smith"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(111, "Jones"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(118, "Marshall")); 
            this.radChartView1.Series.Add(barSeries);
            BarSeries barSeries2 = new BarSeries("Performance", "RepresentativeName");
            barSeries2.Name = "Q2";
            barSeries2.DataPoints.Add(new CategoricalDataPoint(153, "Harley"));
            barSeries2.DataPoints.Add(new CategoricalDataPoint(141, "White"));
            barSeries2.DataPoints.Add(new CategoricalDataPoint(130, "Smith"));
            barSeries2.DataPoints.Add(new CategoricalDataPoint(88, "Jones"));
            barSeries2.DataPoints.Add(new CategoricalDataPoint(109, "Marshall"));
            this.radChartView1.Series.Add(barSeries2); 
        }

        private void radChartView1_CreateRenderer(object sender, ChartViewCreateRendererEventArgs e)
        {
            renderer = new CartesianRenderer(e.Area as CartesianArea);
            e.Renderer = renderer;
        }

        private void radButton1_Click(object sender, EventArgs e)
        {
            string sTempFile = Path.Combine(Path.GetDirectoryName(Application.ExecutablePath), "temp.jpeg"); 
             using (FileStream fs = new FileStream(sTempFile, FileMode.Create, FileAccess.Write))
            {
                ExportToImage(fs, new Size(690, 360), System.Drawing.Imaging.ImageFormat.Jpeg);
            }
           // radChartView1.ExportToImage(sTempFile, new Size(690, 360), System.Drawing.Imaging.ImageFormat.Jpeg);

            Process.Start(sTempFile);
        }

         public void ExportToImage(Stream stream, Size size, ImageFormat imageFormat)
        {
            if (!this.IsLoaded)
            {
                this.LoadElementTree();
            }            

            Bitmap bmp = new Bitmap(size.Width, size.Height);
            Graphics graphics = null;
            Graphics fromBitmapGraphics = null;
            Metafile metafile = null;

            bool isMetaFile = imageFormat == ImageFormat.Emf || imageFormat == ImageFormat.Wmf;
            if (isMetaFile)
            {
                fromBitmapGraphics = Graphics.FromImage(bmp);
                metafile = new Metafile(stream, fromBitmapGraphics.GetHdc());
                graphics = Graphics.FromImage(metafile);               
            }
            else
            {
                graphics = Graphics.FromImage(bmp);
            }

            graphics.Clear(Color.Red);

            SizeF titleSize = graphics.MeasureString(this.radChartView1.Title, this.radChartView1.ChartElement.TitleElement.Font, this.Width);

            if (this.radChartView1.ChartElement.TitleElement.TextOrientation == Orientation.Vertical)
            {
                float swap = titleSize.Height;
                titleSize.Height = titleSize.Width;
                titleSize.Width = swap;
            }

            RadRect titleRect = new RadRect(0, 0, titleSize.Width, titleSize.Height);
            RadRect legendRect = new RadRect(0, 0, size.Width, size.Height);
            RadRect chartRect = legendRect;

            titleRect.X += this.radChartView1.ChartElement.TitleElement.PositionOffset.Width;
            titleRect.Y += this.radChartView1.ChartElement.TitleElement.PositionOffset.Height;

            switch (this.radChartView1.ChartElement.TitlePosition)
            {
                case TitlePosition.Top:
                case TitlePosition.Bottom:
                    titleRect.Width = size.Width;
                    break;
                case TitlePosition.Right:
                case TitlePosition.Left:
                    titleRect.Height = size.Height;
                    break;
            }

            chartRect.X += this.radChartView1.View.Margin.Left;
            chartRect.Y += this.radChartView1.View.Margin.Top;
            chartRect.Width -= this.radChartView1.View.Margin.Horizontal;
            chartRect.Height -= this.radChartView1.View.Margin.Vertical;

            if (this.radChartView1.ShowTitle)
            {
                switch (this.radChartView1.ChartElement.TitlePosition)
                {
                    case TitlePosition.Top:
                        legendRect.Y += titleRect.Height;
                        chartRect.Y += titleRect.Height;
                        legendRect.Height -= titleRect.Height;
                        chartRect.Height -= titleRect.Height;
                        break;
                    case TitlePosition.Right:
                        titleRect.X = size.Width - this.radChartView1.ChartElement.TitleElement.Size.Width;
                        titleRect.Height = size.Height;
                        legendRect.Width -= titleRect.Width;
                        chartRect.Width -= titleRect.Width;
                        break;
                    case TitlePosition.Bottom:
                        titleRect.Y = size.Height - this.radChartView1.ChartElement.TitleElement.Size.Height;
                        titleRect.Width = size.Width;
                        legendRect.Height -= titleRect.Height;
                        chartRect.Height -= titleRect.Height;
                        break;
                    case TitlePosition.Left:
                        titleRect.Height = size.Height;
                        legendRect.X += titleRect.Width;
                        chartRect.X += titleRect.Width;
                        legendRect.Width -= titleRect.Width;
                        chartRect.Width -= titleRect.Width;
                        break;
                }
            }

            if (this.radChartView1.ShowLegend)
            {
                switch (this.radChartView1.ChartElement.LegendPosition)
                {
                    case LegendPosition.Right:
                        if (this.radChartView1.ChartElement.TitlePosition == TitlePosition.Right)
                        {
                            legendRect.X = titleRect.X - this.radChartView1.ChartElement.LegendElement.Size.Width;
                        }
                        else
                        {
                            legendRect.X = size.Width - this.radChartView1.ChartElement.LegendElement.Size.Width;
                        }

                        legendRect.Width = this.radChartView1.ChartElement.LegendElement.Size.Width;
                        chartRect.Width -= legendRect.Width;
                        break;
                    case LegendPosition.Bottom:
                        if (this.radChartView1.ChartElement.TitlePosition == TitlePosition.Bottom)
                        {
                            legendRect.Y = titleRect.Y - this.radChartView1.ChartElement.LegendElement.Size.Height;
                        }
                        else
                        {
                            legendRect.Y = size.Height - this.radChartView1.ChartElement.LegendElement.Size.Height;
                        }

                        legendRect.Height = this.radChartView1.ChartElement.LegendElement.Size.Height;
                        chartRect.Height -= legendRect.Height;
                        break;
                    case LegendPosition.Left:
                        legendRect.Width = this.radChartView1.ChartElement.LegendElement.Size.Width;
                        chartRect.X += legendRect.Width;
                        chartRect.Width -= legendRect.Width;
                        break;
                    case LegendPosition.Top:
                        legendRect.Height = this.radChartView1.ChartElement.LegendElement.Size.Height;
                        chartRect.Y += legendRect.Height;
                        chartRect.Height -= legendRect.Height;
                        break;
                    case LegendPosition.Float:
                        legendRect.Width = this.radChartView1.ChartElement.LegendElement.Size.Width;
                        legendRect.Height = this.radChartView1.ChartElement.LegendElement.Size.Height;
                        double xRatio = size.Width / this.Size.Width;
                        double yRatio = size.Height / this.Size.Height;
                        legendRect.X = (this.radChartView1.ChartElement.LegendOffset.X * xRatio) + ((this.radChartView1.ChartElement.TitlePosition == TitlePosition.Left) ? titleRect.Right : 0d);
                        legendRect.Y = (this.radChartView1.ChartElement.LegendOffset.Y * yRatio) + ((this.radChartView1.ChartElement.TitlePosition == TitlePosition.Top) ? titleRect.Bottom : 0f);
                        break;
                }
            }

            this.radChartView1.View.Layout(chartRect); 
             renderer.Draw(graphics);
            if ( this.radChartView1.ShowLegend)
            {
                float xTransform = (float)legendRect.X - this.radChartView1.ChartElement.LegendElement.ControlBoundingRectangle.X + ((float)legendRect.Width - this.radChartView1.ChartElement.LegendElement.ControlBoundingRectangle.Width) / 2f;
                float yTransform = (float)legendRect.Y - this.radChartView1.ChartElement.LegendElement.ControlBoundingRectangle.Y + ((float)legendRect.Height - this.radChartView1.ChartElement.LegendElement.ControlBoundingRectangle.Height) / 2f;
                graphics.TranslateTransform(xTransform, yTransform);
                this.radChartView1.ChartElement.LegendElement.Paint(new RadGdiGraphics(graphics), this.radChartView1.ChartElement.LegendElement.ControlBoundingRectangle, 0f, new SizeF(1f, 1f), true);
                graphics.ResetTransform();
            }

            RadGdiGraphics radGraphics = new RadGdiGraphics(graphics);

            if ( this.radChartView1.ShowTitle)
            {
                radGraphics.DrawString( this.radChartView1.Title, this.GetTitleDrawRectangle(ChartRenderer.ToRectangleF(titleRect), titleSize, this.radChartView1.ChartElement.TitleElement.TextAlignment), this.radChartView1.ChartElement.TitleElement.Font,
                    this.radChartView1.ChartElement.TitleElement.ForeColor, this.radChartView1.ChartElement.TitleElement.TextParams.CreateStringFormat(), this.radChartView1.ChartElement.TitleElement.TextOrientation, this.radChartView1.ChartElement.TitleElement.FlipText);
            }

            if (isMetaFile)
            {  
                metafile.Dispose();//this will save the metafile to stream
                if (fromBitmapGraphics != null)
                {
                    fromBitmapGraphics.Dispose();
                }

            }
            else
            {
                bmp.Save(stream, imageFormat);
            }

             this.radChartView1.View.Layout();
        }
         private RectangleF GetTitleDrawRectangle(RectangleF drawArea, SizeF textRect, ContentAlignment textAlignment)
        {
            switch (textAlignment)
            {
                case ContentAlignment.BottomCenter:
                    return new RectangleF(new PointF(drawArea.X + (drawArea.Width - textRect.Width) / 2f, drawArea.Bottom - textRect.Height), textRect);
                case ContentAlignment.BottomLeft:
                    return new RectangleF(new PointF(drawArea.X, drawArea.Bottom - textRect.Height), textRect);
                case ContentAlignment.BottomRight:
                    return new RectangleF(new PointF(drawArea.Right - textRect.Width, drawArea.Bottom - textRect.Height), textRect);
                case ContentAlignment.MiddleCenter:
                    return new RectangleF(new PointF(drawArea.X + (drawArea.Width - textRect.Width) / 2f, drawArea.Y + (drawArea.Height - textRect.Height) / 2f), textRect);
                case ContentAlignment.MiddleLeft:
                    return new RectangleF(new PointF(drawArea.X, drawArea.Y + (drawArea.Height - textRect.Height) / 2f), textRect);
                case ContentAlignment.MiddleRight:
                    return new RectangleF(new PointF(drawArea.Right - textRect.Width, drawArea.Y + (drawArea.Height - textRect.Height) / 2f), textRect);
                case ContentAlignment.TopCenter:
                    return new RectangleF(new PointF(drawArea.X + (drawArea.Width - textRect.Width) / 2, drawArea.Y), textRect);
                case ContentAlignment.TopLeft:
                    return new RectangleF(drawArea.Location, textRect);
                case ContentAlignment.TopRight:
                    return new RectangleF(new PointF(drawArea.Right - textRect.Width, drawArea.Y), textRect);
                default:
                    return new RectangleF(drawArea.Location, textRect);
            }
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ChartView
Asked by
Mozart
Top achievements
Rank 1
Veteran
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or