Export to PNG issues

5 posts, 0 answers
  1. Mike
    Mike avatar
    23 posts
    Member since:
    Jun 2012

    Posted 13 Sep 2012 Link to this post

    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?
  2. Mike
    Mike avatar
    23 posts
    Member since:
    Jun 2012

    Posted 13 Sep 2012 Link to this post

    The same thing occurs in this chart.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 14 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  5. Mike
    Mike avatar
    23 posts
    Member since:
    Jun 2012

    Posted 14 Sep 2012 Link to this post

    Here is the code. Clicking on the button exports.

    Xaml:
     
     
    <Window x:Class="TelerikTest.Example"
        xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
        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);
            }
        }
    }

  6. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 17 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

Back to Top
UI for WPF is Visual Studio 2017 Ready