This is a migrated thread and some comments may be shown as answers.

Export to PNG issues

4 Answers 106 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 13 Sep 2012, 04:51 PM
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?

4 Answers, 1 is accepted

Sort by
0
Mike
Top achievements
Rank 1
answered on 13 Sep 2012, 06:48 PM
The same thing occurs in this chart.
0
Ves
Telerik team
answered on 14 Sep 2012, 11:22 AM
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.

0
Mike
Top achievements
Rank 1
answered on 14 Sep 2012, 02:47 PM
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);
        }
    }
}

0
Ves
Telerik team
answered on 17 Sep 2012, 11:57 AM
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.

Tags
ChartView
Asked by
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Ves
Telerik team
Share this question
or