Export to PNG issues

[Mike]

Hello,

I've created a sample chart in Telerik with stacked bars, and a line (TelerikChart.png). When I export to PNG with the following code:

PngBitmapEncoder testEncoder = new PngBitmapEncoder();
Telerik.Windows.Media.Imaging.ExportExtensions.ExportToImage(RadCartesianChart, "c:\\temp\\test.png", testEncoder);

The PNG is created, but it appears the line has moved from it's original values (the points have not). See ExportedChart.png.

Also, how can I get the exported PNG to contain the legend as well?

[Mike]

The same thing occurs in this chart.

[Ves]

Hi Mike,

We are not able to reproduce the problem on our end. Can you please send us a small example, which shows it? This way we will be able to debug it locally and get back to you with our findings. Thank you.

Best regards,
Ves
the Telerik team

[Mike]

Here is the code. Clicking on the button exports.

Xaml:

 

 

<Window x:Class="TelerikTest.Example"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    xmlns:barDemo="clr-namespace:TelerikTest"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

 

    <Grid Name="TheGrid">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="6*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

 

        <chart:RadCartesianChart x:Name="RadCartesianChart" Palette="Metro" Margin="0,18,0,0">

 

            <telerik:RadCartesianChart.Behaviors>

                <telerik:ChartSelectionBehavior DataPointSelectionMode="Single"

                                                SelectionChanged="ChartSelectionBehavior_SelectionChanged"/>

            </telerik:RadCartesianChart.Behaviors>

 

            <telerik:RadCartesianChart.Grid>

                <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5">

                    <telerik:CartesianChartGrid.MajorXLineStyle>

                        <Style TargetType="Line">

                            <Setter Property="Shape.Stroke" Value="Gray" />

                        </Style>

                    </telerik:CartesianChartGrid.MajorXLineStyle>

                    <telerik:CartesianChartGrid.MajorYLineStyle>

                        <Style TargetType="Line">

                            <Setter Property="Shape.Stroke" Value="Gray" />

                        </Style>

                    </telerik:CartesianChartGrid.MajorYLineStyle>

                </telerik:CartesianChartGrid>

            </telerik:RadCartesianChart.Grid>

            <telerik:RadCartesianChart.VerticalAxis>

                <telerik:LinearAxis />

            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.HorizontalAxis>

                <telerik:CategoricalAxis />

            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:LineSeries CombineMode="Stack" Stroke="#FF5AA4D4">

                <telerik:LineSeries.DataPoints>

                    <telerik:CategoricalDataPoint Value="0.5" />

                    <telerik:CategoricalDataPoint Value="0.8" />

                    <telerik:CategoricalDataPoint Value="0.9" />

                    <telerik:CategoricalDataPoint Value="1.2" />

                    <telerik:CategoricalDataPoint Value="1.1" />

                    <telerik:CategoricalDataPoint Value="1.3" />

                </telerik:LineSeries.DataPoints>

                <telerik:LineSeries.PointTemplate>

                    <DataTemplate>

                        <Ellipse Fill="#FF5AA4D4" Height="10" Width="10" />

                    </DataTemplate>

                </telerik:LineSeries.PointTemplate>

            </telerik:LineSeries>

            <telerik:LineSeries CombineMode="Stack" Stroke="#FFFF5B00">

                <telerik:LineSeries.DataPoints>

                    <telerik:CategoricalDataPoint Value="0.5" />

                    <telerik:CategoricalDataPoint Value="0.8" />

                    <telerik:CategoricalDataPoint Value="0.9" />

                    <telerik:CategoricalDataPoint Value="1.2" />

                    <telerik:CategoricalDataPoint Value="1.1" />

                    <telerik:CategoricalDataPoint Value="1.3" />

                </telerik:LineSeries.DataPoints>

                <telerik:LineSeries.PointTemplate>

                    <DataTemplate>

                        <Ellipse Fill="#FFFF5B00" Height="10" Width="10" />

                    </DataTemplate>

                </telerik:LineSeries.PointTemplate>

            </telerik:LineSeries>

        </chart:RadCartesianChart>

 

        <StackPanel Grid.Column="1" Margin="0,14,0,0" HorizontalAlignment="Center">

            <Button Width="40" Height="30" Content="Export"  Click="Button_Click"></Button>

        </StackPanel>

    </Grid>

</Window>



CS:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.ChartView;

namespace TelerikTest
{
    /// <summary>
    /// Interaction logic for Example.xaml
    /// </summary>
    public partial class Example : Window
    {
        public Example()
        {
            InitializeComponent();

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            System.Windows.Media.Imaging.PngBitmapEncoder test = new PngBitmapEncoder();
            PngBitmapEncoder testEncoder = new PngBitmapEncoder();
            Telerik.Windows.Media.Imaging.ExportExtensions.ExportToImage(RadCartesianChart, "c:\\temp\\test.png", testEncoder);
        }
    }
}

[Ves]

Hi Mike,

Thanks for the details. It seems the problem comes from the top margin -- it set to 18 in your example. While we investigate this, please use an additional container (i.e. wrap the chart in a Grid) and set its Margin property instead of RadCartesianChart's one:

<Grid Margin="0,18,0,0">

    <chart:RadCartesianChart x:Name="RadCartesianChart" Palette="Metro" >
...........


Kind regards,
Ves
the Telerik team