Rotating text to display vertically

18 posts, 0 answers
  1. Feedback
    Feedback avatar
    15 posts
    Member since:
    May 2007

    Posted 27 May 2007 Link to this post

    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
  2. Svetoslav
    Admin
    Svetoslav avatar
    649 posts

    Posted 28 May 2007 Link to this post

    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
  3. DevCraft banner
  4. Feedback
    Feedback avatar
    15 posts
    Member since:
    May 2007

    Posted 28 May 2007 Link to this post

    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
  5. Feedback
    Feedback avatar
    15 posts
    Member since:
    May 2007

    Posted 29 May 2007 Link to this post

    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 
     

     

  6. Svetoslav
    Admin
    Svetoslav avatar
    649 posts

    Posted 30 May 2007 Link to this post

    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
  7. Feedback
    Feedback avatar
    15 posts
    Member since:
    May 2007

    Posted 30 May 2007 Link to this post

    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;  
     
            }  
     
  8. rh
    rh avatar
    193 posts
    Member since:
    Jan 2007

    Posted 16 Feb 2008 Link to this post

    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?
  9. rh
    rh avatar
    193 posts
    Member since:
    Jan 2007

    Posted 16 Feb 2008 Link to this post

    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?
  10. Chavdar
    Admin
    Chavdar avatar
    898 posts

    Posted 19 Feb 2008 Link to this post

    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
  11. Martin
    Martin avatar
    12 posts
    Member since:
    Dec 2007

    Posted 01 Apr 2008 Link to this post

    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
  12. Feedback
    Feedback avatar
    15 posts
    Member since:
    May 2007

    Posted 01 Apr 2008 Link to this post

    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 
  13. rh
    rh avatar
    193 posts
    Member since:
    Jan 2007

    Posted 01 Apr 2008 Link to this post

    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.
  14. Martin
    Martin avatar
    12 posts
    Member since:
    Dec 2007

    Posted 02 Apr 2008 Link to this post

    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

  15. Martin
    Martin avatar
    12 posts
    Member since:
    Dec 2007

    Posted 02 Apr 2008 Link to this post

    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
  16. Chavdar
    Admin
    Chavdar avatar
    898 posts

    Posted 03 Apr 2008 Link to this post

    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
  17. Martin
    Martin avatar
    12 posts
    Member since:
    Dec 2007

    Posted 03 Apr 2008 Link to this post

    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

  18. Svetoslav
    Admin
    Svetoslav avatar
    649 posts

    Posted 04 Apr 2008 Link to this post

    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
  19. Martin
    Martin avatar
    12 posts
    Member since:
    Dec 2007

    Posted 04 Apr 2008 Link to this post

    Thanks Svetoslav

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

    Regards

    Martin
Back to Top
DevCraft banner