Rotating text to display vertically

[Feedback]

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

[Svetoslav]

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

[Feedback]

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

[Feedback]

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 Double, ByVal starty As Double, ByVal 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

 

[Svetoslav]

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

[Feedback]

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;

        }

[rh]

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?

[rh]

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?

[Chavdar]

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

[Martin]

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

[Feedback]

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 

[rh]

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.

[Martin]

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

[Martin]

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

[Chavdar]

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

[Martin]

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

[Svetoslav]

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

[Martin]

Thanks Svetoslav

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

Regards

Martin