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

Rotating text to display vertically

17 Answers 752 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Feedback
Top achievements
Rank 1
Feedback asked on 27 May 2007, 05:37 PM
I am creating a report that has so many columns, I need to print the text vertically.

Click here to see an example of what I'm talking about:
http://certpro.thecrosbygroup.com/images/VerticalColumns.jpg

So far, I can't find anything in Reporting that can do it.  I see something in Charting, however.  Is there a way to do it that I just don't see?  Even a way to "trick" the Report into showing a vertical Charting element would be fine.

Thanks for your help!!!

Matthew

17 Answers, 1 is accepted

Sort by
0
Svetoslav
Telerik team
answered on 28 May 2007, 10:00 AM
Hi Feedback,

The 1st version of the Telerik Reporting does not support vertical text in its TextBox item. The Chart item is the only item that currently supports rotation. We plan to add rotation to the TextBox item for the v2.


Regards,
Svetoslav
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Feedback
Top achievements
Rank 1
answered on 28 May 2007, 06:44 PM
Thank you for the response.  Is there a way to create a chart with nothing other than the rotated axis elements, so that I could embed this chart right where I'd need the rotated text columns?

I know it sounds ugly, but I am deperate for vertical text.  If I cannot find a way to do it in the next few days, I have to choose another component to use, and I'd really like our company to go with yours.

Thanks!

Matthew
0
Feedback
Top achievements
Rank 1
answered on 29 May 2007, 09:17 PM

Drum roll please....

   Got it!  Using the function below, you can create vertical text!  See, you DO support it!  I sure am glad that the charting component is included in telerik Reporting!  You guys rock!
 

CreateVerticalText(1.75, 0, "Hey there, look at me!")  
CreateVerticalText(1.95, 0, "I was dynamically generated!"
    Protected Sub CreateVerticalText(ByVal startx As DoubleByVal starty As DoubleByVal title As String)  
 
        ' Create the Dynamic Chart element and add it to the header  
        Dim DynamicChart As Telerik.Reporting.Chart = New Telerik.Reporting.Chart  
        Me.reportHeaderSection1.Items.AddRange(New Telerik.Reporting.ReportItemBase() {DynamicChart})  
 
        ' Turn off the chart border  
        DynamicChart.Appearance.Border.Visible = False 
        DynamicChart.Appearance.Dimensions.Height = New Telerik.Charting.Styles.Unit(288)  
        DynamicChart.Appearance.Dimensions.Width = New Telerik.Charting.Styles.Unit(19)  
 
        ' Make the chart transparent  
        DynamicChart.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent  
        DynamicChart.ChartTitle.Appearance.Border.Visible = False 
        DynamicChart.ChartTitle.Appearance.Dimensions.AutoSize = False 
 
        ' Normally the height, this is now the column width of the vertical text  
        DynamicChart.ChartTitle.Appearance.Dimensions.Height = New Telerik.Charting.Styles.Unit(15)  
        ' Normally the width, this is now the column height of the vertical text  
        DynamicChart.ChartTitle.Appearance.Dimensions.Width = New Telerik.Charting.Styles.Unit(280)  
 
        ' Set the chart title to be transparent and aligned centrally within the chart object  
        DynamicChart.ChartTitle.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent  
        DynamicChart.ChartTitle.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Center  
 
        '  Here's the GOLD!  This is what we needed!  Rotation!  
        DynamicChart.ChartTitle.Appearance.RotationAngle = 270.0!  
 
        ' Set the margins to 0  
        Dim ChartMargins3 As Telerik.Charting.Styles.ChartMargins = New Telerik.Charting.Styles.ChartMargins  
        ChartMargins3.Bottom = New Telerik.Charting.Styles.Unit(0)  
        ChartMargins3.Left = New Telerik.Charting.Styles.Unit(0)  
        ChartMargins3.Right = New Telerik.Charting.Styles.Unit(0)  
        ChartMargins3.Top = New Telerik.Charting.Styles.Unit(0)  
        DynamicChart.ChartTitle.Appearance.Dimensions.Margins = ChartMargins3  
 
        ' Set the padding to 0  
        Dim ChartPaddings3 As Telerik.Charting.Styles.ChartPaddings = New Telerik.Charting.Styles.ChartPaddings  
        ChartPaddings3.Bottom = New Telerik.Charting.Styles.Unit(0)  
        ChartPaddings3.Left = New Telerik.Charting.Styles.Unit(0)  
        ChartPaddings3.Right = New Telerik.Charting.Styles.Unit(0)  
        ChartPaddings3.Top = New Telerik.Charting.Styles.Unit(0)  
        DynamicChart.ChartTitle.Appearance.Dimensions.Paddings = ChartPaddings3  
 
        ' Set the placement direction to be horizontal  
        DynamicChart.ChartTitle.PlacementDirection = Telerik.Charting.Styles.PlacementDirection.Horizontal  
 
        ' Set the TextBlock characteristics (including font color and size)  
        DynamicChart.ChartTitle.TextBlock.Appearance.Position.Auto = False 
        DynamicChart.ChartTitle.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black  
        DynamicChart.ChartTitle.TextBlock.Appearance.TextProperties.Font = New System.Drawing.Font("Arial", 9.0!, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, CType(0, Byte))  
 
        ' Turn off the legend and plot area visiblity  
        DynamicChart.Legend.Visible = False 
        DynamicChart.PlotArea.Visible = False 
 
        ' Display the text that was passed in  
        DynamicChart.ChartTitle.TextBlock.Text = title  
 
        ' Move the vertical text to the location specified  
        DynamicChart.Location = New Telerik.Reporting.Drawing.PointU(New Telerik.Reporting.Drawing.Unit(startx, Telerik.Reporting.Drawing.UnitType.Inch), New Telerik.Reporting.Drawing.Unit(starty, Telerik.Reporting.Drawing.UnitType.Inch))  
        ' Size is hard-coded, but could be passed as an argument  
        DynamicChart.Size = New Telerik.Reporting.Drawing.SizeU(New Telerik.Reporting.Drawing.Unit(0.2, Telerik.Reporting.Drawing.UnitType.Inch), New Telerik.Reporting.Drawing.Unit(3, Telerik.Reporting.Drawing.UnitType.Inch))  
 
 
    End Sub 
 

 

0
Svetoslav
Telerik team
answered on 30 May 2007, 04:38 PM
Great work, Matthew!

According to our plans we should implement the vertical text rendering for v2 of the Telerik Reporting.

Keep up the good work! Your points have been updated for sharing your solution with the community.
 

Greetings,
Svetoslav
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Feedback
Top achievements
Rank 1
answered on 30 May 2007, 10:16 PM
Thanks!

I was able to refine the routine a bit more, and WATCH OUT for setting the Chart or Chart Title to be a "TRANSPARENT" or "EMPTY" color!  It will look fine when you use the Previewer, but after exporting to PDF you'll get a big black box, with no text!  So, be sure to use a passed-in color.

Here's the resulting C# code that I am using in my project, and it is working GREAT for what I need:
        protected void CreateVerticalText(double startx, double starty, double width, double height, string title, Telerik.Reporting.Chart DynamicChart, System.Drawing.Color backcolor)   
        {  
 
            int dpi = 97;  
 
            // Size is passed as arguments  
            DynamicChart.Size = new Telerik.Reporting.Drawing.SizeU(new Telerik.Reporting.Drawing.Unit(width, Telerik.Reporting.Drawing.UnitType.Inch), new Telerik.Reporting.Drawing.Unit(height, Telerik.Reporting.Drawing.UnitType.Inch));   
 
            // Display the text that was passed in  
            DynamicChart.ChartTitle.TextBlock.Text = title;  
            // Move the vertical text to the location specified  
            DynamicChart.Location = new Telerik.Reporting.Drawing.PointU(new Telerik.Reporting.Drawing.Unit(startx, Telerik.Reporting.Drawing.UnitType.Inch), new Telerik.Reporting.Drawing.Unit(starty, Telerik.Reporting.Drawing.UnitType.Inch));  
 
            // Turn off the chart border  
            DynamicChart.Appearance.Border.Visible = false;  
            DynamicChart.Appearance.Border.Width = 0;  
            DynamicChart.Appearance.Border.Color = System.Drawing.Color.White;  
 
            // Make the chart transparent - NOPE - Have to use a passed in color.  
            DynamicChart.Appearance.FillStyle.MainColor = backcolor;//System.Drawing.Color.Transparent;   
            DynamicChart.ChartTitle.Appearance.Border.Visible = false;  
            DynamicChart.ChartTitle.Appearance.Border.Width = 0;  
            DynamicChart.ChartTitle.Appearance.Border.Color = System.Drawing.Color.White;  
            DynamicChart.ChartTitle.Appearance.Dimensions.AutoSize = false;  
 
            // Normally the height, this is now the column width of the vertical text  
            DynamicChart.ChartTitle.Appearance.Dimensions.Height = new Telerik.Charting.Styles.Unit(20);//System.Convert.ToInt32(width * dpi));  
            // Normally the width, this is now the column height of the vertical text  
            DynamicChart.ChartTitle.Appearance.Dimensions.Width = new Telerik.Charting.Styles.Unit(System.Convert.ToInt32(height * dpi));  
 
            // Set the chart title to be transparent (NOPE - colored via argument) and aligned centrally within the chart object  
            DynamicChart.ChartTitle.Appearance.FillStyle.MainColor = backcolor;//System.Drawing.Color.Transparent;   
            DynamicChart.ChartTitle.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Center;  
 
            //  Here's the GOLD!  This is what we needed!  Rotation!  
            DynamicChart.ChartTitle.Appearance.RotationAngle = 270F;  
 
            // Set the placement direction to be horizontal  
            DynamicChart.ChartTitle.PlacementDirection = Telerik.Charting.Styles.PlacementDirection.Horizontal;  
 
            // Set the TextBlock characteristics (including font color and size)  
            DynamicChart.ChartTitle.TextBlock.Appearance.Position.Auto = false;   
            DynamicChart.ChartTitle.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black;   
            DynamicChart.ChartTitle.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font("Arial", 8F);  
            DynamicChart.ChartTitle.TextBlock.Appearance.Position.Y = 3;  
            DynamicChart.ChartTitle.TextBlock.Appearance.Position.X = 6;  
 
            // Turn off the legend and plot area visiblity  
            DynamicChart.Legend.Visible = false;   
            DynamicChart.PlotArea.Visible = false;  
 
        }  
 
0
rh
Top achievements
Rank 1
answered on 16 Feb 2008, 03:57 PM
I need vertical text too. I guess I'll try out this charting thing. Thanks for posting your solution!

To Telerik, I get confused when you guys talk about v1 vs. v2 because all of your releases are based on the quarter of the year. So what quarter of 2008 is v2 suppose to be?
0
rh
Top achievements
Rank 1
answered on 17 Feb 2008, 02:41 AM
I think Q3 2007 was v2, but no vertical text supported yet. :(

I have the chart thing working except there is a small gray border that I can't get to go away. I've clicked through every property in the property window and changed the border and shadow properties to white and not visible but the border is still there. Is there no way to turn off all borders for a chart?
0
Chavdar
Telerik team
answered on 19 Feb 2008, 06:51 AM
Hello Roy,

Indeed, there is a small problem with the drawing of the chart report item when exporting to PDF. We will research it and hopefully fix for the next release.

As a workaround we have proposed you a sample solution in your support ticket.

From now on we will reference the releases with their QN name to avoid any misunderstandings in future.

Greetings,
Chavdar
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Martin
Top achievements
Rank 1
answered on 01 Apr 2008, 09:19 AM
Hi

I'm also trying to get vertical text on a report ....

I'm using VB to create a report.DLL
which I then use in an ASP.NET web application

I've hacked the code which FEEDBACK posted...

The text appears fine in web preview BUT when I print it
the chart it outputs as a BLACK block....

here's the VB code I'm using...

Hope you can help...

Also, have you plans for Cross Tabs in Reporting soon??

NEW() Constructor
==============
Dim DynamicChart As Telerik.Reporting.Chart = New Telerik.Reporting.Chart
CreateVerticalText(1.75, 0, 1, 1, "Hey there, look at me!", DynamicChart, Color.Transparent)
Me.pageHeader.Items.AddRange(New Telerik.Reporting.ReportItemBase() {DynamicChart})



Protected Sub CreateVerticalText(ByVal startx As Double, ByVal starty As Double, _
                ByVal width As Double, ByVal height As Double, ByVal title As String, _
                ByVal DynamicChart As Telerik.Reporting.Chart, ByVal backcolor As System.Drawing.Color)


        Dim dpi As Int16 = 97

        '    // Size is passed as arguments 
        DynamicChart.Size = New Telerik.Reporting.Drawing.SizeU(New Telerik.Reporting.Drawing.Unit(width, Telerik.Reporting.Drawing.UnitType.Inch), New Telerik.Reporting.Drawing.Unit(height, Telerik.Reporting.Drawing.UnitType.Inch))

        '    // Display the text that was passed in 

        DynamicChart.ChartTitle.TextBlock.Text = title
        '    // Move the vertical text to the location specified 
        DynamicChart.Location = New Telerik.Reporting.Drawing.PointU(New Telerik.Reporting.Drawing.Unit(startx, Telerik.Reporting.Drawing.UnitType.Inch), New Telerik.Reporting.Drawing.Unit(starty, Telerik.Reporting.Drawing.UnitType.Inch))

        '    // Turn off the chart border 
        DynamicChart.Appearance.Border.Visible = False
        DynamicChart.Appearance.Border.Width = 0
        DynamicChart.Appearance.Border.Color = System.Drawing.Color.White

        '    // Make the chart transparent - NOPE - Have to use a passed in color. 
        DynamicChart.Appearance.FillStyle.MainColor = backcolor 'System.Drawing.Color.Transparent
        DynamicChart.ChartTitle.Appearance.Border.Visible = False
        DynamicChart.ChartTitle.Appearance.Border.Width = 0
        DynamicChart.ChartTitle.Appearance.Border.Color = System.Drawing.Color.White
        DynamicChart.ChartTitle.Appearance.Dimensions.AutoSize = False

        '    // Normally the height, this is now the column width of the vertical text 
        DynamicChart.ChartTitle.Appearance.Dimensions.Height = New Telerik.Reporting.Charting.Styles.Unit(20) '//System.Convert.ToInt32(width * dpi))
        '    // Normally the width, this is now the column height of the vertical text 
        DynamicChart.ChartTitle.Appearance.Dimensions.Width = New Telerik.Reporting.Charting.Styles.Unit(System.Convert.ToInt32(height * dpi))

        '    // Set the chart title to be transparent (NOPE - colored via argument) and aligned centrally within the chart object 
        DynamicChart.ChartTitle.Appearance.FillStyle.MainColor = backcolor '//System.Drawing.Color.Transparent;  
        DynamicChart.ChartTitle.Appearance.Position.AlignedPosition = Telerik.Reporting.Charting.Styles.AlignedPositions.Center

        '    //  Here's the GOLD!  This is what we needed!  Rotation! 
        DynamicChart.ChartTitle.Appearance.RotationAngle = 270.0F

        '    // Set the placement direction to be horizontal 
        'DynamicChart.ChartTitle.PlacementDirection = Telerik.Charting.Styles.PlacementDirection.Horizontal

        '    // Set the TextBlock characteristics (including font color and size) 
        DynamicChart.ChartTitle.TextBlock.Appearance.Position.Auto = False
        DynamicChart.ChartTitle.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black
        DynamicChart.ChartTitle.TextBlock.Appearance.TextProperties.Font = New System.Drawing.Font("Arial", 8.0F)
        DynamicChart.ChartTitle.TextBlock.Appearance.Position.Y = 3
        DynamicChart.ChartTitle.TextBlock.Appearance.Position.X = 6

        '    // Turn off the legend and plot area visiblity 
        DynamicChart.Legend.Visible = False
        DynamicChart.PlotArea.Visible = False

    End Sub
0
Feedback
Top achievements
Rank 1
answered on 01 Apr 2008, 05:04 PM
The problem, I believe, is the "Color.Transparent" that you are passing in.

I got the "all black" result when I tried to use Color.Transparent as well.  That's why I made it so you can pass in the color...  Do a test passing in "Color.White" and see if something shows up...

Good luck!

Matthew 
0
rh
Top achievements
Rank 1
answered on 01 Apr 2008, 05:44 PM
I got the following suggestion from Telerik for vertical text on a report. Haven't had a chance to try it yet. Plan to in a week or to. If you get a chance to let us know how it works.

A possible way to work around this problem is to use a PictureBox report item and create your own image with vertical text in it by using a user defined function. Here is a sample implementation:

    static Image CreateVerticalTextImage(string text, Size size, System.Drawing.Font font, Color color)
        {           
            Bitmap bitmap = new Bitmap(size.Width, size.Height);
            using (Graphics gr = Graphics.FromImage(bitmap))
            {
                SizeF stringRectangle = gr.MeasureString(text, font, int.MaxValue);
                gr.RotateTransform(-90.0f);
                Point startPoint = new Point(- size.Height, (int)((size.Width - stringRectangle.Height) / 2));
                gr.DrawString(text, font, new SolidBrush(color), startPoint);
                gr.RotateTransform(90.0f);               
            }
            MemoryStream ms = new MemoryStream();
            bitmap.Save(ms, ImageFormat.Png);
            return Image.FromStream(ms);
        }

        public static Image GetImage(Processing.PictureBox pictureBox, string text)
        {           
            Size imageSize = new Size((int) Math.Round(pictureBox.Size.Width.Value), (int) Math.Round(pictureBox.Size.Height.Value));
            System.Drawing.Font font = new System.Drawing.Font("Verdana", 24);

            return Report1.CreateVerticalTextImage(text, imageSize, font, Color.Black);
        }


and the expression for the Value property of the PictureBox item will be:

    this.pictureBox1.Value = "=GetImage(ReportItem, \"Vertical Text\")";

This approach will replace the Chart report item as a solution to the vertical text problem. Meanwhile, we will investigate and fix the issue with the unexpected border.

Please, note that the current implementation requires the Size of the PictureBox item(s) to be set in pixels.
0
Martin
Top achievements
Rank 1
answered on 02 Apr 2008, 08:11 AM
Hi Matthew

Many thanks for that and the original code!

Yeah, when I set the color to White it works fine...

I owe you a pint!

Martin

0
Martin
Top achievements
Rank 1
answered on 02 Apr 2008, 08:12 AM
Thanks RH

Yeah, when I get time I'll try that code out....

If I get a result I'll let you know...

Regards

Martin
0
Chavdar
Telerik team
answered on 03 Apr 2008, 08:38 AM
Hi guys,

The good news is that we will be ready with the vertical/rotated text functionality for the upcoming release due in a couple of weeks in mid April.

Sincerely yours,
Chavdar
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Martin
Top achievements
Rank 1
answered on 03 Apr 2008, 12:49 PM
Hi Chavdar

Thanks, that is excellent news....

Can you tell me, Are there are future plans for support of cross tabs in reports ?

It has been mentioned as a possible in previous forum posts....

Regards

Martin

0
Svetoslav
Telerik team
answered on 04 Apr 2008, 11:31 AM
Hello Martin,

Yes we have great plans for a cross tab report item and I am confident it will be available before the end of the year.

Sincerely yours,
Svetoslav
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Martin
Top achievements
Rank 1
answered on 04 Apr 2008, 12:23 PM
Thanks Svetoslav

That'll be a great addition to your toolset....

Regards

Martin
Tags
General Discussions
Asked by
Feedback
Top achievements
Rank 1
Answers by
Svetoslav
Telerik team
Feedback
Top achievements
Rank 1
rh
Top achievements
Rank 1
Chavdar
Telerik team
Martin
Top achievements
Rank 1
Share this question
or