Print RadChart

[Alessio]

Hi, I tried to print a radchart as shown in Vladimir Enchev's blog. Unfortunately, it doesn't show dataseries. Any suggestions? Here my code...

        public RadChart GetChart()
        {
            RadChart telerikChart = new RadChart();
            Grid grid = new Grid();
            grid.RowDefinitions.Add(new RowDefinition {Height = new GridLength(25, GridUnitType.Auto)});
            grid.RowDefinitions.Add(new RowDefinition());
            grid.ColumnDefinitions.Add(new ColumnDefinition());
            grid.ColumnDefinitions.Add(new ColumnDefinition());
            grid.ColumnDefinitions.Add(new ColumnDefinition {Width = new GridLength(100, GridUnitType.Auto)});
            telerikChart.UseDefaultLayout = false;
            telerikChart.Content = grid;

            //Monthly Sales for 2009
            //Chart Title
            ChartTitle monthlySalesTitle = new ChartTitle();
            monthlySalesTitle.Content = "Monthly Sales for 2009";
            monthlySalesTitle.HorizontalAlignment = HorizontalAlignment.Center;
            grid.Children.Add(monthlySalesTitle);

            //Chart Area
            ChartArea monthlySalesChart = new ChartArea();
            monthlySalesChart.EnableAnimations = false;
            monthlySalesChart.EnableStripLinesAnimation = false;
            Grid.SetRow(monthlySalesChart, 1);
            grid.Children.Add(monthlySalesChart);
            DataSeries monthlySalesDataSeries = new DataSeries();
            monthlySalesDataSeries.Definition = new BarSeriesDefinition();

            monthlySalesDataSeries.Add(new DataPoint {YValue = 38, XCategory = "Jan"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 65, XCategory = "Feb"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 30, XCategory = "Mar"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 63, XCategory = "Apr"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 98, XCategory = "May"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 47, XCategory = "Jun"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 91, XCategory = "Jul"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 99, XCategory = "Aug"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 32, XCategory = "Sep"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 77, XCategory = "Oct"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 62, XCategory = "Nov"});
            monthlySalesDataSeries.Add(new DataPoint {YValue = 38, XCategory = "Dec"});

            monthlySalesChart.DataSeries.Add(monthlySalesDataSeries);

            //Sales Per Manufacturer
            //Chart Title
            ChartTitle perManufacturerTitle = new ChartTitle();
            perManufacturerTitle.Content = "Sales per Manufacturer";
            perManufacturerTitle.HorizontalAlignment = HorizontalAlignment.Center;
            Grid.SetColumn(perManufacturerTitle, 1);
            grid.Children.Add(perManufacturerTitle);

            ////Chart Legend
            ChartLegend legend = new ChartLegend();
            legend.UseAutoGeneratedItems = true;
            legend.Header = string.Empty;
            legend.Name = "ChartLegendManufacturers";
            Grid.SetColumn(legend, 2);
            Grid.SetRow(legend, 1);
            grid.Children.Add(legend);

            ////Chart Area
            ChartArea perManufacturerChart = new ChartArea();
            perManufacturerChart.LegendName = "ChartLegendManufacturers";
            Grid.SetRow(perManufacturerChart, 1);
            Grid.SetColumn(perManufacturerChart, 1);
            grid.Children.Add(perManufacturerChart);

            DataSeries perManufacturerDataSeries = new DataSeries();
            perManufacturerDataSeries.Definition = new DoughnutSeriesDefinition();
            perManufacturerDataSeries.Definition.ItemLabelFormat = "p";
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.215208267, LegendLabel = "Toyota"});
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.192960612, LegendLabel = "General Motors"});
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.151830229, LegendLabel = "Volkswagen"});
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.125964366, LegendLabel = "Ford"});
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.091152353, LegendLabel = "Honda"});
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.079093251, LegendLabel = "Nissan"});
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.079093251, LegendLabel = "PSA"});
            perManufacturerDataSeries.Add(new DataPoint {YValue = 0.064697675, LegendLabel = "Hyundai"});

            perManufacturerChart.DataSeries.Add(perManufacturerDataSeries);

            return telerikChart;
        }

        private void ButtonPrint_Click(object sender, RoutedEventArgs e)
        {
            RadChart chartToPrint = GetChart();
            Print(chartToPrint, "test");
        }

        public static void Print(UIElement source, string documentName)
        {
            var doc = new PrintDocument();

            var offsetY = 0d;
            var totalHeight = 0d;

            var canvas = new Canvas();
            canvas.Children.Add(source);

            doc.PrintPage += (s, e) =>
                                 {
                                     e.PageVisual = canvas;

                                     if (totalHeight == 0)
                                     {
                                         totalHeight = source.DesiredSize.Height;
                                     }

                                     Canvas.SetTop(source, -offsetY);

                                     offsetY += e.PrintableArea.Height;
                                     e.HasMorePages = offsetY <= totalHeight;
                                 };
            doc.Print(documentName);
        }

[Alessio]

It seems that only BarSeriesDefinition and HorizontalBarSeriesDefinition doesn't work properly. Thanks

[Nikolay]

Hi Alessio,

Thank you for bringing this to our attention. It appears that there is an issue when printing RadChart with UseDefaultLayout = false. The issue has been logged for our developers to look into and provide a fix in one of the future versions of the control.

Your Telerik points have been updated.

Best wishes,
Nikolay
the Telerik team

[Nuno]

Hi all,

I steped into this same issue. It seems it also happens when UseDefaultLayout = true

Any news on this issue Telerik ? Is there a workaround ?

Thank you.

Nuno

[Nikolay]

Hi Nuno,

This issue is in our immediate plans, our developers will work on it and a fix will be provided with one of our upcoming latest internal builds ( LIB ), released every Friday.

Sincerely yours,
Nikolay
the Telerik team

[Nuno]

Hi all,

I found a workaround and I'd like to share with everyone. Hope it helps until Telerik provides the mentioned fix.

In my case I use: telerikChart.UseDefaultLayout = true; because I like the default layout and I didn't need to spend more time customizing it.

The trick is: create your RadChart like Alessio did but instead of calling Print(UIElement source, string documentName)  righ away, first add the RadChart to a Grid child collection (Grid declared in the XAML) and then pass that Grid as the UIElement of the Print Method.
If you don't need the Grid in the UI just set its opacity  Opacity="100". It's not a good thing but the Grid must be part of the XAML elements tree.

I'd modify Alessio code to:

private void ButtonPrint_Click(object sender, RoutedEventArgs e)
{
    RadChart chartToPrint = GetChart();
    dummyGrid.Children.Clear(); //GRID IN XAML
    dummyGrid.Children.Add(chartToPrint);
    Print(dummyGrid, "test");
}

This way BarSeriesDefinition and HorizontalBarSeriesDefinition should be printed properly.

Once again, hope it helps!

Best regards,
Nuno

[sachin]

Hi All,

I am using Telerik controls for Silverlight 3 in my application. I have the same requirement of printing a chart. The problem is that somehow I am not able to find the Class PrintDocument(). Am I missing some reference or this class is only available with silverlight 4 controls. 

If this is only available with silverlight 4, how can I achieve the same functionality with silverlight 3??

Thanks,
Sachin

[Vlad]

Hello,

 Indeed printing is available only in Silverlight 4. 

Kind regards,
Vlad
the Telerik team

[sachin]

Hi Vlad,

Thanks for the quick reply. Is there any workaround or hack available through which I can achieve the printing functionality. If print is not possible saving of chart as an image would also do. Can you please provide any reference for that.

Thanks,
Sachin

[Vlad]

Hello,

 You can check this demo for more info about how to save the chart as image in Silverlight 3. 

All the best,
Vlad
the Telerik team

[sachin]

 Hi Vlad,

Thanks for the solution. That thing worked like charm except for one thing. My requirement needs a watermark image in the background of chart. To implement that I took the refrence from this  thread. How can I include that watermark image along with the saved image.

Thanks for all your support.

Regards,
Sachin

[Yavor]

Hi sachin,

In order for the background image to appear in the saved image you can use ExportExtentions' method ExportToImage that can export any FrameworkElement as an image. So if you have the following XAML for example:

<Grid Name="printGrid">
    <Border Background="Red" />
    <telerik:RadChart Name="RadChart1" Background="Transparent" />
</Grid>

you can easily export it with these lines of code:

SaveFileDialog dialog = new SaveFileDialog();
dialog.Filter = "PNG File| *.png";
dialog.DefaultExt = "png";

if (dialog.ShowDialog() == true)
{
    using (Stream file = dialog.OpenFile())
    {
        Telerik.Windows.Media.Imaging.ExportExtensions.ExportToImage(this.printGrid, file, new Telerik.Windows.Media.Imaging.PngBitmapEncoder());
    }
}

Best wishes,
Yavor Ivanov
the Telerik team

[sachin]

Hi Vlad,

Thanks for all your support. The save chart image is working good. However the user of my application seems to be adamant about the print. Is there any way I can send the saved image file for print or any other hack/workaround with which I can print the chart or for that matter the whole browser screen using Silverlight 3 Telerik controls?

Thanks,
Sachin

[Yavor]

Hello sachin,

Silverlight 4 introduces the PrintDocument class that makes printing in Silverlight easy. To print the printGrid for example all you have to do is this:

private void printButton_Click(object sender, RoutedEventArgs e)
{
    PrintDocument printDocument = new PrintDocument();
    printDocument.PrintPage += printDocument_PrintPage;

    // Open the print dialog.
    printDocument.Print("Rad Chart");
}

void printDocument_PrintPage(object sender, PrintPageEventArgs e)
{
    e.PageVisual = this.printGrid;
}

I hope this gets you started properly.

Regards,
Yavor Ivanov
the Telerik team

[Phoebe]

Hello,

Was the original problem described ever solved? I am having the same issue in which any graph I print that uses HorizontalBarDefinition will not display the data series. However, if I change the defintion to anything else, such as a LineSeriesDefinition, the data series is displayed.

Let me know if there are any fixes or workaround for this. Thanks!

[Yavor]

Hello Alessio,

Our developers are aware of this issue and will fix it in a timely manner. The fix will be available in one of the upcoming LIBs, released every Monday.

This problem occurs when you are trying to print RadChart that is not added to the visual tree. Perhaps you can try the solution proposed by Nuno and see if it works for you.

Kind regards,
Yavor Ivanov
the Telerik team

[Gary]

Is this issue fixed yet? if I print to windows xps then everything is fine but printing to a physical printer causes lots of problems. Bars and stackbars do not appear, legends docked to the bottom of the chart area disappear, and legends docked to the the right (default) orientation changed from vertical to horizontal. We are currently using assembly version 2011.1.419.1040 Trial.

[Yavor]

Hi Gary,

The approach described in the previous posts should work for all series. I have attached a runnable code that prints a bar chart and an exported xps document. We also tried using a physical printer and the printed image matches the xps one.

If the problem persists, we would ask you to open a formal support ticket and send us a runnable version of your application that we can investigate locally so we can advise you properly how to proceed.

All the best,
Yavor Ivanov
the Telerik team

[Gary]

Yes, the way I understood it in the previous post. The problem only exist if the charts where not already rendered to the UI. I am trying to print out a report view that we have that has 5 charts. As is the charts will be to big to print to a single page. I have created a printer friendly version of the chart section of my view that is reduced to the fit on a single printed page. This control is only rendered at the time of printing. Something like the following:

void printDocument_PrintPage(object sender, PrintPageEventArgs e)

{

    e.PageVisual = new PrinterFriendlyReportView();

}

As I have said before the works fine with xps only. Physical printers do not print bar charts and the legends are either not populated are the orientation is changed. I will go ahead and open up a support ticket for this with a sample app.

[Yavor]

Hi Gary,

Can you please open a support ticket and upload a sample application that demonstrates the issue so that we can advice you how to proceed.

Greetings,
Yavor Ivanov
the Telerik team

[Gary]

I have already open a support ticket for this issue. (432108)

[Yavor]

Hi Gary,

Please take a look at your support ticket. We have provided a possible solution there.

Kind regards,
Yavor Ivanov
the Telerik team

[Christian]

Hi,

I had the same problem with a HorizontalBarSeries.
I fixed it by Setting Opacity on PART_MainContainer to 1 and ScaleX on

PART_AnimationTransform to 1.

<Style
       x:Key="{telerikControls:ThemeResourceKey ThemeType=
       external:SummerThemeExternal , ElementType=telerikCharting:HorizontalBar}"

       TargetType="telerikCharting:HorizontalBar">
       <Setter Property="Template" >
           <Setter.Value>
               <ControlTemplate TargetType="telerikCharting:HorizontalBar">
                   <Canvas Opacity="0" x:Name="PART_MainContainer">
                       <Rectangle x:Name="PART_DefiningGeometry"
                              Height="{TemplateBinding ItemActualHeight}"
                              Width="{TemplateBinding ItemActualWidth}"
                              Style="{TemplateBinding ItemStyle}"
                              RadiusX="{StaticResource BarRadiusX}"
                              RadiusY="{StaticResource BarRadiusY}" />
                       <Rectangle Height="{TemplateBinding ItemActualHeight}"
                              Width="{TemplateBinding ItemActualWidth}"
                              RadiusX="{StaticResource BarRadiusX}"
                              RadiusY="{StaticResource BarRadiusY}"
                              OpacityMask="{StaticResource BarOpacityMaskReversedBrush}"
                              Fill="{StaticResource BarMaskReversedBrush}"
                              Stroke="{StaticResource BarMaskReversedStroke}"
                              StrokeThickness="{StaticResource BarMaskStrokeThickness}" />
                       <Rectangle x:Name="PART_SelectedState"
                                  Height="{TemplateBinding ItemActualHeight}"
                                  Width="{TemplateBinding ItemActualWidth}"
                                  RadiusX="{StaticResource BarRadiusX}"
                                  RadiusY="{StaticResource BarRadiusY}"
                                  Fill="{StaticResource BarTopMaskReversedBrush}" />
                       <Canvas.RenderTransform>
                           <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"  />
                       </Canvas.RenderTransform>

                   </Canvas>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

[Christian]

Hi,

I had the same problem with a HorizontalBarSeries.
I fixed it by Setting Opacity on PART_MainContainer to 1 and ScaleX on

PART_AnimationTransform to 1.

<Style
       x:Key="{telerikControls:ThemeResourceKey ThemeType=
       external:SummerThemeExternal , ElementType=telerikCharting:HorizontalBar}"

       TargetType="telerikCharting:HorizontalBar">
       <Setter Property="Template" >
           <Setter.Value>
               <ControlTemplate TargetType="telerikCharting:HorizontalBar">
                   <Canvas Opacity="0" x:Name="PART_MainContainer">
                       <Rectangle x:Name="PART_DefiningGeometry"
                              Height="{TemplateBinding ItemActualHeight}"
                              Width="{TemplateBinding ItemActualWidth}"
                              Style="{TemplateBinding ItemStyle}"
                              RadiusX="{StaticResource BarRadiusX}"
                              RadiusY="{StaticResource BarRadiusY}" />
                       <Rectangle Height="{TemplateBinding ItemActualHeight}"
                              Width="{TemplateBinding ItemActualWidth}"
                              RadiusX="{StaticResource BarRadiusX}"
                              RadiusY="{StaticResource BarRadiusY}"
                              OpacityMask="{StaticResource BarOpacityMaskReversedBrush}"
                              Fill="{StaticResource BarMaskReversedBrush}"
                              Stroke="{StaticResource BarMaskReversedStroke}"
                              StrokeThickness="{StaticResource BarMaskStrokeThickness}" />
                       <Rectangle x:Name="PART_SelectedState"
                                  Height="{TemplateBinding ItemActualHeight}"
                                  Width="{TemplateBinding ItemActualWidth}"
                                  RadiusX="{StaticResource BarRadiusX}"
                                  RadiusY="{StaticResource BarRadiusY}"
                                  Fill="{StaticResource BarTopMaskReversedBrush}" />
                       <Canvas.RenderTransform>
                           <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"  />
                       </Canvas.RenderTransform>

                   </Canvas>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>